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

{% block service_page_title %}
  {{ "Message status" }}
{% endblock %}

{% block maincolumn_content %}

    {{ page_header("Message status") }}
    {% if not job.finished_processing %}
      <p class="max-width-full">This page no longer refreshes automatically. Use the refresh button below to check the latest message status.</p>
      <form method="get" style="display: inline-block;">
        <button type="submit" class="usa-button usa-button--outline">
          Refresh Status
        </button>
      </form>
      <br><br>
    {% endif %}
    <div data-job-id="{{ job.id }}" data-host="{{ api_public_url }}">
    {% if not job.finished_processing and FEATURE_SOCKET_ENABLED %}
      <div
        data-socket-update="status"
        data-key="status"
        data-form=""
      >
    {% endif %}
      {{ partials['status']|safe }}
    {% if not job.finished_processing and FEATURE_SOCKET_ENABLED %}
      </div>
    {% endif %}
    {% if not finished and FEATURE_SOCKET_ENABLED %}
      <div
        data-socket-update="counts"
        data-key="counts"
        data-form=""
      >
    {% endif %}
      {{ partials['counts']|safe }}
    {% if not finished and FEATURE_SOCKET_ENABLED %}
      </div>
    {% endif %}

    <p class="notification-status max-width-full">
      Messages are sent immediately to the cell phone carrier, but will remain in "pending" status until we hear back from the carrier they have received it and attempted deliver. More information on <a class="usa-link" href="{{ url_for('main.message_status') }}">delivery status</a>.
    </p>
    {% if not job.processing_finished and FEATURE_SOCKET_ENABLED %}
      <div
        data-socket-update="notifications"
        data-key="notifications"
        data-form=""
      >
    {% endif %}
      {{ partials['notifications']|safe }}
    {% if not job.processing_finished and FEATURE_SOCKET_ENABLED %}
      </div>
    {% endif %}
  </div>

{% endblock %}