{% block content %}
<div class="page">
  <header class="page-head">
    <h1 class="display">Status</h1>
    <p class="lede">
      Uptime for the services I host myself, checked every minute from the
      server. This page refreshes itself on the same schedule.
    </p>
  </header>

  <section class="section status-summary" id="overallStatus" role="status" aria-live="polite">
    <div class="status-summary-main">
      <span class="summary-icon loading" aria-hidden="true">&#x25D0;</span>
      <div>
        <h2 class="summary-title">Checking systems</h2>
        <p class="summary-subtitle" id="summary-subtitle">Loading service status</p>
      </div>
    </div>
    <dl class="status-facts">
      <div>
        <dt>Online</dt>
        <dd><span id="onlineCount" aria-label="Online services">--</span> of <span id="totalCount" aria-label="Total services">--</span></dd>
      </div>
      <div>
        <dt>Last checked</dt>
        <dd id="lastUpdate">Loading</dd>
      </div>
      <div>
        <dt>Next check</dt>
        <dd id="nextUpdate">--</dd>
      </div>
    </dl>
    <button id="refreshBtn" class="button" type="button" onclick="refreshStatus()" aria-label="Refresh service status now">Refresh now</button>
  </section>

  <section class="section" aria-labelledby="services-heading">
    <div class="section-head">
      <h2 id="services-heading">Services</h2>
      <p class="section-note">Uptime over 24 hours, 7 days, 30 days, and all time</p>
    </div>
    <div class="table-wrap">
      <table class="status-table">
        <thead>
          <tr>
            <th scope="col">Service</th>
            <th scope="col">State</th>
            <th scope="col" class="num">Response</th>
            <th scope="col" class="num">Code</th>
            <th scope="col" class="num">Checks</th>
            <th scope="col">Uptime</th>
          </tr>
        </thead>
        <tbody>
          {% for service in var.services %}
          <tr id="status-{{ service.id }}">
            <th scope="row"><a href="{{ service.url }}" rel="noopener noreferrer">{{ service.name }}</a></th>
            <td>
              <span class="state-indicator">
                <span class="state-dot loading" aria-hidden="true"></span>
                <span class="state-text">Loading</span>
              </span>
            </td>
            <td class="num" id="time-{{ service.id }}">--</td>
            <td class="num" id="code-{{ service.id }}">--</td>
            <td class="num" id="checks-{{ service.id }}">--</td>
            <td class="uptime" id="uptime-{{ service.id }}">Loading</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <p class="table-note">
      <span class="state-dot online" aria-hidden="true"></span> operational &nbsp;
      <span class="state-dot degraded" aria-hidden="true"></span> degraded or timed out &nbsp;
      <span class="state-dot offline" aria-hidden="true"></span> unreachable
    </p>
  </section>
</div>

<script src="{{ url_for('static', filename='js/status.js') }}"></script>
{% endblock %}