{% from "components/page-footer.html" import page_footer %}
{% from "components/previous-next-navigation.html" import previous_next_navigation %}
{% from "components/table.html" import list_table, field, text_field, link_field, right_aligned_field_heading, hidden_field_heading, row_heading, notification_status_field, notification_carrier_field, notification_carrier_message_field %}

<div class="ajax-block-container" id='pill-selected-item'>
  <!-- Batched Job Table -->
  {% if notifications %}
    <div class='job-table'>
  {% endif %}
    {% call(item, row_number) list_table(
      notifications,
      caption="Batched Jobs",
      caption_visible=False,
      border_visible=True,
      empty_message='No batched job messages found &thinsp;(messages are kept for {} days)'.format(limit_days)|safe,
      field_headings=['Template Name','Date/Time', 'Download (CSV) Report'],
      field_headings_visible=False
    ) %}
      {% if item.job.original_file_name %}
        {% call row_heading() %}
        <a class="usa-link file-list-filename" href="/services/{{ item.service }}/jobs/{{ item.job.id  }}">{{ item.job.original_file_name|replace('.csv', '') if item.job.id else '' }}</a>
        {% endcall %}
        {% call row_heading() %}
        {{ item.status|format_notification_status_as_time(
          item.created_at|format_datetime_short,
          (item.updated_at or item.created_at)|format_datetime_short
        ) }}
        {% endcall %}
       {% call row_heading() %}
        <a class="usa-link file-list-filename" href="/services/{{ item.service }}/jobs/{{ item.job.id }}.csv">{{ "Download" if item.job.original_file_name else '' }}</a>
        <span>- available for {{ limit_days }} days</span>
      {% endcall %}
      {% endif %}
    {% endcall %}
  {% if notifications %}
    </div>
  {% endif %}

  {% if show_pagination %}
    {{ previous_next_navigation(prev_page, next_page) }}
  {% elif next_page %}
    <p class="table-show-more-link">
      Only showing the first 50 messages
    </p>
  {% endif %}

  <!-- Dashboard Table -->
  {% if notifications %}
    <div class='dashboard-table'>
  {% endif %}
    {% call(item, row_number) list_table(
      notifications,
      caption="Recent activity",
      caption_visible=False,
      empty_message='No messages found &thinsp;(messages are kept for {} days)'.format(limit_days)|safe,
      field_headings=['Recipient', 'Status', 'Carrier', 'Carrier Response'],
      field_headings_visible=False
    ) %}
      {% call row_heading() %}
        <a class="usa-link file-list-filename" href="{{ single_notification_url(notification_id=item.id) }}">{{ item.to.splitlines()|join(', ') if item.to else '' }}</a>
        <p class="file-list-hint width-card">
          {{ item.preview_of_content }}
        </p>
      {% endcall %}

      {{ notification_status_field(item) }}
      {{ notification_carrier_field(item) }}
      {{ notification_carrier_message_field(item)}}

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

  {% if show_pagination %}
    {{ previous_next_navigation(prev_page, next_page) }}
  {% elif next_page %}
    <p class="table-show-more-link">
      Only showing the first 50 messages
    </p>
  {% endif %}

</div>