{% extends "base.html" %}
{% block title %}View · Alerts{% endblock %}
{% block content %}
<div class="section-head">
  <div>
    <span class="section-tag">// section 01 › view</span>
    <h1>Active alerts</h1>
    <p class="lead">Live countdown to expiration. Reminders are dispatched automatically by email per the configured schedule.</p>
  </div>
  <div class="row-gap">
    <span class="kbd">today: <strong style="color: var(--accent);">{{ today_iso }}</strong></span>
    {% if current_user.is_admin %}
      <a href="{{ url_for('main.alert_new') }}" class="btn btn-primary">+ New alert</a>
    {% endif %}
  </div>
</div>

{% if alerts %}
<div class="alerts-grid">
  {% for a in alerts %}
    {% set state = 'is-expired' if a.days_left < 0 else ('is-critical' if a.days_left < 7 else ('is-warning' if a.days_left < 30 else '')) %}
    {% set state_text = 'EXPIRED' if a.days_left < 0 else ('CRITICAL' if a.days_left < 7 else ('WARNING' if a.days_left < 30 else 'NOMINAL')) %}
  <article class="alert-card {{ state }}">
    <header class="alert-head">
      <h3 class="alert-title">{{ a.title }}</h3>
      {% if a.category %}<span class="alert-cat">{{ a.category }}</span>{% endif %}
    </header>
    {% if a.description %}<p class="alert-desc">{{ a.description }}</p>{% endif %}

    <div class="alert-message">
      <strong>{{ a.title }}</strong> · expires {{ a.expiration_date }}
    </div>

    <div class="countdown" data-expires="{{ a.expiration_date }}">
      <div class="countdown-segment"><span class="countdown-value">—</span><span class="countdown-label">days</span></div>
      <div class="countdown-segment"><span class="countdown-value">—</span><span class="countdown-label">hours</span></div>
      <div class="countdown-segment"><span class="countdown-value">—</span><span class="countdown-label">min</span></div>
      <div class="countdown-segment"><span class="countdown-value">—</span><span class="countdown-label">sec</span></div>
    </div>

    <div class="alert-meta">
      <span><span class="alert-status-dot"></span><span class="alert-state-text">{{ state_text }}</span></span>
      <span>reminders: {{ a.reminder_days|join(', ') }}d</span>
    </div>
  </article>
  {% endfor %}
</div>
{% else %}
<div class="empty">
  <div class="empty-icon">▮▮</div>
  <p><strong>No active alerts.</strong></p>
  {% if current_user.is_admin %}
  <p class="dim">Add your first one — license renewals, certificates, contracts, …</p>
  <a href="{{ url_for('main.alert_new') }}" class="btn btn-primary">Create the first alert</a>
  {% else %}
  <p class="dim">Ask an administrator to create alerts for your team.</p>
  {% endif %}
</div>
{% endif %}
{% endblock %}