{% 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(params) }}
{% endblock %}

{% set phone_numbers = [
  {
      "svg_src": "#check_circle",
      "card_heading": "Label column A (the first column) as Phone number",
    },
    {
      "svg_src": "#check_circle",
      "card_heading": "Double check it’s the only column with Phone number as its label",
    },
    {
      "svg_src": "#check_circle",
      "card_heading": "Make sure no duplicate phone numbers are listed in Column A",
    }
  ]
%}

{% set additional_data = [
  {
    "svg_src": "#check_circle",
    "card_heading": "Match column labels one-to-one to the message template placeholders",
  },
  {
    "svg_src": "#check_circle",
    "card_heading": "Label each additional personalized placeholder separately",
  },
  {
    "svg_src": "#check_circle",
    "card_heading": "Separate each word in a column label with a space or dash, but no commas",
  },
  {
    "svg_src": "#check_circle",
    "card_heading": "Fill in each conditional placeholder column with a Yes (Y) or No (N) to “answer” whether the recipient meets its criteria",
  }
  ]
%}

{% block maincolumn_content %}

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

  <h2 class="font-body-lg margin-bottom-2">Populate your template</h2>
  <p>Template: {{ template.name }}</p>
  {{ template|string }}

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

  <h2 class="font-body-lg">Use our example file</h2>

  <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="hint">
    Each template saved in Notify is given an example <abbr title="Comma Separated Values">CSV</abbr> formatted spreadsheet like this. It’s the most reliable file format for uploading your contact list. Use it to populate your template with the right data items. Start by downloading this example for your message template. Then save it as a <abbr title="Comma Separated Values">CSV</abbr> file for bulk messaging.
  </p>
  <p class="table-show-more-link">
    <a class="usa-link display-flex margin-top-1" 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>)
      <img class="margin-left-05" src="{{ asset_url('img/material-icons/download.svg') }}" alt="" />
    </a>
  </p>
  <h2 class="font-body-lg">Your bulk-sending spreadsheet checklist</h2>
  <div class="grid-container margin-top-2 padding-0">
    <div class="grid-row grid-gap-4">
      <div class="grid-col-5">
        <h3>Phone numbers</h3>
        <ul class="usa-icon-list">
          {% for item in phone_numbers %}
          <li class="usa-icon-list__item">
            <div class="usa-icon-list__icon text-green">
              <svg aria-hidden="true" focusable="false" role="img" class="usa-icon">
                <use xlink:href="{{ asset_url('img/sprite.svg') }}{{ item.svg_src }}"></use>
              </svg>
            </div>
            <div class="usa-icon-list__content">
              {{item.card_heading}}
            </div>
          </li>
          {% endfor %}
        </ul>
      </div>
      <div class="grid-col-5 margin-left-4 padding-x-4 padding-bottom-4">
        <h3>Additional data</h3>
        <ul class="usa-icon-list">
          {% for item in additional_data %}
          <li class="usa-icon-list__item">
            <div class="usa-icon-list__icon text-green">
              <svg aria-hidden="true" focusable="false" role="img" class="usa-icon">
                <use xlink:href="{{ asset_url('img/sprite.svg') }}{{ item.svg_src }}"></use>
              </svg>
            </div>
            <div class="usa-icon-list__content">
              {{item.card_heading}}
            </div>
          </li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>

{% endblock %}