{% extends "base.html" %}
{% from "components/big-number.html" import big_number %}
{% from "components/page-header.html" import page_header %}
{% from "components/table.html" import field, list_table %}

{% block per_page_title %}
  Performance data
{% endblock %}

{% block maincolumn_content %}

  <div class="grid-row">
    <div class="grid-col-8">
      {{ page_header('Performance data') }}
    </div>
  </div>

  <h2 class="govuk-heading-m">
    Messages sent since May 2023
  </h2>

  <div class="grid-row">
    <div class="grid-col-6">
      <div class="product-page-big-number">{{ total_notifications|format_billions }}</div>
      total
    </div>
    <div class="grid-col-6">
      <div class="grid-row">
        <div class="grid-col-6">
          {{ big_number(
            email_notifications|format_billions,
            label=email_notifications|message_count_noun('email'),
            smallest=True,
          ) }}
        </div>
        <div class="grid-col-6">
          {{ big_number(
            sms_notifications|format_billions,
            label=sms_notifications|message_count_noun('sms'),
            smallest=True,
          ) }}
        </div>
      </div>
    </div>
  </div>

  <div class="dashboard-table table-overflow-x-auto">
    {% call(item, row_number) list_table(
      notifications_by_type|reverse,
      caption='Messages sent since May 2023',
      caption_visible=False,
      field_headings=[
        'Date',
        99|message_count_noun('email')|capitalize,
        99|message_count_noun('sms')|capitalize,
      ],
      empty_message='No data to show'
    ) %}
      {% call field() %}
        {{ item.date | format_date_normal }}
      {% endcall %}
      {% call field() %}
        {{ item.emails|format_thousands }}
      {% endcall %}
      {% call field() %}
        {{ item.sms|format_thousands }}
      {% endcall %}
    {% endcall %}
    <p class="table-show-more-link">
      Only showing the last {{ notifications_by_type|length }} days
    </p>
  </div>

  <h2 class="govuk-heading-m">
    Messages sent within 10 seconds
  </h2>
  <div class="grid-row">
    <div class="grid-col-6">
      {{ big_number(
        '{:.2f}%'.format(average_percentage_under_10_seconds),
        label='on average',
      ) }}
    </div>
  </div>
  <div class="table-overflow-x-auto">
    <div class="dashboard-table">
      {% call(item, row_number) list_table(
        processing_time | reverse,
        caption='Messages sent within 10 seconds',
        caption_visible=False,
        field_headings=[
          'Date', 'Percentage'
        ],
        empty_message='No data to show'
      ) %}
        {% call field() %}
          {{ item.date | format_date_normal }}
        {% endcall %}
        {% call field() %}
          {{ '{:.2f}%'.format(item.percentage_under_10_seconds) }}
        {% endcall %}
      {% endcall %}
      <p class="table-show-more-link">
        Only showing the last {{ processing_time|length }} days
      </p>
    </div>
  </div>

  <h2 class="govuk-heading-m">
    Organizations using Notify
  </h2>
  <div class="grid-row bottom-gutter">
    <div class="grid-col-6">
      <span class="usa-sr-only">There are</span>
      <div class="product-page-big-number">{{ count_of_live_services_and_organizations.organizations|format_thousands }}</div>
      organizations
    </div>
    <div class="grid-col-6">
      <span class="usa-sr-only">and</span>
      <div class="product-page-big-number">{{ count_of_live_services_and_organizations.services|format_thousands }}</div>
      services
      <span class="usa-sr-only">using Notify.</span>
    </div>
  </div>
  <div class="table-overflow-x-auto">
    <div class="dashboard-table">
      {% call(item, row_number) list_table(
        organizations_using_notify,
        caption='Organizations using Notify',
        caption_visible=False,
        field_headings=[
          'Organization', 'Number of live services'
        ],
        empty_message='No data to show'
      ) %}
        {% call field() %}
          {{ item.organization_name }}
        {% endcall %}
        {% call field() %}
          {{ item.count_of_live_services }}
        {% endcall %}
      {% endcall %}
    </div>
  </div>

{% endblock %}