{% extends "base.html" %}
{% from "_macros.html" import crumbs, page_header %}
{% block title %}Alert History — Steward{% endblock %}
{% block breadcrumb %}{{ crumbs([("Alerts", "/alerts/"), ("History", "")]) }}{% endblock %}
{% block content %}
{% call page_header("Alert history", "Each time a rule left quiet, newest first: what it reached and for how long, its worst reading, and who was told.") %}
    <select id="history-rule" name="rule" aria-label="Rule" class="input" style="width:auto;"
            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" %}
{% endcall %}

<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 %}