{% 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 your bulk-sending spreadsheet
{% endblock %}


{% block backLink %}
  {{ usaBackLink({
    "href": url_for('main.send_one_off_step', service_id=current_service.id, template_id=template.id, step_index=0),
    "html": "Back to select recipients"
  }) }}
{% 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 <a class=\"usa-link\" href=\"/using-notify/how-to#personalize-content\">personalized placeholder</a> 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 personalized placeholder with the appropriate data or information",
  },
  {
    "svg_src": "#check_circle",
    "card_heading": "Fill in each <a class=\"usa-link\" href=\"/using-notify/how-to#conditional-content\">conditional placeholder</a> column with a Yes (Y) or No (N) to “answer” whether the recipient meets its criteria",
  }
  ]
%}

{% block maincolumn_content %}

  {{ page_header('Upload your bulk-sending spreadsheet')}}
  <p class="font-sans-lg text-base">Organize phone numbers and information in a single spreadsheet and upload when you have multiple messages to send. Column headers in the spreadsheet will place the data in the right spots within the template that's selected.</p>

  <div class="page-footer bottom-gutter margin-top-3">
    {{file_upload(
      form.file,
      allowed_file_extensions=allowed_file_extensions,
      button_text='Choose and upload a spreadsheet',
      show_errors=False
    )}}
  </div>
  <span id="upload-status-live" class="usa-sr-only" role="status" aria-live="polite" aria-atomic="true"></span>

  <h2 class="font-body-lg">A spreadsheet is available to use</h2>

  <div class="spreadsheet" data-module="fullscreen-table">
    {% call(item, row_number) list_table(
      example,
      caption="Example spreadsheet",
      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 this example 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">
      <div class="grid-col-12">
        <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 | safe }}
            </div>
          </li>
          {% endfor %}
        </ul>
      </div>
      <div class="grid-col-12">
        <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 | safe }}
            </div>
          </li>
          {% endfor %}
        </ul>
      </div>
      <div class="grid-col-12">
        <h3>If an error occurs</h3>
        <ul class="usa-icon-list">
          <li class="usa-icon-list__item">
            <div class="usa-icon-list__icon text-red">
              <svg aria-hidden="true" focusable="false" role="img" class="usa-icon">
                <use xlink:href="{{ asset_url('img/sprite.svg') }}#error"></use>
              </svg>
            </div>
            <div class="usa-icon-list__content">
              If you're receiving any errors, double check your file format and make sure your data is pasted in with values only
            </div>
          </li>
        </ul>
        </div>
    </div>
  </div>

  <h2 class="font-body-lg margin-bottom-2">You are filling in this template</h2>
  <p>Template: {{ template.name }}</p>
  {{ template|string }}


{% endblock %}