{% extends "withnav_template.html" %}
{% from "components/page-header.html" import page_header %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/file-upload.html" import file_upload %}
{% from "components/table.html" import list_table, text_field, index_field, index_field_heading %}
{% from "components/components/back-link/macro.njk" import usaBackLink %}
<script type="text/javascript" src="{{ asset_url('js/setTimezone.js') }}"></script>

{% block service_page_title %}
  Upload a list of {{ 999|recipient_count_label(template.template_type) }}
{% endblock %}


{% block backLink %}
  {{ usaBackLink({ "href": url_for('main.send_one_off', service_id=current_service.id, template_id=template.id) }) }}
{% endblock %}

{% block maincolumn_content %}

  {{ page_header('Upload a list of {}'.format(999|recipient_count_label(template.template_type))) }}

  <div class="page-footer bottom-gutter">
    {{file_upload(
      form.file,
      allowed_file_extensions=allowed_file_extensions,
      button_text='Choose a file',
      show_errors=False
    )}}
  </div>

  <h2 class="font-body-lg">Your file needs to look like this example</h2>
  <p class="hint">
    Save your file as a
    <acronym title="Comma Separated Values">CSV</acronym>,
    <acronym title="Tab Separated Values">TSV</acronym>,
    <acronym title="Open Document Spreadsheet">ODS</acronym>,
    or Microsoft Excel spreadsheet
  </p>

  <div class="spreadsheet" data-module="fullscreen-table">
    {% call(item, row_number) list_table(
      example,
      caption="Example",
      caption_visible=False,
      field_headings=[''] + column_headings
    ) %}
      {{ index_field(row_number - 1) }}
      {% for column in item %}
        {{ text_field(column) }}
      {% endfor %}
    {% endcall %}
  </div>
  <p class="table-show-more-link">
    <a class="usa-link" href="{{ url_for('.get_example_csv', service_id=current_service.id, template_id=template.id) }}" download>Download this example (<abbr title="Comma separated values">CSV</abbr>)</a>
  </p>

  <h2 class="font-body-lg margin-bottom-1">Your file will populate this template:<br><span class="font-body-lg">({{ template.name }})</span></h2>
  {{ template|string }}

{% endblock %}