{% 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 %}
{% from 'components/ajax-block.html' import socket_block %}
{% block service_page_title %}
  {{ "Message status" }}
{% endblock %}

{% block maincolumn_content %}
{{ socket_block(partials, job_id, "status") }}
<div id="status" data-key="status" data-job-id="{{ job.id }}">
  ⏳ Waiting for updates...
</div>
<!-- <div data-key="status">
  {{ partials["status"]|safe }}
</div> -->
<!-- {{emit_job_update}}
{{job.id}} -->

    {{ page_header("Message status") }}
    {% if not job.finished_processing %}
      <div
        data-module="update-content"
        data-resource="{{ updates_url }}"
        data-key="status"
        data-form=""
      >
    {% endif %}
      {{ partials['status']|safe }}
    {% if not job.finished_processing  %}
      </div>
    {% endif %}
    {% if not finished %}
      <div
        data-module="update-content"
        data-resource="{{ updates_url }}"
        data-key="counts"
        data-form=""
      >
    {% endif %}
      {{ partials['counts']|safe }}
    {% if not finished %}
      </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 %}
      <div
        data-module="update-content"
        data-resource="{{ updates_url }}"
        data-key="notifications"
        data-form=""
      >
    {% endif %}
      {{ partials['notifications']|safe }}
    {% if not job.processing_finished %}
      </div>
    {% endif %}

    <div> </div>

{% endblock %}