{% extends "base.html" %}
{% block title %}Alerts · SD RMM{% endblock %}
{% block content %}
<style>
  .alert-list { display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
  .alert-card { display:flex; gap:12px; align-items:center; background:var(--surface); border:1px solid var(--line); border-left-width:3px; border-radius:var(--r-md); padding:11px 14px; }
  .alert-card.sev-crit { border-left-color:var(--bad); }
  .alert-card.sev-warn { border-left-color:var(--warn); }
  .sev-pill { font:700 10.5px/1 var(--font-sans); letter-spacing:.5px; padding:4px 8px; border-radius:999px; white-space:nowrap; }
  .sev-pill.sev-crit { background:rgba(249,115,115,.16); color:var(--bad); }
  .sev-pill.sev-warn { background:rgba(251,191,36,.15); color:var(--warn); }
  .alert-msg { font-weight:600; }
  .alert-meta { font-size:12px; color:var(--muted); margin-top:2px; }
  .empty-ok { color:var(--ok); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:20px; text-align:center; font-weight:600; }
  .tbl { width:100%; border-collapse:collapse; font-size:13px; }
  .tbl th { text-align:left; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.4px; padding:6px 8px; border-bottom:1px solid var(--line); }
  .tbl td { padding:6px 8px; border-bottom:1px solid var(--line-soft); }
  .tbl .mono { font-family:var(--font-mono); color:var(--muted); }
</style>

<div class="page-header">
  <div>
    <h1 class="page-title">Alerts</h1>
    <p class="muted" style="font-size:11px;margin:2px 0 0;">Infrastructure health &mdash; offline / CPU / memory / disk. Security detections are on the <a href="/security">Threats</a> tab.</p>
    <p class="muted">{{ active_alerts|length }} active &middot; {{ recent|length }} recent</p>
  </div>
  {% if user.is_super_admin %}<a class="btn btn-ghost" href="/alerts/settings">Thresholds</a>{% endif %}
</div>

<h2 class="section-title">Active</h2>
{% if active_alerts %}
<div class="alert-list">
  {% for a in active_alerts %}
  <div class="alert-card sev-{{ a.severity }}">
    <span class="sev-pill sev-{{ a.severity }}">{{ a.severity|upper }}</span>
    <div class="alert-body">
      <div class="alert-msg">{{ a.message }}</div>
      <div class="alert-meta">
        <a href="/orgs/{{ a.agent.org_id }}/agents/{{ a.agent_id }}">{{ a.agent.hostname }}</a>
        &middot; {{ a.metric }} &middot; since {{ a.started_at| pt('%Y-%m-%d %H:%M') }}
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="empty-ok">&#10003; All clear — no active alerts.</div>
{% endif %}

<h2 class="section-title">Recent (resolved)</h2>
{% if recent %}
<table class="tbl">
  <thead><tr><th>Sev</th><th>Agent</th><th>Alert</th><th>Started</th><th>Resolved</th></tr></thead>
  <tbody>
  {% for a in recent %}
  <tr>
    <td><span class="sev-pill sev-{{ a.severity }}">{{ a.severity|upper }}</span></td>
    <td><a href="/orgs/{{ a.agent.org_id }}/agents/{{ a.agent_id }}">{{ a.agent.hostname }}</a></td>
    <td>{{ a.message }}</td>
    <td class="mono">{{ a.started_at| pt('%m-%d %H:%M') }}</td>
    <td class="mono">{{ a.resolved_at| pt('%m-%d %H:%M') if a.resolved_at else '' }}</td>
  </tr>
  {% endfor %}
  </tbody>
</table>
{% else %}
<p class="muted">No resolved alerts yet.</p>
{% endif %}
{% endblock %}