{% extends "views/platform-admin/_base_template.html" %}
{% from "components/status-box.html" import status_box %}
{% from "components/form.html" import form_wrapper %}
{% from "components/components/details/macro.njk" import usaDetails %}
{% from "components/components/button/macro.njk" import usaButton %}

{% block per_page_title %}
  Summary
{% endblock %}

{% block platform_admin_content %}

  <h1 class="font-body-2xl">
    Summary
  </h1>

  {% set details_content %}
    {% call form_wrapper(method="get") %}
      {{ form.start_date(param_extensions={"hint": {"text":"Enter start date in format YYYY-MM-DD"}}) }}
      {{ form.end_date(param_extensions={"hint": {"text":"Enter end date in format YYYY-MM-DD"}}) }}
      </br>
      {{ usaButton({ "text": "Filter", "classes": "margin-y-2" }) }}
    {% endcall %}
  {% endset %}

  {{ usaDetails({
    "summaryText": "Apply filters",
    "html": details_content,
    "open": form.errors | convert_to_boolean
  }) }}

  <div class="grid-row bottom-gutter">
    {% for noti_type in global_stats %}
      <div class="grid-col-6">
        <span class="big-number-dark bottom-gutter-2-3">
          <span class="big-number-number">
            {{ "{:,}".format(noti_type.black_box.number) }}
          </span>
          <span class="big-number-label">
            {{ noti_type.black_box.number|message_count_label(noti_type.black_box.notification_type) }}
          </span>
        </span>

        {% for item in noti_type.other_data %}
          {{ status_box(
              number=item.number,
              label=item.label,
              failing=item.failing,
              percentage=item.percentage,
              url=item.url)
          }}
        {% endfor %}
      </div>
    {% endfor %}
  </div>

  <div class="grid-row bottom-gutter">
    {% for noti_type in global_stats %}
      <div class="grid-col-6">
        <div class="bordered-text-box">
          <span class="big-number-number">{{ "{:,}".format(noti_type.test_data.number) }}</span>
          {{ noti_type.test_data.label }}
        </div>
      </div>
    {% endfor %}
  </div>

{% endblock %}