<%  whitelist_simple=[1, 6, 17] %>
<%  whitelist_complex=[8, 9, 15, 18, 19, 20]%>
<%  step_table_elements_array = [] %>
<% get_steps(json_object).each_with_index do |step, counter_orig| %>
<% @remaining = ProtocolsIoHelper::PIO_S_AVAILABLE_LENGTH %>
<% counter = counter_orig + 2 %>
<div style="display: block;">
  <hr>
  <td>
    <div class="badge-num">
      <span class="badge-preview size-digit-1">
        <b data-val="position"><%= (counter) %></b>
      </span>
      &nbsp; &nbsp;
      <span class="step-panel-collapse-link" data-toggle="collapse">
        <span class="fas fa-caret-right"></span>
        <% title = nil %>
        <% get_components(step).each do |comp| # finding section (title of step) %>
          <%  if comp['type_id'] == 6 %>
            <% title = pio_eval_title_len(sanitize_input(comp['source']['title'])) \
              if comp.dig('source', 'title').present? %>
            <% end %>
        <% end %>
        <% title ||= t('protocols.protocols_io_import.comp_append.missing_step') %>
        <strong data-val="name"><%= title %></strong>
      </span>
    </div>
    <br>
    <div class="tab-content">
      <div class="tab-pane active" role="tabpanel">
        <div data-val="description" class="ql-editor">
        <% step_info_string = '' %>
        <% get_components(step).each do |key|  %>
          <% if whitelist_simple.include?(key['type_id']) && key['source'].present? %>
              <br>
              <% case key['type_id']
              when 1 %>
                <% data = key['source']['description'] %>
                <% if data.present? %>
                  <% step_info_string += not_null(data) %>
                  <br>
                  <strong><%= t('protocols.protocols_io_import.preview.strng_s_desc') %></strong>
                  <%= prepare_for_view(
                        data,
                        ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_SMALL,
                        'table', true).html_safe %>
                  <br>
                <% end %>
              <% when 17 %>
                <% data = key['source']['body'] %>
                <% if data.present? %>
                  <% step_info_string += not_null(data) %>
                  <br>
                  <strong><%= t('protocols.protocols_io_import.preview.s_exp_res') %></strong>
                  <%= prepare_for_view(
                        data,
                        ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_SMALL,
                        'table', true).html_safe %>
                  <br>
                <% end %>
              <% end %> <%# end case %>
          <% elsif key && whitelist_complex.include?(key['type_id']) %>
            <% case key['type_id']
            when 8 %>
              <% step_info_string += not_null(key['source']['name']) %>
              <br>
              <%= t('protocols.protocols_io_import.preview.sw_name').html_safe %>
              <%= prepare_for_view(key['source']['name'],ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_SMALL,'table').html_safe %>
              <br>
              <%= t('protocols.protocols_io_import.preview.dev') %>
              <%= prepare_for_view(key['source']['developer'],ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_SMALL,'table').html_safe %>
              <br>
              <%= t('protocols.protocols_io_import.preview.vers') %>
              <%= prepare_for_view(key['source']['version'],ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_SMALL,'table').html_safe %>
              <br>
              <%= t('protocols.protocols_io_import.preview.s_link') %>
              <%= prepare_for_view(key['source']['link'],ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_SMALL,'table').html_safe %>
              <br>
              <%= t('protocols.protocols_io_import.preview.repo') %>
              <%= prepare_for_view(key['source']['repository'],ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_SMALL,'table').html_safe %>
              <br>
              <%= t('protocols.protocols_io_import.preview.os') %>
              <%= prepare_for_view(key['source']['os_name'],ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_SMALL,'table').html_safe + ' , ' +
              prepare_for_view(key['source']['os_version'],ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_SMALL,'table').html_safe %>
            <% when 9 %>
              <% step_info_string += not_null(key['source']['name']).html_safe %>
              <br>
              <%= t('protocols.protocols_io_import.preview.dataset_name').html_safe %>
              <%= prepare_for_view(key['source']['name'],ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_SMALL,'table').html_safe %>
              <br>
              <%= t('protocols.protocols_io_import.preview.s_link') %>
              <%= prepare_for_view(key['source']['link'],ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_SMALL,'table').html_safe %>
            <% when 15 %>
              <% step_info_string += not_null(key['source']['description']) %>
              <br>
              <%= t('protocols.protocols_io_import.preview.command_name').html_safe %>
              <%= prepare_for_view('<pre><code>'+key['source']['name'].gsub(/\n/, '<br>')+'</code></pre>',ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_SMALL,'table').html_safe %>
              <br>
              <%= t('protocols.protocols_io_import.preview.s_desc') %>
              <%= prepare_for_view(key['source']['description'],ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_SMALL,'table').html_safe %>
              <br>
              <%= t('protocols.protocols_io_import.preview.os') %>
              <%= prepare_for_view(key['source']['os_name'],ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_SMALL,'table').html_safe + ' , ' +
              prepare_for_view(key['source']['os_version'],ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_SMALL,'table').html_safe %>
            <% when 18 %>
              <br>
              <%= t('protocols.protocols_io_import.preview.sub_prot').html_safe %>
              <%= pio_eval_title_len(sanitize_input(key['source']['title'])).html_safe %>
              <br>
              <%= t('protocols.protocols_io_import.preview.auth') %>
              <%= prepare_for_view(key['source']['title_html'],ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_SMALL,'table').html_safe %>
              <br>
              <% if key['source']['uri'].present? %>
                <%= t('protocols.protocols_io_import.preview.s_nobr_link') %>
                <%= prepare_for_view(key['source']['uri'],ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_SMALL,'table').html_safe %>
              <% end %>
            <% when 19 %>
              <% step_info_string += not_null(key['source']['body']) %>
              <br>
              <%= t('protocols.protocols_io_import.preview.safety_info').html_safe %>
              <%= prepare_for_view(key['source']['body'],ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_SMALL,'table').html_safe %>
              <br>
              <%= t('protocols.protocols_io_import.preview.s_link') %>
              <%= prepare_for_view(key['source']['link'],ProtocolsIoHelper::PIO_ELEMENT_RESERVED_LENGTH_SMALL,'table').html_safe %>
            <% else %>
            <% end #case if%>
          <% end #inner if%>
        <% end #step component loop %>
        <% tables, garbage = protocolsio_string_to_table_element(step_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_step_"+counter.to_s+"_info_"+table_count.to_s %>
          <%   step_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>
  <% end  #step loop%>
  <br>
  <script type="text/javascript">
  $('#modal-import-json-protocol-preview').on('shown.bs.modal', function (e) {
    var javascript_table_elements_s = <%=raw sanitize_input(step_table_elements_array.to_json) %>

    for(var j=0;j<javascript_table_elements_s.length;j++)
    {

    var target = document.getElementById(javascript_table_elements_s[j][0]);

    var hot = new Handsontable(target, {
      data: javascript_table_elements_s[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>
