{% extends "base.html" %}
{% from "monitors/_fields.html" import type_fields, toggle_script %}
{% block title %}Monitors — Steward{% endblock %}
{% block content %}
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;gap:1rem;flex-wrap:wrap;">
  <div style="display:flex;align-items:baseline;gap:1rem;">
    <h1 class="page-title" style="margin-bottom:0;">Monitors</h1>
    <span style="color:var(--text-muted);font-size:0.85rem;">polling every {{ poll_interval }}s</span>
  </div>
  {% include "_time_range.html" %}
</div>

{% set inp = "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;" %}
{% set lbl = "font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;" %}

{# ── Add monitor ──────────────────────────────────────────────────────────── #}
<div class="card" style="margin-bottom:1.25rem;">
  <div class="section-title" style="margin-bottom:0.75rem;">Add Monitor</div>
  <form method="post" action="/monitors/add" style="display:grid;gap:0.6rem;">
    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:0.6rem;align-items:end;">
      <div>
        <label style="{{ lbl }}">Type</label>
        <select name="type" id="mtype" onchange="mtoggle(this.value)" style="{{ inp }}">
          {% for t in types %}
          <option value="{{ t.value }}" {% if t.value == 'icmp' %}selected{% endif %}>{{ t.value | upper }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label style="{{ lbl }}">Name</label>
        <input type="text" name="name" placeholder="optional" autocomplete="off" style="{{ inp }}">
      </div>
      <div>
        <label style="{{ lbl }}">Target <span style="color:var(--red);">*</span></label>
        <input type="text" name="target" placeholder="host, IP, or URL" autocomplete="off" required style="{{ inp }}">
      </div>
      <div>
        <label style="{{ lbl }}">Interval (s, 0=global)</label>
        <input type="number" name="check_interval_seconds" value="0" min="0" style="{{ inp }}">
      </div>
      {{ type_fields() }}
    </div>
    <div><button type="submit" class="btn btn-sm">Add Monitor</button></div>
  </form>
</div>

{# ── Live monitor rows ────────────────────────────────────────────────────── #}
<div class="card ping-card">
  <div id="monitor-rows"
       hx-get="/monitors/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>
</div>

{{ toggle_script() }}
<script>mtoggle(document.getElementById('mtype').value);</script>
{% endblock %}