{% extends "withnav_template.html" %}
{% from "components/banner.html" import banner_wrapper %}
{% from "components/table.html" import list_table, field, text_field, hidden_field_heading %}
{% from "components/page-header.html" import page_header %}
{% from "components/components/button/macro.njk" import usaButton %}
{% from "components/components/skip-link/macro.njk" import usaSkipLink %}
{% from "components/components/back-link/macro.njk" import usaBackLink %}

{% set file_contents_header_id = 'file-preview' %}

{% block service_page_title %}
  {{ "Preview of {}".format(template.name) }}
{% endblock %}


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

{% block maincolumn_content %}

  {{ page_header('Preview') }}
  <div>
    <p class="sms-message-scheduler">Scheduled: {{ scheduled_for |format_datetime_scheduled_notification if scheduled_for else 'Now'}}</p>
    <p class="sms-message-file-name">File: {{original_file_name}}</p>
    <p class="sms-message-template">Template: {{template.name}}</p>
    <p class="sms-message-sender" >From: {{ template.sender }}</p>
  </div>

  <h2 id="{{ file_contents_header_id }}">Message</h2>
  <div class="preview-message"> {{ template|string }}</div>
  {% if not request.args.from_test %}
  <h2>Recipients list</h2>
  <div>
    <ul class="usa-icon-list">
      <li class="usa-icon-list__item">
        <img src="{{ url_for('static', filename='img/material-icons/description.svg') }}" alt="Description Icon">
        <div class="usa-icon-list__content">
          <h3>{{ original_file_name }}</h3>
        </div>
      </li>
    </ul>
  </div>
  <div class="usa-table-container--scrollable table-overflow-x-auto" tabindex="0">
    <table class="usa-table usa-table--borderless width-full">
      <caption class="font-body-lg table-heading">
        Note: Only the first 5 rows are displayed here.
      </caption>
      <thead class="table-field-headings-visible">
        <tr>
          {% for header in recipients.column_headers %}
          <th scope="col" class="table-field-heading-first">
            {{ header }}
          </th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for item in recipients.displayed_rows %}
          {% if loop.index <= 5 %}
            <tr class="table-row">
              {% for column in recipients.column_headers %}
                <td class="table-field-left-aligned">
                  <div>
                    {% set column_data = item[column].data or '' %}
                    {% if column_data is iterable and column_data is not string %}
                      <ul>
                        {% for data_item in column_data %}
                          {% if data_item is not none %}
                            <li>{{ data_item }}</li>
                          {% endif %}
                        {% endfor %}
                      </ul>
                    {% else %}
                      {{ column_data }}
                    {% endif %}
                  </div>
                </td>
              {% endfor %}
              {% if item[None].data %}
                {% for column in item[None].data %}
                  <td class="table-field-left-aligned">
                    <div class="">
                      {{ column }}
                    </div>
                  </td>
                {% endfor %}
              {% endif %}
            </tr>
          {% endif %}
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}
  <!-- <div class="bottom-gutter-3-2">
    <p>This is a placeholder: This message will be delivered to <b>400 phone numbers</b> and will use a total of <b>800 message parts</b>, leaving Washington DSHS with <b>249,200 message parts remaining</b>.</p>
  </div> -->
  <form method="post" enctype="multipart/form-data" action="{{url_for('main.start_job', service_id=current_service.id, upload_id=upload_id)}}" class='page-footer'>
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
    <h3>Does everything look good?</h3>
    {% set button_text %}
      {{ "Schedule" if scheduled_for else 'Send'}}
    {% endset %}
    {{ usaButton({ "text": button_text }) }}
  </form>
{% endblock %}