{% extends "base.html" %}
{% block title %}HTTP Monitors — Fabled Scryer{% endblock %}
{% block content %}
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;gap:1rem;flex-wrap:wrap;">
  <h1 class="page-title" style="margin-bottom:0;">HTTP Monitors</h1>
  {% include "_time_range.html" %}
</div>

{# ── Add monitor form ─────────────────────────────────────────────────────── #}
<div class="card" style="margin-bottom:1.25rem;">
  <div class="section-title" style="margin-bottom:0.75rem;">Add Monitor</div>
  <form method="post" action="/plugins/http/add" style="display:grid;gap:0.6rem;">
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.6rem;">
      <div>
        <label style="font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;">Name</label>
        <input type="text" name="name" placeholder="My Service" autocomplete="off"
               style="width:100%;padding:0.4rem 0.65rem;background:var(--bg);border:1px solid var(--border-mid);border-radius:4px;color:var(--text);font-size:0.88rem;">
      </div>
      <div>
        <label style="font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;">URL <span style="color:var(--red);">*</span></label>
        <input type="text" name="url" placeholder="https://example.com" autocomplete="off" required
               style="width:100%;padding:0.4rem 0.65rem;background:var(--bg);border:1px solid var(--border-mid);border-radius:4px;color:var(--text);font-size:0.88rem;">
      </div>
    </div>
    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:0.6rem;align-items:end;">
      <div>
        <label style="font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;">Method</label>
        <select name="method" style="width:100%;padding:0.4rem 0.65rem;background:var(--bg);border:1px solid var(--border-mid);border-radius:4px;color:var(--text);font-size:0.88rem;">
          <option value="GET">GET</option>
          <option value="HEAD">HEAD</option>
          <option value="POST">POST</option>
        </select>
      </div>
      <div>
        <label style="font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;">Expected status</label>
        <input type="number" name="expected_status" value="200" min="100" max="599"
               style="width:100%;padding:0.4rem 0.65rem;background:var(--bg);border:1px solid var(--border-mid);border-radius:4px;color:var(--text);font-size:0.88rem;">
      </div>
      <div>
        <label style="font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;">Timeout (s)</label>
        <input type="number" name="timeout_seconds" value="10" min="1" max="60"
               style="width:100%;padding:0.4rem 0.65rem;background:var(--bg);border:1px solid var(--border-mid);border-radius:4px;color:var(--text);font-size:0.88rem;">
      </div>
      <div>
        <label style="font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;">Interval (s, 0=global)</label>
        <input type="number" name="check_interval_seconds" value="0" min="0"
               style="width:100%;padding:0.4rem 0.65rem;background:var(--bg);border:1px solid var(--border-mid);border-radius:4px;color:var(--text);font-size:0.88rem;">
      </div>
      <div>
        <label style="font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;">Content match (substring)</label>
        <input type="text" name="content_match" placeholder="optional"
               style="width:100%;padding:0.4rem 0.65rem;background:var(--bg);border:1px solid var(--border-mid);border-radius:4px;color:var(--text);font-size:0.88rem;">
      </div>
      <div style="display:flex;flex-direction:column;gap:0.3rem;padding-top:0.8rem;">
        <label style="display:flex;align-items:center;gap:0.4rem;font-size:0.82rem;cursor:pointer;">
          <input type="checkbox" name="follow_redirects" checked> Follow redirects
        </label>
        <label style="display:flex;align-items:center;gap:0.4rem;font-size:0.82rem;cursor:pointer;">
          <input type="checkbox" name="verify_ssl" checked> Verify SSL
        </label>
      </div>
    </div>
    <div>
      <button type="submit" class="btn btn-sm">Add Monitor</button>
    </div>
  </form>
</div>

{# ── Monitor list ─────────────────────────────────────────────────────────── #}
<div id="http-rows"
     hx-get="/plugins/http/rows"
     hx-trigger="load, every {{ poll_interval }}s, rangeChange from:body"
     hx-include="#time-range"
     hx-swap="innerHTML">
  <div style="color:var(--text-muted);font-size:0.9rem;padding:2rem;">Loading...</div>
</div>
{% endblock %}