<div class="modal fade"
     id="parse-records-modal"
     aria-labelledby="parse-modal-title"
     role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="sn-icon sn-icon-close"></i></button>
        <h4 class="modal-title" id="parse-modal-title"><%= t('repositories.modal_parse.title') %></h4>
      </div>
      <%= form_with(url: import_records_repository_path(@import_data.repository, format: :json),
                             html: {'data-type' => 'json', id: 'form-import'},
                             data: { remote: true }) do |f|%>
      <%= f.hidden_field :team_id, value: current_team.id %>
      <div class="modal-body">
        <p><%= t("repositories.parse_sheet.help_text") %></p>
        <div class="form-check">
          <div class="sci-checkbox-container">
            <%= f.check_box :edit_existing_items_checkbox, { class: 'sci-checkbox'} %>
            <span class="sci-checkbox-label"></span>
          </div>
          <%= f.label :edit_existing_items_checkbox, t("repositories.parse_sheet.edit_existing_items_checkbox") %>
        </div>
        <div class="form-check">
          <div class="sci-checkbox-container">
            <%= f.check_box :overwrite_with_empty_cells, { class: 'sci-checkbox', checked: false} %>
            <span class="sci-checkbox-label"></span>
          </div>
          <%= f.label :overwrite_with_empty_cells, t("repositories.parse_sheet.overwrite_with_empty_cells") %>
        </div>
        <div style="overflow-x: scroll">
          <table class="table parse-records-table" style="display: block">
            <thead>
              <th style="min-width: 100px">
                <p><%= t("repositories.parse_sheet.scinote_columns_html") %></p>
                <p style="margin-bottom: 0px"><%= t("repositories.parse_sheet.file_columns") %></p>
              </th>
              <% @import_data.header.each.with_index do |th, index| %>
                <th style="min-width: 150px" title="<%= th %>">
                  <%= f.select("mappings[#{index.to_s}]",
                               options_from_collection_for_select(@import_data.available_fields.merge({{name: 'new text option', type: 'Text'}.to_json => "new_text_option"}, {{name: 'new list option', type: 'List'}.to_json => "new_list_option"}),
                                                                  :first,
                                                                  :last),
                               { include_blank: t('repositories.parse_sheet.do_not_include_column'), hide_label: true },
                               { class:'form-control' }) %>
                  <div class="mt-8">
                    <% if th.nil? %>
                      <i><%= t('repositories.import_records.no_header_name') %></i>
                    <% else %>
                      <% if th.length > Constants::NAME_TRUNCATION_LENGTH_DROPDOWN %>
                        <div class="modal-tooltip">
                          <%= truncate(th, length: Constants::NAME_TRUNCATION_LENGTH_DROPDOWN) %>
                        </div>
                      <% else %>
                        <%= th %>
                      <% end %>
                    <% end %>
                  </div>
                </th>
              <% end %>
            </thead>
            <tbody>
              <tr>
                <td>
                  <p><%= t('repositories.parse_sheet.example_value') %></p>
                </td>
                <% @import_data.columns.each do |td| %>
                  <td>
                    <%= td %>
                  </td>
                <% end %>
              </tr>
            </tbody>
          </table>
        </div>
        <%= hidden_field_tag 'file_id', @temp_file.id %>

        <div id="import-errors-container">
        </div>
        <div class="alert alert-info" role="alert">
          <ul>
            <li><%=t 'repositories.modal_parse.warning_1', limit: Constants::REPOSITORY_LIST_ITEMS_PER_COLUMN %></li>
            <li><%=t 'repositories.modal_parse.warning_2' %></li>
          </ul>
        </div>
      </div>
      <% if @importing_duplicates_warning %>
        <div class="alert alert-warning">
          <%= @importing_duplicates_warning %>
        </div>
      <% end %>
      <div class="modal-footer">
        <button id="parse-records-cancel-btn" type="button" class="btn btn-secondary"><%= t('general.cancel')%></button>
        <input type="submit" class="btn btn-success" value="<%= t('repositories.modal_parse.import') %>">
      </div>
      <% end %>
    </div>
  </div>
</div>
