{% extends "base.html" %}
{% from "_macros.html" import crumbs %}
{% block title %}Alert History — Steward{% endblock %}
{% block breadcrumb %}{{ crumbs([("Alerts", "/alerts/"), ("History", "")]) }}{% endblock %}
{% block content %}
<div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;margin-bottom:1.25rem;">
  <h1 class="page-title" style="margin-bottom:0;">Alert History</h1>
  <div style="display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;">
    <select id="history-rule" name="rule" aria-label="Rule"
            hx-get="/alerts/history" hx-target="#history-rows" hx-include="#time-range"
            hx-trigger="change" hx-push-url="false"
            onchange="var u=new URL(window.location); this.value ? u.searchParams.set('rule', this.value) : u.searchParams.delete('rule'); history.replaceState({}, '', u);">
      <option value="">All rules</option>
      {% for r in rules %}
      <option value="{{ r.id }}" {% if chosen and chosen.id == r.id %}selected{% endif %}>{{ r.name }}</option>
      {% endfor %}
    </select>
    {% include "_time_range.html" %}
  </div>
</div>

<p style="color:var(--text-muted);font-size:0.88rem;margin-bottom:1.25rem;">
  Every change of state, newest first: what the value was against the rule's condition, whether
  the email and webhook went out, and the Ansible run an action started.
</p>

<div id="history-rows"
     hx-get="/alerts/history" hx-trigger="rangeChange from:body"
     hx-include="#time-range, #history-rule" hx-swap="innerHTML">
  {% include "alerts/_history_rows.html" %}
</div>
{% endblock %}