{% extends "django_prometric/base.html" %}
{% load i18n prometric_extras %}

{% block title %}{% translate "Snapshot" %} #{{ snapshot.pk }}{% endblock %}
{% block page_title %}{% translate "Snapshot" %} #{{ snapshot.pk }}{% endblock %}

{% block page_meta %}
  <span class="pm-page-head__meta">
    {% for slug in snapshot.provider_slugs %}<span class="pm-badge">{{ slug }}</span> {% endfor %}
    {% if snapshot.window_start %}
      {{ snapshot.window_start|date:"M j, Y" }} – {{ snapshot.window_end|date:"M j, Y" }} ·
    {% endif %}
    {% blocktranslate with taken=snapshot.taken_at|date:"M j, Y H:i" %}taken {{ taken }}{% endblocktranslate %}
  </span>
{% endblock %}

{% block page_actions %}
  <form method="post" action="{% url 'django_prometric:snapshot-take' %}">
    {% csrf_token %}
    <input type="hidden" name="retake" value="{{ snapshot.pk }}">
    <button type="submit" class="pm-btn pm-btn--primary">{% translate "Take again now" %}</button>
  </form>
{% endblock %}

{% block content %}
  <div class="pm-filters">
    <span class="pm-badge">mode: {{ snapshot.filters.MODE|default:"all" }}</span>
    {% if snapshot.filters.EXCLUDE_ADMIN %}<span class="pm-badge">{% translate "admin excluded" %}</span>{% endif %}
    {% if snapshot.filters.INCLUDE %}<span class="pm-badge">include: {{ snapshot.filters.INCLUDE|join:", " }}</span>{% endif %}
    {% if snapshot.filters.EXCLUDE %}<span class="pm-badge">exclude: {{ snapshot.filters.EXCLUDE|join:", " }}</span>{% endif %}
  </div>

  {% if filters_changed %}
    <div class="pm-notice">
      {% translate "The route filters changed between the runs of this series, so route-level numbers may not be directly comparable." %}
    </div>
  {% endif %}

  <div class="pm-grid">
    {% include "django_prometric/_comparison.html" with columns=series current=snapshot %}

    {% for slug, report in snapshot.reports.items %}
      {% if report.clamped %}
        <div class="pm-notice">
          {% blocktranslate %}The {{ slug }} window was shortened to this source's maximum reach when the snapshot was taken.{% endblocktranslate %}
        </div>
      {% endif %}

      {% if report.top_routes %}
        <section class="pm-card">
          <header class="pm-card__head"><h2>{% translate "Top routes" %}</h2><span class="pm-badge">{{ slug }}</span></header>
          <div class="pm-table-wrap">
            <table class="pm-table">
              <thead>
                <tr>
                  <th>{% translate "Route" %}</th>
                  <th class="pm-cell-num">{% translate "Requests" %}</th>
                  <th class="pm-cell-num">{% translate "Bandwidth" %}</th>
                </tr>
              </thead>
              <tbody>
                {% for row in report.top_routes %}
                  <tr>
                    <td><span class="pm-route">{{ row.route|route_html }}</span></td>
                    <td class="pm-cell-num">{{ row.requests|num }}</td>
                    <td class="pm-cell-num">{{ row.bandwidth_bytes|size }}</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </section>
      {% endif %}

      {% if report.slowest_routes %}
        <section class="pm-card">
          <header class="pm-card__head"><h2>{% translate "Slowest routes" %}</h2><span class="pm-badge">{{ slug }}</span></header>
          <div class="pm-table-wrap">
            <table class="pm-table">
              <thead>
                <tr>
                  <th>{% translate "Transaction" %}</th>
                  <th class="pm-cell-num">{% translate "Requests" %}</th>
                  <th class="pm-cell-num">p50</th>
                  <th class="pm-cell-num">p95</th>
                  <th class="pm-cell-num">p99</th>
                  <th class="pm-cell-num">{% translate "Failure rate" %}</th>
                </tr>
              </thead>
              <tbody>
                {% for row in report.slowest_routes %}
                  <tr>
                    <td><span class="pm-route">{{ row.transaction }}</span></td>
                    <td class="pm-cell-num">{{ row.requests|num }}</td>
                    <td class="pm-cell-num">{{ row.p50_ms|ms }}</td>
                    <td class="pm-cell-num">{{ row.p95_ms|ms }}</td>
                    <td class="pm-cell-num">{{ row.p99_ms|ms }}</td>
                    <td class="pm-cell-num">{{ row.failure_rate|pct }}</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </section>
      {% endif %}

      {% if report.countries %}
        <section class="pm-card pm-card--half">
          <header class="pm-card__head"><h2>{% translate "Countries" %}</h2><span class="pm-badge">{{ slug }}</span></header>
          <div class="pm-table-wrap">
            <table class="pm-table">
              <tbody>
                {% for item in report.countries %}
                  <tr>
                    <td>{{ item.label|flag }} {{ item.label }}</td>
                    <td class="pm-cell-num">{{ item.value|num }}</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </section>
      {% endif %}

      {% if report.statuses %}
        <section class="pm-card pm-card--half">
          <header class="pm-card__head"><h2>{% translate "Status codes" %}</h2><span class="pm-badge">{{ slug }}</span></header>
          <div class="pm-table-wrap">
            <table class="pm-table">
              <tbody>
                {% for item in report.statuses %}
                  <tr>
                    <td>{{ item.label }}</td>
                    <td class="pm-cell-num">{{ item.value|num }}</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </section>
      {% endif %}
    {% endfor %}
  </div>
{% endblock %}