{# http/rows.html — HTMX fragment for HTTP monitor status list #}

{# ── Summary ─────────────────────────────────────────────────────────────── #}
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:0.75rem;margin-bottom:1.25rem;">
  <div class="card" style="margin-bottom:0;">
    <div class="section-title" style="margin-bottom:0.3rem;">Up</div>
    <span class="stat-val" style="color:var(--green);">{{ up }}</span>
  </div>
  <div class="card" style="margin-bottom:0;">
    <div class="section-title" style="margin-bottom:0.3rem;">Down</div>
    <span class="stat-val" style="color:{% if down %}var(--red){% else %}var(--text-muted){% endif %};">{{ down }}</span>
  </div>
  <div class="card" style="margin-bottom:0;">
    <div class="section-title" style="margin-bottom:0.3rem;">Monitors</div>
    <span class="stat-val">{{ monitor_data | length }}</span>
  </div>
</div>

{# ── Monitor list ─────────────────────────────────────────────────────────── #}
{% if monitor_data %}
<div class="card-flush">
  <table class="table">
    <thead>
      <tr>
        <th>Monitor</th>
        <th>Status</th>
        <th>Response</th>
        <th style="min-width:90px;">History</th>
        <th>TLS expiry</th>
        <th style="width:1%;"></th>
      </tr>
    </thead>
    <tbody>
      {% for item in monitor_data %}
      {% set m = item.monitor %}
      {% set latest = item.latest %}
      <tr>
        <td>
          <div style="font-weight:500;font-size:0.9rem;">{{ m.name }}</div>
          <div style="font-size:0.75rem;color:var(--text-muted);font-family:ui-monospace,monospace;word-break:break-all;">
            <span style="color:var(--text-dim);">{{ m.method }}</span> {{ m.url }}
          </div>
          {% if not m.enabled %}
          <span style="font-size:0.72rem;color:var(--text-dim);">paused</span>
          {% endif %}
        </td>
        <td>
          {% if not latest %}
          <span style="color:var(--text-dim);font-size:0.82rem;">pending</span>
          {% elif latest.is_up %}
          <div style="display:flex;align-items:center;gap:0.4rem;">
            <span class="dot dot-up"></span>
            <span style="font-size:0.82rem;color:var(--green);">{{ latest.status_code }}</span>
          </div>
          {% else %}
          <div style="display:flex;align-items:center;gap:0.4rem;">
            <span class="dot dot-down"></span>
            <span style="font-size:0.82rem;color:var(--red);">
              {{ latest.status_code or latest.error_msg or "error" }}
            </span>
          </div>
          {% if latest.content_matched == false %}
          <div style="font-size:0.72rem;color:var(--orange);">content mismatch</div>
          {% endif %}
          {% endif %}
        </td>
        <td style="font-family:ui-monospace,monospace;font-size:0.88rem;">
          {% if latest and latest.response_ms is not none %}
          <span style="color:{% if latest.response_ms > 2000 %}var(--red){% elif latest.response_ms > 500 %}var(--orange){% else %}var(--text){% endif %};">
            {{ "%.0f" | format(latest.response_ms) }}ms
          </span>
          {% else %}
          <span style="color:var(--text-dim);">—</span>
          {% endif %}
        </td>
        <td>{{ item.sparkline_ms | safe }}</td>
        <td style="font-size:0.82rem;">
          {% if item.tls_days is not none %}
          <span style="color:{% if item.tls_days < 14 %}var(--red){% elif item.tls_days < 30 %}var(--orange){% else %}var(--text-muted){% endif %};">
            {{ item.tls_days | int }}d
          </span>
          {% elif m.url.startswith('https://') %}
          <span style="color:var(--text-dim);">—</span>
          {% endif %}
        </td>
        <td style="white-space:nowrap;">
          <form method="post" action="/plugins/http/{{ m.id }}/toggle" style="display:inline;margin:0;">
            <button type="submit" class="btn btn-ghost btn-sm" style="font-size:0.72rem;">
              {% if m.enabled %}Pause{% else %}Resume{% endif %}
            </button>
          </form>
          <form method="post" action="/plugins/http/{{ m.id }}/delete"
                style="display:inline;margin:0;"
                onsubmit="return confirm('Delete {{ m.name }}?')">
            <button type="submit" class="btn btn-danger btn-sm" style="font-size:0.72rem;">Del</button>
          </form>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<div class="card" style="text-align:center;padding:3rem;">
  <div style="color:var(--text-muted);font-size:0.9rem;">
    No monitors configured yet. Add one using the form above.
  </div>
</div>
{% endif %}