<div style="display: block;">
    <hr>
    <td>
      <div class="badge-num">
        <span class="badge-preview size-digit-1">
          <b data-val="position"><%= 1 %></b>
        </span>
        &nbsp; &nbsp;
        <span class="step-panel-collapse-link" data-toggle="collapse">
          <span class="fas fa-caret-right"></span>
          <strong data-val="name"><%= 'Protocol info' %></strong>
        </span>
      </div>
      <br>
  <div class="tab-content">
    <div class="tab-pane active" role="tabpanel">
      <div data-val="description" class="ql-editor">
        <br>
        <% prot_info_string = '' %>
        <% @remaining = ProtocolsIoHelper::PIO_P_AVAILABLE_LENGTH %>
        <% protocol_table_elements_array = [] %>
        <% add_to_info_string_elements = ['description','before_start','warning','guidelines','manuscript_citation']%>
        <% protocol_attr_len_hash = {
             description: ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_MEDIUM,
             before_start: ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_MEDIUM,
             warning: ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_MEDIUM,
             guidelines: ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_MEDIUM,
             manuscript_citation: ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_MEDIUM,
             vendor_name: ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_MEDIUM,
             keywords: ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_MEDIUM,
             tags: ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_MEDIUM,
             published_on: ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_SMALL,
             link: ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_BIG,
             vendor_link: ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_BIG } %>
        <% allowed_image_attributes = %w(
             description before_start warning guidelines manuscript_citation
           ) %>
        <% protocol_attr_len_hash.each do |element, value|%>
          <% element = element.to_s %>

          <% if(json_object[element].present?) %>
            <% if element == 'published_on' %>
              <% translation_string = 'protocols.protocols_io_import.preview.' + element %>
              <strong><%= t(translation_string) %></strong>
              <%= prepare_for_view(Time.at(json_object[element]).utc.to_datetime,protocol_attr_len_hash[element.to_sym]).html_safe %>
            <% elsif element == 'tags' %>
              <% translation_string = 'protocols.protocols_io_import.preview.' + element %>
              <strong><%= t(translation_string) %></strong>
              <% string_of_tags='' %>
              <%  json_object['tags'].each do |tag| %>
                <% string_of_tags += tag['tag_name']+' , ' %>
              <% end %>
              <%= prepare_for_view(string_of_tags, ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_MEDIUM,'table').html_safe %>
            <% else %>
              <% prot_info_string += not_null(json_object[element]) if add_to_info_string_elements.include? element %>
              <% translation_string = 'protocols.protocols_io_import.preview.' + element %>
              <strong><%= t(translation_string) %></strong>
              <% image_tag = allowed_image_attributes.include?(element) ? true : false %>
              <%= prepare_for_view(json_object[element],protocol_attr_len_hash[element.to_sym],'table',image_tag).html_safe %>
            <% end %>
            <br>
          <% end %>
        <% end %>
        <% tables, garbage = protocolsio_string_to_table_element(prot_info_string) %>
        <% if tables.present? %>
          <br><hr><br>
          <% end %>
          <% table_count = 0 %>
          <% tables.each do |index, table| %>
          <%   table_hash = JSON.parse((Base64.decode64(table['contents']))) %>
          <%   pio_table_id = "pio_table_prot_info_"+table_count.to_s %>
          <%   protocol_table_elements_array.push([pio_table_id,table_hash['data']]) %>
          <div id="<%=pio_table_id%>"></div><br>
          <%   table_count += 1 %>
        <% end %>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
$('#modal-import-json-protocol-preview').on('shown.bs.modal', function (e) {
  var javascript_table_elements_p = <%=raw sanitize_input(protocol_table_elements_array.to_json) %>
  for(var j=0;j<javascript_table_elements_p.length;j++)
  {

  var target = document.getElementById(javascript_table_elements_p[j][0]);
  var hot = new Handsontable(target, {
    data: javascript_table_elements_p[j][1],
    startRows: <%= Constants::HANDSONTABLE_INIT_ROWS_CNT %>,
    startCols: <%= Constants::HANDSONTABLE_INIT_COLS_CNT %>,
    rowHeaders: true,
    colHeaders: true,
    fillHandle: false,
    formulas: true,
    readOnly: true,
    height: 200
  });
}
})

</script>
