{% extends "withnav_template.html" %}
{% from "components/banner.html" import banner_wrapper %}
{% from "components/page-header.html" import page_header %}
{% from "components/components/back-link/macro.njk" import usaBackLink %}
{% from "components/components/button/macro.njk" import usaButton %}

{% block service_page_title %}
  {% if error %}
    {{ "Error" }}
  {% elif help %}
    {{ "Example text message" }}
  {% else %}
    {{ "Preview for sending" }}
  {% endif %}
{% endblock %}

{% block backLink %}
  {% if help %}
    {{ usaBackLink(back_link) }}
  {% else %}
    {{ usaBackLink(back_link_from_preview) }}
  {% endif %}
{% endblock %}

{% block maincolumn_content %}
  {% if error == 'not-allowed-to-send-to' %}
    <div class="bottom-gutter">
      {% call banner_wrapper(type='dangerous') %}
        {% with
          count_of_recipients=1,
          template_type_label=(
            'phone number' if template.template_type == 'sms' else 'email address'
          )
        %}
          {% include "partials/check/not-allowed-to-send-to.html" %}
        {% endwith %}
      {% endcall %}
    </div>
  {% elif error == 'too-many-messages' %}
    <div class="bottom-gutter">
      {% call banner_wrapper(type='dangerous') %}
        {% include "partials/check/too-many-messages.html" %}
      {% endcall %}
    </div>
  {% elif error == 'message-too-long' %}
    <div class="bottom-gutter">
      {% call banner_wrapper(type='dangerous') %}
        {% include "partials/check/message-too-long.html" %}
      {% endcall %}
    </div>
  {% else %}
    {{ page_header("Example text message" if help else "Preview for sending") }}
  {% endif %}

  {% if not help %}
    <div>
      <p class="sms-message-scheduler">Scheduled: {{ scheduled_for |format_datetime_scheduled_notification if scheduled_for else 'Now'}}</p>
      <p class="sms-message-template">Template: {{template.name}}</p>
      <p class="sms-message-sender" >From: {{ template.sender }}</p>
      <p class="sms-message-sender" >To: {{ recipient }}</p>
    </div>
  {% endif %}

  {% if not help %}
    <h2 class="message-header">Message</h2>
  {% endif %}


  <div class="preview-message"> {{ template|string }}</div>

  <div class="js-stick-at-bottom-when-scrolling">
    <form method="post" enctype="multipart/form-data" action="{{url_for(
        'main.send_notification',
        service_id=current_service.id,
        template_id=template.id,
        help='3' if help else 0
      )}}" class='page-footer'>
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
      <h3 class="margin-bottom-">Does everything look good?</h3>
      {% if not error %}
        {% set button_text %}
          {{ "Schedule" if scheduled_for else 'Send'}}
        {% endset %}
        {{ usaButton({
          "text": button_text,
          "name": button_text
        }) }}
        {{ usaButton({
          "text": "Cancel",
          "name": "Cancel",
          "classes": "usa-button--secondary",
          "type": "button",
          "attributes": {
            "data-open-modal": "cancelModal"
          }
        }) }}
      {% endif %}
    </form>
  </div>

  <div
  class="usa-modal"
  data-module="usa-modal"
  id="cancelModal"
  aria-hidden="true"
  role="dialog"
  aria-modal="true"
  aria-labelledby="cancelModalHeading"
  aria-describedby="cancelModalDesc"
  >
    <div class="usa-modal__content">
      <div class="usa-modal__main">
        <h2 class="usa-modal__heading font-body-lg" id="cancelModalHeading">Are you sure you want to cancel this message?</h2>
        <p id="cancelModalDesc">Your template is saved, but your message and recipient details will not be. Canceling will bring you back to the template selection page.</p>
        <div class="usa-modal__footer">
          <ul class="usa-button-group">
            <li class="usa-button-group__item">
              <a href="{{ url_for('main.choose_template', service_id=current_service.id) }}" class="usa-button">Yes, cancel
                <span class="usa-sr-only">and return to the template selection page</span></a>
            </li>
            <li class="usa-button-group__item">
              <button class="usa-button usa-button--unstyled padding-105 text-center" data-close-modal type="button">
                No, go back <span class="usa-sr-only">to message send</span>
              </button>
            </li>
          </ul>
        </div>
      </div>
      <button class="usa-button usa-modal__close" aria-label="Close this window" data-close-modal type="button">
        <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
          <use xlink:href="{{ asset_url('img/sprite.svg') }}#close"></use>
        </svg>
      </button>
    </div>
  </div>

{% endblock %}