{% 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 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"> {{ simplifed_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" tabindex="0">
    {% call(item, row_number) list_table(
      recipients.displayed_rows,
      caption="Note: Only the first 5 rows are displayed here.",
      caption_visible=True,
      field_headings=recipients.column_headers
    ) %}
      {% 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 %}
  </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 %}