{% extends "ui/_layout.html" %}
{% block title %}Event log - bty-web{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h1 class="h3 mb-0"><i class="bi bi-clock-history me-2"></i>Event log</h1>
    <span class="text-muted small">slim audit trail of operator + machine activity</span>
</div>

<div class="card mb-3">
    <div class="card-body">
        {# Filter form. GET so links stay shareable + back-button friendly. #}
        <form method="get" action="/ui/events" class="row g-2 align-items-end">
            <div class="col-md-3">
                <label for="kind" class="form-label small mb-1">Kind</label>
                <select name="kind" id="kind" class="form-select form-select-sm">
                    <option value="" {% if not kind %}selected{% endif %}>(any)</option>
                    {% for k in known_kinds %}
                    <option value="{{ k }}" {% if k == kind %}selected{% endif %}>{{ k }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-3">
                <label for="subject_kind" class="form-label small mb-1">Subject kind</label>
                <select name="subject_kind" id="subject_kind" class="form-select form-select-sm">
                    <option value="" {% if not subject_kind %}selected{% endif %}>(any)</option>
                    <option value="machine" {% if subject_kind == "machine" %}selected{% endif %}>machine</option>
                    <option value="image" {% if subject_kind == "image" %}selected{% endif %}>image</option>
                    <option value="catalog" {% if subject_kind == "catalog" %}selected{% endif %}>catalog</option>
                    <option value="boot" {% if subject_kind == "boot" %}selected{% endif %}>boot</option>
                    <option value="settings" {% if subject_kind == "settings" %}selected{% endif %}>settings</option>
                </select>
            </div>
            <div class="col-md-4">
                <label for="subject_id" class="form-label small mb-1">Subject id (e.g. MAC, image name)</label>
                <input type="text" name="subject_id" id="subject_id"
                       class="form-control form-control-sm"
                       value="{{ subject_id or '' }}"
                       placeholder="aa:bb:cc:dd:ee:ff">
            </div>
            <div class="col-md-2 d-flex gap-2">
                <button type="submit" class="btn btn-sm btn-primary flex-grow-1">
                    <i class="bi bi-funnel me-1"></i>Filter
                </button>
                <a href="/ui/events" class="btn btn-sm btn-outline-secondary"
                   title="Clear filters">
                    <i class="bi bi-x-lg"></i>
                </a>
            </div>
        </form>
    </div>
</div>

{% if not events %}
<div class="alert alert-light border">
    <i class="bi bi-info-circle me-2"></i>
    No events match the current filter. The log starts populating as
    machines check in and operators make changes; if you've just
    started bty-web, hit a few endpoints and refresh.
</div>
{% else %}

<div class="card">
    <div class="table-responsive">
        <table class="table table-hover mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    <th style="width: 1%; white-space: nowrap;">When</th>
                    <th style="width: 1%; white-space: nowrap;">Kind</th>
                    <th>Summary</th>
                    <th style="width: 1%; white-space: nowrap;">Subject</th>
                    <th style="width: 1%; white-space: nowrap;">Actor</th>
                </tr>
            </thead>
            <tbody>
                {% for e in events %}
                <tr>
                    <td><small class="text-muted">{{ e.ts }}</small></td>
                    <td>
                        {# Badge colour by event family. The mapping
                           is permissive: an unknown kind falls back
                           to the neutral light badge. #}
                        {% set family = e.kind.split('.')[0] %}
                        {% set badge_map = {
                            'machine': 'bg-info text-dark',
                            'image': 'bg-primary',
                            'catalog': 'bg-secondary',
                            'boot': 'bg-warning text-dark',
                            'settings': 'bg-dark',
                        } %}
                        {% set badge = badge_map.get(family, 'bg-light text-dark border') %}
                        <span class="badge {{ badge }}">{{ e.kind }}</span>
                    </td>
                    <td>{{ e.summary }}</td>
                    <td>
                        {% if e.subject_kind == "machine" and e.subject_id %}
                        <a class="text-decoration-none" href="/ui/machines/{{ e.subject_id }}">
                            <code>{{ e.subject_id }}</code>
                        </a>
                        {% elif e.subject_id %}
                        <code title="{{ e.subject_kind }}">{{ e.subject_id }}</code>
                        {% else %}
                        <span class="text-muted small">-</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if e.actor %}
                        <small class="text-muted">{{ e.actor }}</small>
                        {% else %}
                        <span class="text-muted small">-</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="card-footer d-flex justify-content-between small">
        <span class="text-muted">
            Showing {{ events|length }} event{{ "s" if events|length != 1 else "" }}.
        </span>
        {% if older_url %}
        <a href="{{ older_url }}" class="text-decoration-none">
            Older <i class="bi bi-arrow-right"></i>
        </a>
        {% endif %}
    </div>
</div>

{% endif %}
{% endblock %}