{% extends "base.html" %}
{% block title %}Alert History{% endblock %}

{% block content %}
<div class="lt-page-header">
  <div>
    <h1 class="lt-page-title">Alert History</h1>
    <p class="g-page-sub">Every alert Gandalf raised, including the ones that cleared on their own. Resolved alerts are kept 90 days.</p>
  </div>
</div>

<form class="cs-filters ev-filters" id="ev-filters" role="search" aria-label="Filter alert history">
  <input type="search" class="lt-input" id="ev-target" name="target" placeholder="Device, host, port or interface"
         aria-label="Filter by device" autocomplete="off">
  <select class="lt-select" id="ev-range" name="range" aria-label="Time range">
    <option value="24h">Last 24 hours</option>
    <option value="7d" selected>Last 7 days</option>
    <option value="30d">Last 30 days</option>
    <option value="90d">Last 90 days</option>
  </select>
  <select class="lt-select" id="ev-type" name="type" aria-label="Alert type">
    <option value="">All alert types</option>
  </select>
  <select class="lt-select" id="ev-severity" name="severity" aria-label="Severity">
    <option value="">All severities</option>
    <option value="critical">Critical</option>
    <option value="warning">Warning</option>
    <option value="info">Info</option>
  </select>
  <select class="lt-select" id="ev-status" name="status" aria-label="State">
    <option value="all">Open and cleared</option>
    <option value="active">Open now</option>
    <option value="resolved">Cleared</option>
  </select>
  <button type="button" class="lt-btn lt-btn-secondary lt-btn-sm" id="ev-clear" hidden>Clear filters</button>
</form>

<div id="ev-summary" class="cs-summary" aria-live="polite"></div>

<section class="g-section" id="ev-flappers-section" hidden>
  <div class="g-section-header">
    <h2 class="g-section-title">Recurring</h2>
  </div>
  <p class="cs-hint">The same alert on the same target more than once in this range. Something that keeps coming back usually has one cause worth finding.</p>
  <div class="lt-frame">
    <span class="lt-frame-bl">&#x255A;</span><span class="lt-frame-br">&#x255D;</span>
    <div id="ev-flappers"></div>
  </div>
</section>

<section class="g-section">
  <div class="g-section-header">
    <h2 class="g-section-title">Alerts</h2>
    <span class="g-section-badge" id="ev-count">0</span>
  </div>
  <div class="lt-frame">
    <span class="lt-frame-bl">&#x255A;</span><span class="lt-frame-br">&#x255D;</span>
    <div id="ev-table"><div class="lt-empty-state lt-empty-state--sm"><div class="lt-empty-state-title">Loading…</div></div></div>
  </div>
  <div class="ev-pager" id="ev-pager"></div>
</section>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='events.js') }}"></script>
{% endblock %}