{% extends "base.html" %}
{% block title %}Alerts — Fabled Scryer{% endblock %}
{% block content %}
<h1 class="page-title">Alerts</h1>

{% if active %}
<h2 class="section-title" style="margin-bottom:1rem;">Active</h2>
<div class="card-flush" style="margin-bottom:2rem;">
    <table class="table">
        <thead>
            <tr>
                <th>State</th>
                <th>Rule</th>
                <th>Resource</th>
                <th>Metric</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for state, rule in active %}
            <tr>
                <td>
                    {% if state.state.value == 'firing' %}
                    <span class="badge badge-red">FIRING</span>
                    {% elif state.state.value == 'acknowledged' %}
                    <span class="badge badge-yellow">ACK</span>
                    {% else %}
                    <span class="badge badge-dim">PENDING</span>
                    {% endif %}
                </td>
                <td>{{ rule.name }}</td>
                <td style="color:var(--text-muted);">{{ rule.resource_name }}</td>
                <td style="color:var(--text-muted);">{{ rule.metric_name }} {{ rule.operator.value }} {{ rule.threshold }}</td>
                <td class="td-actions">
                    {% if state.state.value == 'firing' %}
                    <form method="post" action="/alerts/{{ rule.id }}/acknowledge" style="display:inline;">
                        <button type="submit" class="btn btn-sm btn-warn">Acknowledge</button>
                    </form>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<p style="color:var(--text-muted);margin-bottom:2rem;">No active alerts.</p>
{% endif %}

<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;">
    <h2 class="section-title">Rules</h2>
    <div style="display:flex;gap:0.5rem;">
        <a class="btn btn-ghost" href="/alerts/maintenance">Maintenance</a>
        <a class="btn" href="/alerts/rules/new">New Rule</a>
    </div>
</div>
{% if rules %}
<div class="card-flush">
    <table class="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Condition</th>
                <th style="text-align:center;">Consec.</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 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 }}</td>
                <td class="td-actions">
                    <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;">
                        <button type="submit" class="btn btn-sm btn-ghost">
                          {% if rule.enabled %}Disable{% else %}Enable{% endif %}
                        </button>
                    </form>
                    <form method="post" action="/alerts/rules/{{ rule.id }}/delete" style="display:inline;">
                        <button type="submit" class="btn btn-sm btn-danger"
                            onclick="return confirm('Delete rule {{ rule.name }}?')">Delete</button>
                    </form>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<p style="color:var(--text-muted);">No alert rules configured.</p>
{% endif %}
{% endblock %}