{% extends "base.html" %}
{% block title %}Vigilar — Events{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h5 class="mb-0"><i class="bi bi-list-ul me-2"></i>Event Log</h5>
    <div class="d-flex gap-2">
        <select class="form-select form-select-sm" id="filter-severity" style="width: auto;">
            <option value="">All Severities</option>
            <option value="INFO">Info</option>
            <option value="WARNING">Warning</option>
            <option value="ALERT">Alert</option>
            <option value="CRITICAL">Critical</option>
        </select>
        <select class="form-select form-select-sm" id="filter-type" style="width: auto;">
            <option value="">All Types</option>
            <option value="MOTION_START">Motion</option>
            <option value="CONTACT_OPEN">Contact</option>
            <option value="POWER_LOSS">Power</option>
            <option value="ARM_STATE_CHANGED">Arm State</option>
        </select>
    </div>
</div>

<div class="card bg-dark border-secondary">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-dark table-hover mb-0">
                <thead>
                    <tr>
                        <th>Time</th>
                        <th>Type</th>
                        <th>Source</th>
                        <th>Severity</th>
                        <th>Details</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="event-list">
                    {% for event in events %}
                    <tr>
                        <td>{{ event.ts }}</td>
                        <td><span class="badge bg-secondary">{{ event.type }}</span></td>
                        <td>{{ event.source_id or '—' }}</td>
                        <td>
                            <span class="badge bg-{{ 'danger' if event.severity == 'CRITICAL' else 'warning' if event.severity == 'ALERT' else 'info' if event.severity == 'WARNING' else 'secondary' }}">
                                {{ event.severity }}
                            </span>
                        </td>
                        <td>{{ event.payload or '' }}</td>
                        <td>
                            {% if not event.acknowledged %}
                            <button class="btn btn-sm btn-outline-success" onclick="ackEvent({{ event.id }})">
                                <i class="bi bi-check"></i>
                            </button>
                            {% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="6" class="text-center text-muted py-3">No events recorded</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}