{% 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-2">
                <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-2">
                <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>
                    {% for sk in known_subject_kinds %}
                    <option value="{{ sk }}" {% if sk == subject_kind %}selected{% endif %}>{{ sk }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <label for="subject_id" class="form-label small mb-1">Subject id</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">
                <label for="actor" class="form-label small mb-1">Actor</label>
                <select name="actor" id="actor" class="form-select form-select-sm">
                    <option value="" {% if not actor %}selected{% endif %}>(any)</option>
                    {% for a in known_actors %}
                    <option value="{{ a }}" {% if a == actor %}selected{% endif %}>{{ a }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <label for="source_ip" class="form-label small mb-1">Source IP</label>
                <input type="text" name="source_ip" id="source_ip"
                       class="form-control form-control-sm font-monospace"
                       value="{{ source_ip or '' }}"
                       placeholder="192.168.1.5">
            </div>
            <div class="col-md-2 d-flex gap-2">
                <button type="submit" class="btn btn-sm btn-primary flex-grow-1"
                        title="Filter">
                    <i class="bi bi-funnel"></i>
                </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>
                    <th style="width: 1%; white-space: nowrap;">Source IP</th>
                </tr>
            </thead>
            <tbody>
                {% for e in events %}
                <tr>
                    <td><small class="text-muted">{{ e.ts }}</small></td>
                    <td>
                        {# Badge colour: failure kinds (anything ending
                           ``.failed`` or ``_failed``) override to
                           danger so they pop in the log. Otherwise
                           a per-family map; unknown families fall
                           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',
                        } %}
                        {% if e.kind.endswith('.failed') or e.kind.endswith('_failed') %}
                        {% set badge = 'bg-danger' %}
                        {% else %}
                        {% set badge = badge_map.get(family, 'bg-light text-dark border') %}
                        {% endif %}
                        <span class="badge {{ badge }}">{{ e.kind }}</span>
                    </td>
                    <td>{{ e.summary }}</td>
                    <td>
                        {% if e.subject_kind == "machine" and e.subject_id %}
                        {# Machine subjects link directly to the
                           per-machine detail page (the per-machine
                           events card is already there). #}
                        <a class="text-decoration-none" href="/ui/machines/{{ e.subject_id }}">
                            <code>{{ e.subject_id }}</code>
                        </a>
                        {% elif e.subject_id %}
                        {# Non-machine subjects (image, catalog,
                           boot, settings) don't have a detail page;
                           pivot to the timeline filtered by this
                           subject so the operator can see
                           everything that touched it. #}
                        <a class="text-decoration-none"
                           href="/ui/events?subject_kind={{ e.subject_kind|urlencode }}&amp;subject_id={{ e.subject_id|urlencode }}"
                           title="Filter by this {{ e.subject_kind }}">
                            <code>{{ e.subject_id }}</code>
                        </a>
                        {% else %}
                        <span class="text-muted small">-</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if e.actor %}
                        {# Click to pivot: filter the timeline down to
                           rows with this actor (operator / system /
                           pxe-client). #}
                        <a class="text-decoration-none small"
                           href="/ui/events?actor={{ e.actor|urlencode }}"
                           title="Filter by this actor">
                            {{ e.actor }}
                        </a>
                        {% else %}
                        <span class="text-muted small">-</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if e.source_ip %}
                        {# Click to pivot: same /ui/events page filtered
                           down to this IP. Useful for "what else did
                           this workstation / target do?". #}
                        <a class="text-decoration-none"
                           href="/ui/events?source_ip={{ e.source_ip|urlencode }}"
                           title="Filter by this IP">
                            <code class="small">{{ e.source_ip }}</code>
                        </a>
                        {% 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 "" }}{% if kind or subject_kind or subject_id or actor or source_ip %} (filtered){% endif %}.
        </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 %}