{% extends "base.html" %}
{% block title %}Alerts — Steward{% endblock %}
{% from "_macros.html" import page_header, status_badge, empty_state %}
{% block content %}
{% set can_edit = session.user_role in ('operator', 'admin') %}
{% call page_header("Alerts", "What is breaching now, in a sentence each, then every rule.") %}
    <a class="btn btn-ghost" href="/alerts/history">History</a>
    <a class="btn btn-ghost" href="/alerts/maintenance">Maintenance</a>
    {% if can_edit %}<a class="btn" href="/alerts/rules/new">New rule</a>{% endif %}
{% endcall %}

{# The Active section re-reads itself, so an alert that clears or starts shows
   without a reload. #}
<div id="alerts-active" hx-get="/alerts/active" hx-trigger="every {{ poll_interval or 60 }}s" hx-swap="innerHTML">
{% include "alerts/_active.html" %}
</div>

<h2 class="section-title" style="margin-bottom:1rem;">Rules</h2>
{% if rules %}
<div class="card-flush">
    <table class="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Now</th>
                <th>Condition</th>
                <th style="text-align:center;" title="Checks in a row to fire / to clear">Fire / clear</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for rule in rules %}
            <tr {% if not rule.enabled %}style="opacity:0.55;"{% endif %}>
                <td>
                  {{ rule.name }}
                  {% if not rule.enabled %}
                  <span style="font-size:0.72rem;color:var(--text-dim);margin-left:0.35rem;">disabled</span>
                  {% endif %}
                </td>
                <td>
                  {%- set now_label = (rule_state or {}).get(rule.id) %}
                  {%- if not rule.enabled %}<span class="tone-dim" style="font-size:0.8rem;">off</span>
                  {%- elif now_label and now_label not in ('inactive', 'resolved') %}{{ status_badge(now_label) }}
                  {%- else %}<span class="tone-ok" style="font-size:0.8rem;" title="Within its threshold">quiet</span>{% endif -%}
                </td>
                <td style="color:var(--text-muted);font-size:0.85rem;">
                  <span style="color:var(--text-dim);">{{ rule.source_module }}/</span>{{ rule.resource_name }}
                  <span style="font-family:ui-monospace,monospace;font-size:0.8rem;">
                    :{{ rule.metric_name }} {{ rule.operator.value }} {{ rule.threshold }}
                  </span>
                </td>
                <td style="color:var(--text-muted);text-align:center;">{{ rule.consecutive_failures_required }} / {{ rule.consecutive_ok_required }}</td>
                <td class="td-actions">
                    <a href="/alerts/history?rule={{ rule.id }}" class="btn btn-sm btn-ghost">History</a>
                    {% if can_edit %}
                    <a href="/alerts/rules/{{ rule.id }}/edit" class="btn btn-sm btn-ghost">Edit</a>
                    <form method="post" action="/alerts/rules/{{ rule.id }}/toggle" style="display:inline;">{{ csrf_field() }}
                        <button type="submit" class="btn btn-sm btn-ghost">
                          {% if rule.enabled %}Disable{% else %}Enable{% endif %}
                        </button>
                    </form>
                    {% endif %}
                    {% if session.user_role == 'admin' %}
                    <form method="post" action="/alerts/rules/{{ rule.id }}/delete" style="display:inline;">{{ csrf_field() }}
                        <button type="submit" class="btn btn-sm btn-danger"
                            data-confirm="Delete rule {{ rule.name }}?">Delete</button>
                    </form>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="card">{{ empty_state("No alert rules yet.", "New rule" if can_edit else none, "/alerts/rules/new" if can_edit else none) }}</div>
{% endif %}
{% endblock %}