{% extends "base.html" %}
{% block title %}Supervision - Alertes{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0"><i class="bi bi-bell"></i> Historique des alertes</h4>
    {% if alerts %}
    <form method="POST" action="/alerts/clear">
        <button type="submit" class="btn btn-sm btn-outline-danger"
                onclick="return confirm('Effacer tout l\'historique ?')">
            <i class="bi bi-trash"></i> Effacer l'historique
        </button>
    </form>
    {% endif %}
</div>

{% if not alerts %}
<div class="alert alert-info">
    <i class="bi bi-info-circle"></i> Aucune alerte enregistrée.
</div>
{% else %}
<div class="card">
    <div class="card-body p-0">
        <table class="table table-hover mb-0">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Type</th>
                    <th>Message</th>
                    <th>Valeur</th>
                    <th>Seuil</th>
                </tr>
            </thead>
            <tbody>
                {% for alert in alerts %}
                <tr>
                    <td class="text-nowrap">
                        <small>{{ alert.timestamp_display }}</small>
                    </td>
                    <td>
                        {% if alert.type == "process_down" %}
                        <span class="badge bg-danger">Processus</span>
                        {% else %}
                        <span class="badge bg-warning text-dark">Seuil</span>
                        {% endif %}
                    </td>
                    <td>{{ alert.message }}</td>
                    <td>{{ alert.value }}</td>
                    <td>{{ alert.threshold }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<div class="text-muted small mt-2">
    {{ alerts | length }} alerte(s) — les 500 dernières sont conservées.
</div>
{% endif %}
{% endblock %}