{% 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' role="region">
  {% if job.scheduled %}

    <p class="usa-body">
      Sending
      <a class="usa-link" href="{{ url_for('.view_template_version', service_id=current_service.id, template_id=job.template.id, version=job.template_version) }}">{{ job.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 job.still_processing %}
        <p class="bottom-gutter hint">
          Report is {{ "{:.0f}%".format(job.percentage_complete * 0.99) }} complete…
        </p>
      {% elif notifications %}
        <p class="bottom-gutter">
          <a href="{{ download_link }}" download class="usa-link heading-small">Download this report (<abbr title="Comma separated values">CSV</abbr>)</a>
          &emsp;
          <span id="time-left">{{ time_left }}</span>
        </p>
      {% endif %}
      
      {% call(item, row_number) list_table(
        notifications,
        caption=uploaded_file_name,
        caption_visible=False,
        empty_message='No messages to show yet…' if job.awaiting_processing_or_recently_processed else 'These messages have been deleted because they were sent more than {} days ago'.format(service_data_retention_days),
        field_headings=[
          'Recipient',
          'Status'
        ],
        field_headings_visible=False
      ) %}
        {% call row_heading() %}
          <a class="usa-link file-list-filename" href="{{ url_for('.view_notification', service_id=current_service.id, notification_id=item.id, from_job=job.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>