{% extends "base.html" %}
{% from "monitors/_fields.html" import type_fields, toggle_script %}
{% block title %}Edit Monitor — Steward{% endblock %}
{% block content %}
<div style="margin-bottom:1.25rem;">
  <a href="/monitors/" style="color:var(--text-muted);font-size:0.85rem;">← Monitors</a>
  <h1 class="page-title" style="margin:0.4rem 0 0;">Edit Monitor</h1>
</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;" %}

<div class="card" style="max-width:760px;">
  <form method="post" action="/monitors/{{ monitor.id }}/edit" 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>
        <input type="text" value="{{ monitor.type | upper }}" disabled style="{{ inp }}opacity:0.7;">
      </div>
      <div>
        <label style="{{ lbl }}">Name</label>
        <input type="text" name="name" value="{{ monitor.name }}" autocomplete="off" style="{{ inp }}">
      </div>
      <div>
        <label style="{{ lbl }}">Target <span style="color:var(--red);">*</span></label>
        <input type="text" name="target" value="{{ monitor.target }}" autocomplete="off" required style="{{ inp }}">
      </div>
      <div>
        <label style="{{ lbl }}">Interval (s, 0=global)</label>
        <input type="number" name="check_interval_seconds" value="{{ monitor.check_interval_seconds }}" min="0" style="{{ inp }}">
      </div>
      {{ type_fields(config) }}
    </div>
    {% if monitor.host_id %}
    <p style="font-size:0.78rem;color:var(--text-dim);margin:0;">
      Linked to <a href="/hosts/{{ monitor.host_id }}" style="color:var(--accent);">its host</a>.
    </p>
    {% endif %}
    <div style="display:flex;gap:0.5rem;">
      <button type="submit" class="btn btn-sm">Save</button>
      <a href="/monitors/" class="btn btn-sm" style="background:transparent;border:1px solid var(--border-mid);">Cancel</a>
    </div>
  </form>
</div>

{{ toggle_script() }}
<script>mtoggle({{ monitor.type | tojson }});</script>
{% endblock %}