<% content_for :title, 'Upload' %>

<% content_for :breadcrumbs do %>
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <%= link_to current_project.name, project_path(current_project) %>
    </li>
    <li class="breadcrumb-item active">
      Upload
    </li>
  </ol>
<% end %>

<div class="row p-0">
  <div class="col-lg-6 col-xl-5 mb-4">
    <div class="content-container mb-0 h-100">
      <h4 class="header-underline">Upload Output Files</h4>
      <p class="mt-4">Use the form below to upload output files from other tools.</p>

      <div class="mt-4">
        <%= form_tag project_upload_manager_path(current_project, format: :js), multipart: true, id: 'new_upload', data: { parse_url: project_upload_parse_path(current_project) } do %>
          <div class="mb-5 mt-4 pt-2">
            <%= label_tag :uploader do %>
              <h5>1. Tool you are uploading output from</h5>
            <% end %>
            <%= select_tag 'uploader', options_from_collection_for_select(@uploaders, :name, :name), { class: 'form-select', data: { behavior: 'tool-select' } } %>
          </div>
          <div class="mb-5">
            <%= label_tag :state do %>
              <h5>2. State of uploaded records</h5>
            <% end %>
            <%= select_tag 'state', options_for_select(Issue.states.map { |s, id| [s.humanize, s] }), { class: 'form-select state-select', data: { behavior: 'state-select' } } %>
          </div>
          <div class="mb-4">
            <%= label_tag :file do %>
              <h5>3. Upload tool output file</h5>
            <% end %>
            <div>
              <label class="visually-hidden" data-behavior="file-label">Choose file</label>
              <%= file_field_tag 'file', class: 'form-control' %>
              <%= hidden_field_tag 'item_id' %>
              <%= hidden_field_tag 'attachment' %>
              <%= hidden_field_tag 'format', 'js' %>
            </div>
          </div>
        <% end %>

        <p>Upload progress:</p>
        <div class="progress mb-2">
          <div class="progress-bar progress-bar-striped">
            <div class="percent">0%</div>
          </div>
        </div>

      </div>
    </div>
  </div>

  <div class="col-lg-6 col-xl-7 mb-4">
    <div class="content-container mb-0 h-100">
      <h4 class="header-underline">Output console</h4>
      <div id="status"></div>
      <%= content_tag :div, id: 'result', style: 'display:none', data: { url: status_console_index_path }  do %>
        <div><strong>Filename</strong>: <span id="filename"></span> <span id="spinner"><%= image_tag 'loading.gif', style: "margin:0;", alt: 'loading spinner' %></span></div>
        <div><strong>Size</strong>: <span id="filesize"></span></div>
        <div id="console" class="mx-0 mb-0"></div>
      <% end %>
    </div>
  </div>
</div>
