{% extends "withnav_template.html" %}

{% block service_page_title %}
  All activity
{% endblock %}

{% set show_pagination %}
  {% if prev_page or next_page %}
  <nav aria-label="Pagination" class="usa-pagination">
    <ul class="usa-pagination__list">
      {% if prev_page %}
      <li class="usa-pagination__item usa-pagination__arrow">
        <a
          href="{{prev_page['url']}}"
          class="usa-pagination__link usa-pagination__previous-page"
          aria-label="Previous page"
          >
          <img src="{{ asset_url('img/usa-icons/navigate_before.svg') }}" alt="arrow">
          <span class="usa-pagination__link-text">Previous</span></a
        >
      </li>
      {% endif %}
      {% if pagination %}
        {% for page in pagination.pages %}
          {% if page == pagination.current %}
          <li class="usa-pagination__item usa-pagination__page-no">
            <span class="usa-pagination__button usa-current" aria-label="Page {{ page }}" aria-current="true">
              {{ page }}
            </span>
          </li>
          {% else %}
            <li class="usa-pagination__item">
              <a class="usa-pagination__button" href="?page={{ page }}{% if request.args.get('filter') %}&filter={{ request.args.get('filter') }}{% endif %}">
                {{ page }}
              </a>
            </li>
          {% endif %}
        {% endfor %}
      {% endif %}
      {% if next_page %}
      <li class="usa-pagination__item usa-pagination__arrow">
        <a
          href="{{ next_page['url'] }}"
          class="usa-pagination__link usa-pagination__next-page"
          aria-label="Next page"
        >
          <span class="usa-pagination__link-text">Next </span>
          <img src="{{ asset_url('img/usa-icons/navigate_next.svg') }}" alt="arrow">
        </a>
      </li>
      {% endif %}
    </ul>
  </nav>
  {% if pagination and total_jobs %}
  <p class="text-center font-body-sm">
    Page <span class="text-bold">{{ pagination.current }}</span> of <span class="text-bold">{{ pagination.last }}</span> (<span>{{ total_jobs }}</span> total jobs)
  </p>
  {% endif %}
  {% endif %}
{% endset %}
{% block maincolumn_content %}
  <div class="margin-bottom-8">
    <h1 class="usa-sr-only">All activity</h1>
    <h2 class="font-body-2xl line-height-sans-2 margin-0">All activity</h2>
    <h2 class="margin-top-4 margin-bottom-1">Sent jobs</h2>
    <div class="flex-wrap gap-3 display-flex flex-align-start margin-top-2">
      <div class="flex-1">
        <ul class="usa-button-group usa-button-group--segmented">
          <li class="usa-button-group__item">
            <a href="{{ url_for('main.all_jobs_activity', service_id=current_service.id) }}"
               class="usa-button usa-button--small {% if not request.args.get('filter') %}{% else %}usa-button--outline{% endif %}">
              All
            </a>
          </li>
          <li class="usa-button-group__item">
            <a href="{{ url_for('main.all_jobs_activity', service_id=current_service.id, filter='24hours') }}"
               class="usa-button usa-button--small {% if request.args.get('filter') == '24hours' %}{% else %}usa-button--outline{% endif %}">
              Last 24 hours
            </a>
          </li>
          <li class="usa-button-group__item">
            <a href="{{ url_for('main.all_jobs_activity', service_id=current_service.id, filter='3days') }}"
               class="usa-button usa-button--small {% if request.args.get('filter') == '3days' %}{% else %}usa-button--outline{% endif %}">
              Last 3 days
            </a>
          </li>
          <li class="usa-button-group__item">
            <a href="{{ url_for('main.all_jobs_activity', service_id=current_service.id, filter='7days') }}"
               class="usa-button usa-button--small {% if request.args.get('filter') == '7days' %}{% else %}usa-button--outline{% endif %}">
              Last 7 days
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="usa-table-container--scrollable-mobile table-overflow-x-auto">
      <table class="usa-table usa-table--compact job-table">
        <caption class="usa-sr-only">Table showing all sent jobs for this service</caption>
        <thead class="table-field-headings">
          <tr>
            <th scope="col" role="columnheader" class="table-field-heading-first" id="jobId">
              <span>Job ID#</span>
            </th>
            <th scope="col" role="columnheader" class="table-field-heading">
              <span>Template</span>
            </th>
            <th scope="col" role="columnheader" class="table-field-heading">
              <span>Started</span>
            </th>
            <th scope="col" role="columnheader" class="table-field-heading">
              <span>Sender</span>
            </th>
            <th scope="col" role="columnheader" class="table-field-heading">
              <span>Report</span>
            </th>
            <th scope="col" role="columnheader" class="table-field-heading">
              <span>Status</span>
            </th>
          </tr>
        </thead>
        <tbody>
          {% if all_jobs_dict %}
            {% for job in all_jobs_dict %}
              <tr class="table-row">
                <td class="table-field width-5" role="rowheader">
                  <a class="usa-link" href="{{ job.view_job_link }}">
                    {{ job.job_id[:8] if job.job_id else 'Manually entered number' }}
                  </a>
                </td>
                <td class="table-field width-16">{{ job.template_name }}</td>
                <td data-sort-value="{{ job.activity_time | convert_time_unixtimestamp }}" class="table-field width-18">
                  {{ job.activity_time|format_datetime_table }}
                </td>
                <td class="table-field width-30 ">{{ job.created_by.name }}</td>
                <td class="text-center table-field width-2">
                  {% if job.can_download %}
                    <a href="{{ job.download_link }}">
                      <img src="{{ url_for('static', filename='img/material-icons/file_download.svg') }}" alt="" class="padding-top-05">
                      <span class="usa-sr-only">Download report link</span>
                    </a>
                  {% else %}
                    <span>N/A</span>
                  {% endif %}
                </td>
                <td class="table-field width-15">
                  <span class="bg-base-lighter padding-x-05 padding-y-0 font-body-3xs text-bold radius-sm margin-right-05 display-inline-block text-nowrap">
                    {{ job.delivered_count if job.delivered_count is not none else '0' }} delivered
                  </span>
                  <span class="bg-base-lighter padding-x-05 padding-y-0 font-body-3xs text-bold radius-sm display-inline-block text-nowrap">
                    {{ job.failed_count if job.failed_count is not none else '0' }} failed
                  </span>
                </td>
              </tr>
            {% endfor %}
          {% else %}
            <tr class="table-row">
              <td class="table-empty-message" colspan="10">No messages found</td>
            </tr>
          {% endif %}
        </tbody>
      </table>
      <div class="usa-sr-only usa-table__announcement-region" aria-live="polite"></div>
      <p class="font-body-sm"><b>Note: </b>Report data is only available for 7 days after your message has been sent</p>
    </div>
    {{show_pagination}}
    {% if current_user.has_permissions(ServicePermission.VIEW_ACTIVITY) %}
      <div class="usa-summary-box margin-top-4" role="region" aria-labelledby="download-reports-heading">
        <div class="usa-summary-box__body">
          <h2 class="usa-summary-box__heading" id="download-reports-heading">Download recent reports</h2>

          <div class="usa-summary-box__text">
            <p class="font-body-xs margin-bottom-3">
              Reports are automatically generated daily at midnight and include data through the previous day.
              Today's activity will appear in tomorrow's report.
            </p>

            <div class="download-reports-container maxw-tablet-lg">
              <div class="margin-bottom-2">
                {% if report_1_day.available %}
                  <a href="{{ download_link_one_day }}"
                     class="usa-button width-full display-flex flex-align-center"
                     download
                     aria-label="Download yesterday's report, CSV format, {{ report_1_day.size }}">
                    <svg class="usa-icon margin-right-2" aria-hidden="true" focusable="false" role="img">
                      <use xlink:href="{{ asset_url('img/sprite.svg') }}#file_download"></use>
                    </svg>
                    <span>Yesterday&nbsp; - {{ report_1_day.size }}</span>
                  </a>
                {% else %}
                  <button class="usa-button width-full"
                          disabled
                          aria-label="Yesterday's report not available - no messages were sent">
                    Yesterday&nbsp; - &nbsp;No messages sent
                  </button>
                {% endif %}
              </div>

              <div class="margin-bottom-2">
                {% if report_3_day.available %}
                  <a href="{{ download_link_three_day }}"
                     class="usa-button width-full display-flex flex-align-center"
                     download
                     aria-label="Download last 3 days report, CSV format, {{ report_3_day.size }}">
                    <svg class="usa-icon margin-right-2" aria-hidden="true" focusable="false" role="img">
                      <use xlink:href="{{ asset_url('img/sprite.svg') }}#file_download"></use>
                    </svg>
                    <span>Last 3 days - {{ report_3_day.size }}</span>
                  </a>
                {% else %}
                  <button class="usa-button width-full"
                          disabled
                          aria-label="Last 3 days report not available - no messages were sent">
                    Last 3 days - No messages sent
                  </button>
                {% endif %}
              </div>

              <div class="margin-bottom-2">
                {% if report_5_day.available %}
                  <a href="{{ download_link_five_day }}"
                     class="usa-button width-full display-flex flex-align-center"
                     download
                     aria-label="Download last 5 days report, CSV format, {{ report_5_day.size }}">
                    <svg class="usa-icon margin-right-2" aria-hidden="true" focusable="false" role="img">
                      <use xlink:href="{{ asset_url('img/sprite.svg') }}#file_download"></use>
                    </svg>
                    <span>Last 5 days - {{ report_5_day.size }}</span>
                  </a>
                {% else %}
                  <button class="usa-button width-full"
                          disabled
                          aria-label="Last 5 days report not available - no messages were sent">
                    Last 5 days - No messages sent
                  </button>
                {% endif %}
              </div>

              <div class="margin-bottom-2">
                {% if report_7_day.available %}
                  <a href="{{ download_link_seven_day }}"
                     class="usa-button width-full display-flex flex-align-center"
                     download
                     aria-label="Download last 7 days report, CSV format, {{ report_7_day.size }}">
                    <svg class="usa-icon margin-right-2" aria-hidden="true" focusable="false" role="img">
                      <use xlink:href="{{ asset_url('img/sprite.svg') }}#file_download"></use>
                    </svg>
                    <span>Last 7 days - {{ report_7_day.size }}</span>
                  </a>
                {% else %}
                  <button class="usa-button width-full"
                          disabled
                          aria-label="Last 7 days report not available - no messages were sent">
                    Last 7 days - No messages sent
                  </button>
                {% endif %}
              </div>
            </div>
          </div>
        </div>
      </div>
    {% endif %}
  </div>
{% endblock %}