{% extends "withnav_template.html" %}
{% from "components/banner.html" import banner %}
{% from "components/ajax-block.html" import ajax_block %}
{% from "components/page-header.html" import page_header %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/components/back-link/macro.njk" import usaBackLink %}

{% block service_page_title %}
  {{ 1|message_count_label(template.template_type, suffix='') | capitalize }}
{% endblock %}

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

{% block maincolumn_content %}

    {{ page_header(
      1|message_count_label(template.template_type, suffix='') | capitalize
    ) }}
    {% if help %}
      <p>‘{{ template.name }}’</p>
    {% endif %}
    <div class="usa-alert usa-alert--success">
      <div class="usa-alert__body">
        <h4 class="usa-alert__heading">{{ template.name }} - {{ current_service.name }}</h4>
        <p class="usa-alert__text">
          Was sent on {{ created_at|format_datetime_short_12h }} by {{ created_by.name }}
        </p>
      </div>
    </div>

    {{ template|string }}

    {% if template.template_type == 'email' %}
      <div class="js-stick-at-bottom-when-scrolling">
        {{ ajax_block(partials, updates_url, 'status', finished=finished) }}
      </div>
    {% elif template.template_type == 'sms' %}
      {{ ajax_block(partials, updates_url, 'status', finished=finished) }}
    {% endif %}

    {% if current_user.has_permissions('send_messages') and current_user.has_permissions('view_activity') and template.template_type == 'sms' and can_receive_inbound %}
      <p>
        <a class="usa-link" href="{{ url_for('.conversation', service_id=current_service.id, notification_id=notification_id, _anchor='n{}'.format(notification_id)) }}">See all text messages sent to this phone number</a>
      </p>
    {% endif %}

{% endblock %}