{% load i18n prometric_extras %}
{% comment %}Cloudflare's section of the route-detail page.
Context: provider, route, period, metrics (RouteMetrics), chart.{% endcomment %}
{% if metrics.requests %}
  <div class="pm-grid">
    <section class="pm-card">
      <div class="pm-stats">
        <div class="pm-stat">
          <div class="pm-stat__label">{% translate "Requests" %}</div>
          <div class="pm-num">{{ metrics.requests|num }}</div>
        </div>
        <div class="pm-stat">
          <div class="pm-stat__label">{% translate "Visits" %}</div>
          <div class="pm-num">{{ metrics.visits|num }}</div>
        </div>
        <div class="pm-stat">
          <div class="pm-stat__label">{% translate "Bandwidth" %}</div>
          <div class="pm-num">{{ metrics.bandwidth_bytes|size }}</div>
        </div>
        <div class="pm-stat">
          <div class="pm-stat__label">{% translate "Errors" %}</div>
          <div class="pm-num">{{ metrics.errors|num }}</div>
          <div class="pm-stat__sub">{{ metrics.error_ratio|pct }}</div>
        </div>
        <div class="pm-stat">
          <div class="pm-stat__label">{% translate "Last seen" %}</div>
          {% if metrics.last_seen %}
            <div class="pm-num">{{ metrics.last_seen|date:"H:i" }}</div>
            <div class="pm-stat__sub">{{ metrics.last_seen|date:"M j" }}</div>
          {% else %}
            <div class="pm-num">—</div>
          {% endif %}
        </div>
      </div>
    </section>

    {% if chart.labels %}
      <section class="pm-card">
        <header class="pm-card__head"><h2>{% translate "Traffic" %}</h2></header>
        {{ chart|json_script:"pm-route-chart" }}
        <div class="pm-chart pm-chart--small">
          <canvas data-source="pm-route-chart" role="img" aria-label="{% translate 'Requests over time' %}"></canvas>
        </div>
      </section>
    {% endif %}

    {% if metrics.performance %}
      <section class="pm-card">
        <header class="pm-card__head"><h2>{% translate "Edge performance" %}</h2></header>
        <div class="pm-stats">
          <div class="pm-stat">
            <div class="pm-stat__label">{% translate "TTFB p50" %}</div>
            <div class="pm-num">{{ metrics.performance.p50_ms|ms }}</div>
          </div>
          <div class="pm-stat">
            <div class="pm-stat__label">{% translate "TTFB p95" %}</div>
            <div class="pm-num">{{ metrics.performance.p95_ms|ms }}</div>
          </div>
          <div class="pm-stat">
            <div class="pm-stat__label">{% translate "TTFB p99" %}</div>
            <div class="pm-num">{{ metrics.performance.p99_ms|ms }}</div>
          </div>
        </div>
      </section>
    {% endif %}

    <section class="pm-card pm-card--half">
      <header class="pm-card__head"><h2>{% translate "Countries" %}</h2></header>
      {% include "django_prometric/components/_bars.html" with items=metrics.countries kind="country" %}
    </section>
    <section class="pm-card pm-card--half">
      <header class="pm-card__head"><h2>{% translate "Status codes" %}</h2></header>
      {% include "django_prometric/components/_bars.html" with items=metrics.statuses kind="status" %}
    </section>
    <section class="pm-card pm-card--half">
      <header class="pm-card__head"><h2>{% translate "Methods" %}</h2></header>
      {% include "django_prometric/components/_bars.html" with items=metrics.methods %}
    </section>
    <section class="pm-card pm-card--half">
      <header class="pm-card__head"><h2>{% translate "Cache" %}</h2></header>
      {% include "django_prometric/components/_bars.html" with items=metrics.cache %}
    </section>
  </div>
{% else %}
  <div class="pm-empty pm-card">
    <p>{% translate "Cloudflare recorded no requests for this route in the selected period." %}</p>
    <p class="pm-note">
      {% translate "If the whole site has traffic but routes stay empty, this app is probably served on a hostname the zone does not proxy — check the HOSTS setting under CLOUDFLARE, and whether the DNS record is proxied (orange cloud)." %}
    </p>
  </div>
{% endif %}