{% extends "base.html" %}
{% from "_macros.html" import crumbs %}
{% block title %}New Maintenance Window — Steward{% endblock %}
{% block breadcrumb %}{{ crumbs([("Alerts", "/alerts/"), ("Maintenance", "/alerts/maintenance"), ("New window", "")]) }}{% endblock %}
{% block content %}
<div style="max-width:560px;margin:2rem auto;">
  <h1 class="page-title">New Maintenance Window</h1>
  <div class="card">
    <form method="post" action="/alerts/maintenance">{{ csrf_field() }}

      <div class="form-group">
        <label>Window Name</label>
        <input type="text" name="name" required autofocus
               placeholder="e.g. Weekly reboot — homelab">
      </div>

      <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
        <div class="form-group">
          <label>Start (UTC)</label>
          <input type="datetime-local" name="start_at" required>
        </div>
        <div class="form-group">
          <label>End (UTC)</label>
          <input type="datetime-local" name="end_at" required>
        </div>
      </div>

      {# ── Scope ─────────────────────────────────────────────────────────────── #}
      <div class="form-group">
        <label>Scope</label>
        <select name="_scope_type" id="scope-type" onchange="updateScope()">
          <option value="all">All alerts</option>
          <option value="source">By source module</option>
          <option value="resource">By source + resource</option>
        </select>
      </div>

      <div id="scope-source-row" style="display:none;" class="form-group">
        <label>Source Module</label>
        <select name="scope_source" id="scope-source">
          <option value="">— select —</option>
          {% for src in source_modules %}
          <option value="{{ src }}">{{ src }}</option>
          {% endfor %}
        </select>
      </div>

      <div id="scope-resource-row" style="display:none;" class="form-group">
        <label>Resource Name</label>
        <input type="text" name="scope_resource" id="scope-resource"
               placeholder="Exact resource name (e.g. my-server)">
        <p class="field-hint">
          Leave blank to mute all resources within the selected source.
        </p>
      </div>

      <div style="display:flex;gap:1rem;margin-top:1.5rem;">
        <button type="submit" class="btn">Create Window</button>
        <a href="/alerts/maintenance" class="btn btn-ghost">Cancel</a>
      </div>
    </form>
  </div>

  <div class="card" style="margin-top:1rem;">
    <div class="section-title" style="margin-bottom:0.5rem;">How scope works</div>
    <div style="display:grid;gap:0.4rem;font-size:0.82rem;color:var(--text-muted);">
      <div><strong style="color:var(--text);">All alerts</strong> — every alert rule's notifications are muted</div>
      <div><strong style="color:var(--text);">By source</strong> — e.g. source=icmp mutes all ping alerts</div>
      <div><strong style="color:var(--text);">By source + resource</strong> — e.g. icmp/my-server mutes only that host's ping alerts</div>
    </div>
  </div>
</div>

<script>
function updateScope() {
  var t = document.getElementById('scope-type').value;
  document.getElementById('scope-source-row').style.display = t === 'all' ? 'none' : '';
  document.getElementById('scope-resource-row').style.display = t === 'resource' ? '' : 'none';
  if (t === 'all') {
    document.getElementById('scope-source').value = '';
    document.getElementById('scope-resource').value = '';
  }
  if (t === 'source') {
    document.getElementById('scope-resource').value = '';
  }
}
</script>
{% endblock %}