{% extends "base.html" %}
{% block title %}Ping Monitor — Fabled Scryer{% endblock %}
{% block content %}
<div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;margin-bottom:1.25rem;">
  <div style="display:flex;align-items:baseline;gap:1rem;">
    <h1 class="page-title" style="margin-bottom:0;">Ping Monitor</h1>
    <span style="color:var(--text-muted);font-size:0.85rem;">polling every {{ poll_interval }}s</span>
  </div>
  {% include "_time_range.html" %}
</div>

{# ── Threshold settings ─────────────────────────────────────────────────── #}
<div class="card" style="margin-bottom:1.25rem;">
  <h2 class="section-title" style="margin-bottom:1rem;">Latency Thresholds</h2>
  <form method="post" action="/ping/settings"
        style="display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;">
    <div class="form-group" style="margin:0;">
      <label style="font-size:0.8rem;">
        <span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#1a6632;vertical-align:middle;margin-right:4px;"></span>
        Good below (ms)
      </label>
      <input type="number" name="good_ms" value="{{ good_ms }}" min="1" max="9999" style="width:100px;">
    </div>
    <div class="form-group" style="margin:0;">
      <label style="font-size:0.8rem;">
        <span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#6b5c00;vertical-align:middle;margin-right:4px;"></span>
        Warn above (ms)
      </label>
      <input type="number" name="warn_ms" value="{{ warn_ms }}" min="1" max="9999" style="width:100px;">
    </div>
    <button type="submit" class="btn" style="padding:0.4rem 1rem;">Save</button>
    <span style="color:#505070;font-size:0.8rem;align-self:center;">
      Above warn = <span style="color:#c06020;">■</span> orange&nbsp;&nbsp;|&nbsp;&nbsp;No response = <span style="color:#c03030;">■</span> red
    </span>
  </form>
</div>

{# ── Live host rows ─────────────────────────────────────────────────────── #}
<div class="card ping-card">
  <div id="ping-rows"
       hx-get="/ping/rows"
       hx-trigger="load, every {{ poll_interval }}s, rangeChange from:body"
       hx-include="#time-range"
       hx-swap="innerHTML">
  </div>
</div>
{% endblock %}