{% extends "base.html" %}
{% block title %}Uptime / SLA — Steward{% endblock %}
{% block content %}
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
  <h1 class="page-title" style="margin-bottom:0;">Uptime / SLA</h1>
  <a class="btn btn-ghost" href="/hosts/">← Hosts</a>
</div>

{# ── Summary pills ──────────────────────────────────────────────────────────── #}
{% set total = hosts | length %}
{% if total %}
{% set healthy = namespace(count=0) %}
{% for h in hosts %}
  {% set pct = uptime.get(h.id, {}).get("30d") %}
  {% if pct is not none and pct >= 99 %}{% set healthy.count = healthy.count + 1 %}{% endif %}
{% endfor %}

<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:0.75rem;margin-bottom:1.5rem;">
  <div class="card" style="margin-bottom:0;">
    <div class="section-title" style="margin-bottom:0.3rem;">Hosts monitored</div>
    <span class="stat-val">{{ total }}</span>
  </div>
  <div class="card" style="margin-bottom:0;">
    <div class="section-title" style="margin-bottom:0.3rem;">≥ 99% (30d)</div>
    <span class="stat-val" style="color:{% if healthy.count == total %}var(--green){% else %}var(--orange){% endif %};">
      {{ healthy.count }}
    </span>
  </div>
</div>
{% endif %}

{# ── SLA table ──────────────────────────────────────────────────────────────── #}
{% if hosts %}
<div class="card-flush">
  <table class="table">
    <thead>
      <tr>
        <th>Host</th>
        <th>Address</th>
        <th style="text-align:center;min-width:80px;" title="Uptime last 24 hours">24 h</th>
        <th style="text-align:center;min-width:80px;" title="Uptime last 7 days">7 d</th>
        <th style="text-align:center;min-width:80px;" title="Uptime last 30 days">30 d</th>
        <th style="min-width:160px;">30-day bar</th>
      </tr>
    </thead>
    <tbody>
      {% for host in hosts %}
      {% set ut = uptime.get(host.id, {}) %}
      <tr>
        <td style="font-weight:500;"><a href="/hosts/{{ host.id }}" style="color:inherit;">{{ host.name }}</a></td>
        <td style="color:var(--text-muted);font-size:0.85rem;">{{ host.address }}</td>

        {% for window in ["24h", "7d", "30d"] %}
        {% set pct = ut.get(window) %}
        <td style="text-align:center;font-size:0.88rem;font-family:ui-monospace,monospace;">
          {% if pct is none %}
            <span style="color:var(--text-muted);" title="No data yet">—</span>
          {% elif pct >= 99.9 %}
            <span style="color:var(--green);">{{ "%.2f"|format(pct) }}%</span>
          {% elif pct >= 99 %}
            <span style="color:var(--yellow);">{{ "%.2f"|format(pct) }}%</span>
          {% elif pct >= 95 %}
            <span style="color:var(--orange);">{{ "%.2f"|format(pct) }}%</span>
          {% else %}
            <span style="color:var(--red);">{{ "%.2f"|format(pct) }}%</span>
          {% endif %}
        </td>
        {% endfor %}

        {# 30-day visual bar #}
        {% set pct30 = ut.get("30d") %}
        <td>
          {% if pct30 is none %}
            <span style="color:var(--text-muted);font-size:0.8rem;">no data</span>
          {% else %}
          <div style="display:flex;align-items:center;gap:0.5rem;">
            <div style="flex:1;height:8px;background:var(--bg-elevated);border-radius:4px;overflow:hidden;border:1px solid var(--border);">
              <div style="height:100%;width:{{ pct30 | round(1) }}%;background:{% if pct30 >= 99.9 %}var(--green){% elif pct30 >= 99 %}var(--yellow){% elif pct30 >= 95 %}var(--orange){% else %}var(--red){% endif %};border-radius:4px;transition:width 0.3s;"></div>
            </div>
          </div>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<div class="card" style="text-align:center;padding:3rem;">
  <p style="color:var(--text-muted);">No hosts under watch. <a href="/hosts/new">Summon one to the table.</a></p>
</div>
{% endif %}

<p style="color:var(--text-dim);font-size:0.78rem;margin-top:1rem;">
  Uptime aggregates every monitor attached to a host. Hosts with no monitors show —.
</p>
{% endblock %}