{% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading, notification_status_field %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/form.html" import form_wrapper %}

<div class="ajax-block-container" aria-labelledby='pill-selected-item'>
  {% if job.job_status == 'scheduled' %}

    <p>
      Sending
      <a href="{{ url_for('.view_template_version', service_id=current_service.id, template_id=template.id, version=template_version) }}">{{ template.name }}</a>
      {{ job.scheduled_for|format_datetime_relative }}
    </p>
    <div class="page-footer">
      {% call form_wrapper() %}
        {{ page_footer(
          button_text="Cancel sending",
          destructive=True
        ) }}
      {% endcall %}
    </div>

  {% else %}

    {% if notifications %}
      <div class="dashboard-table bottom-gutter-3-2">
    {% endif %}

      {% if template.template_type == 'letter' %}
        <div class="keyline-block bottom-gutter-1-2">
      {% endif %}
        {% if percentage_complete < 100 %}
          <p class="{% if template.template_type != 'letter' %}bottom-gutter{% endif %} hint">
            Report is {{ "{:.0f}%".format(percentage_complete * 0.99) }} complete…
          </p>
        {% elif notifications %}
          <p class="{% if template.template_type != 'letter' %}bottom-gutter{% endif %}">
            <a href="{{ download_link }}" download class="heading-small">Download this report</a>
            &emsp;
            <span id="time-left">{{ time_left }}</span>
          </p>
        {% endif %}
      {% if template.template_type == 'letter' %}
        </div>
      {% endif %}

      {% call(item, row_number) list_table(
        notifications,
        caption=uploaded_file_name,
        caption_visible=False,
        empty_message="No messages to show",
        field_headings=[
          'Recipient',
          'Status'
        ],
        field_headings_visible=False
      ) %}
        {% call row_heading() %}
          <a class="file-list-filename" href="{{ url_for('.view_notification', service_id=current_service.id, notification_id=item.id) }}">{{ item.to }}</a>
          <p class="file-list-hint">
            {{ item.preview_of_content }}
          </p>
        {% endcall %}
        {{ notification_status_field(item) }}
      {% endcall %}

      {% if more_than_one_page %}
        <p class="table-show-more-link">
          Only showing the first 50 rows
        </p>
      {% endif %}

    {% if notifications %}
      </div>
    {% endif %}

  {% endif %}
</div>