{% extends "withnav_template.html" %}
{% from "components/banner.html" import banner_wrapper %}
{% from "components/radios.html" import radio_select %}
{% from "components/table.html" import list_table, field, text_field, index_field, hidden_field_heading %}
{% from "components/page-header.html" import page_header %}
{% from "components/button/macro.njk" import govukButton %}

{% block service_page_title %}
  {{ original_file_name }}
{% endblock %}

{% block maincolumn_content %}

  {{ page_header(
    original_file_name,
    back_link=url_for('main.upload_contact_list', service_id=current_service.id)
  ) }}

  <p class="govuk-body">
    {{ recipients|length|recipient_count(recipients.template_type) }} found
  </p>

  <div class="bottom-gutter-3-2">
    <form method="post" enctype="multipart/form-data" action="{{ url_for('main.save_contact_list', service_id=current_service.id, upload_id=upload_id) }}">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
      {{ govukButton({ "text": "Save contact list" }) }}
    </form>
  </div>

  <h2 class="govuk-heading-m">
    File preview
  </h2>
  {% call(item, row_number) list_table(
    recipients.displayed_rows,
    caption=original_file_name,
    caption_visible=False,
    field_headings=[
      '<span class="govuk-visually-hidden">Row in file</span> <span aria-hidden="true">1</span>'|safe
    ] + recipients.column_headers
  ) %}
    {{ index_field(item.index + 2) }}
    {% for column in recipients.column_headers %}
      {% if item[column].ignore %}
        {{ text_field(item[column].data or '', status='default') }}
      {% else %}
        {{ text_field(item[column].data or '') }}
      {% endif %}
    {% endfor %}
    {% if item[None].data %}
      {% for column in item[None].data %}
        {{ text_field(column, status='default') }}
      {% endfor %}
    {% endif %}
  {% endcall %}

  {% if recipients.displayed_rows|list|length < recipients|length %}
    <p class="table-show-more-link">
      Only showing the first {{ recipients.displayed_rows|list|length }} rows
    </p>
  {% endif %}

{% endblock %}