{% extends "withnav_template.html" %}
{% from "components/banner.html" import banner_wrapper %}
{% from "components/radios.html" import radio_select %}
{% from "components/table.html" import mapping_table, row, field, text_field, index_field, hidden_field_heading %}
{% from "components/file-upload.html" import file_upload %}
{% from "components/components/back-link/macro.njk" import usaBackLink %}

{% block service_page_title %}
  Error
{% endblock %}

{% block backLink %}
  {{ usaBackLink({ "href": back_link }) }}
{% endblock %}

{% block maincolumn_content %}

  <div class="">
    {% call banner_wrapper(type='dangerous') %}
      {% if row_errors|length == 1 %}
        <div class="usa-alert usa-alert--error" role="alert">
          <div class="usa-alert__body">
            <h1 class="usa-alert__heading">There’s a problem with {{ original_file_name }}</h1>
            <p class="usa-alert__text">
            You need to {{ row_errors[0] }}.
            </p>
          </div>
        </div>
      {% else %}
        <div class="usa-alert usa-alert--error" role="alert">
          <div class="usa-alert__body">
            <h1 class="usa-alert__heading">There’s a problem with {{ original_file_name }}</h1>
            <p class="usa-alert__text">
              You need to:
              <ul class="list-bullet">
                {% for error in row_errors %}
                <li>{{ error }}</li>
                {% endfor %}
              </ul>
            </p>
          </div>
        </div>
      {% endif %}
    {% endcall %}
  </div>

  <div class="js-stick-at-top-when-scrolling">
    <div class="form-group">
      {{ file_upload(
        form.file,
        allowed_file_extensions=allowed_file_extensions,
        action=url_for('.send_messages', service_id=current_service.id, template_id=template.id),
        button_text='Upload your file again'
      ) }}
    </div>
  </div>

  <div class="fullscreen-content" data-module="fullscreen-table">
    {% call(item, row_number) mapping_table(
      caption="Errors in " + original_file_name,
      caption_visible=False,
      field_headings=[
        '<span class="usa-sr-only">Row in file</span><span aria-hidden="true" class="table-field-invisible-error">1</span>'|safe
      ] + recipients.column_headers
    ) %}
      {% for item in recipients.displayed_rows %}
        {% if item.has_error_spanning_multiple_cells %}
          {% call row() %}
            {% call index_field(rowspan=2) %}
              <span class="table-field-error">
                {{ item.index + 2 }}
              </span>
            {% endcall %}
            {% call field(colspan=recipients.column_headers|length) %}
              <span class="table-field-error-label">
                {% if item.message_empty %}
                  No content for this message
                {% elif item.message_too_long %}
                  Message is too long
                {% endif %}
              </span>
            {% endcall %}
          {% endcall %}
        {% endif %}
        {% call row(item.id) %}
          {% if not item.has_error_spanning_multiple_cells %}
            {% call index_field() %}
              <span class="{% if item.has_errors %}table-field-error{% endif %}">
                {{ item.index + 2 }}
              </span>
            {% endcall %}
          {% endif %}
          {% for column in recipients.column_headers %}
            {% if item[column].error and not recipients.missing_column_headers %}
              {% call field() %}
                <span>
                  <span class="table-field-error-label">{{ item[column].error }}</span>
                  {{ item[column].data if item[column].data != None }}
                </span>
              {% endcall %}
            {% elif 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 %}
      {% endfor %}
    {% endcall %}
  </div>
  {% if count_of_displayed_recipients < count_of_recipients %}
    <p class="table-show-more-link">
      {% if row_errors and not recipients.missing_column_headers %}
        Only showing the first {{ count_of_displayed_recipients }} rows with errors
      {% else %}
        Only showing the first {{ count_of_displayed_recipients }} rows
      {% endif %}
    </p>
  {% elif row_errors and not recipients.missing_column_headers %}
    <p class="table-show-more-link">
      Only showing rows with errors
    </p>
  {% endif %}

{% endblock %}