{% 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 %}

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

    <p>
      Sending will start {{ job.scheduled_for|format_datetime_relative }}
    </p>
    <div class="page-footer">
      <form method="post">
        {{ page_footer(
          button_text="Cancel sending",
          destructive=True
        ) }}
      </form>
    </div>

  {% else %}

    {% if notifications %}
      <div class="dashboard-table">
    {% endif %}

      {% if not help %}
        {% if percentage_complete < 100 %}
          <p class="bottom-gutter-1-2 hint">
            Report is {{ "{:.0f}%".format(percentage_complete) }} complete…
          </p>
        {% elif notifications %}
          <p class="bottom-gutter">
            <a href="{{ download_link }}" download="download" class="heading-small">Download this report</a>
            &emsp;
            <span id="time-left">{{ time_left }}</span>
          </p>
        {% endif %}
      {% 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() %}
          <p>{{ item.to }}</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>