{% extends "layout.html" %}
{% block title %}{{ _('System Alerts') }}{% endblock %}
{% block content %}

<div class="card">
    <div class="card-header bg-white py-3">
        <h5 class="mb-0">System Alerts History</h5>
    </div>
    <div class="card-body p-0">
        <table class="table table-hover mb-0">
            <thead class="table-light">
                <tr>
                    <th class="ps-4">Timestamp</th>
                    <th>Type</th>
                    <th>Subject</th>
                    <th>Message</th>
                </tr>
            </thead>
            <tbody>
                {% for alert in alerts %}
                <tr>
                    <td class="ps-4 text-muted small">{{ alert.timestamp|format_time }}</td>
                    <td>
                        <span class="badge 
                            {% if alert.type == 'Quota' %}bg-warning
                            {% elif alert.type == 'Bandwidth' %}bg-info
                            {% elif alert.type == 'Security' %}bg-danger
                            {% else %}bg-secondary{% endif %}">
                            {{ alert.type }}
                        </span>
                    </td>
                    <td class="fw-bold">{{ alert.subject }}</td>
                    <td class="small">{{ alert.message }}</td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="4" class="text-center py-4 text-muted">No alerts found.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}