<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Status Tracker</title>
    <link rel="stylesheet" href="/static/style.css">
  </head>
  <body>
    <main>
      <h1>Status Tracker</h1>
      {% if no_groups %}
      <p class="empty">No services are configured.</p>
      {% endif %}
      {% for group in groups %}
      <section class="service-group">
        <h2>{{ group.name }}</h2>
        {% if group.no_services %}
        <p class="empty">No services in this group.</p>
        {% endif %}
        <ul class="service-list">
          {% for service in group.services %}
          <li class="service-card">
            <div class="service-heading">
              <span class="led led-{{ service.status_class }}"
                    title="{{ service.status_label }}"
                    aria-label="{{ service.status_label }}"></span>
              <span class="service-name">
                {% if service.has_url %}
                  <a href="{{ service.url }}">{{ service.name }}</a>
                {% else %}
                  {{ service.name }}
                {% endif %}
              </span>
            </div>
            <p class="service-desc">
            {% if service.has_description %}
              {{ service.description }}
            {% endif %}
            </p>
            <div class="service-history" role="group"
                 aria-label="Last {{ service.history_hours }} hours of status"
                 title="Oldest hour on the left; current hour on the right">
              {% for hour in service.history %}
              <span class="history-cell led-{{ hour.status_class }}"
                    role="img"
                    title="{{ hour.status_label }}"
                    aria-label="{{ hour.status_label }}"></span>
              {% endfor %}
            </div>
            <div class="latency-history" role="group"
                 aria-label="Latency for last {{ service.history_hours }} hours"
                 title="Hourly latency; oldest hour on the left">
              {% for hour in service.history %}
              {% if hour.has_latency %}
              <span class="latency-cell" role="img"
                    aria-label="Min {{ hour.latency_min }} us, average {{ hour.latency_average }} us, max {{ hour.latency_max }} us"
                    title="Min {{ hour.latency_min }} us, average {{ hour.latency_average }} us, max {{ hour.latency_max }} us"
                    style="--latency-min: {{ hour.latency_min_percent }}%;
                           --latency-max: {{ hour.latency_max_percent }}%;
                           --latency-average:
                           {{ hour.latency_average_percent }}%;">
                <span class="latency-range"></span>
                <span class="latency-average"></span>
              </span>
              {% else %}
              <span class="latency-cell" aria-hidden="true"></span>
              {% endif %}
              {% endfor %}
            </div>
          </li>
          {% endfor %}
        </ul>
      </section>
      {% endfor %}
    </main>
  </body>
</html>