{% extends "layout.html" %}
{% from "_partials/table_helpers.html" import search_input, sort_header, pagination_inline %}
{% from "_partials/page_description.html" import page_description %}
{% block title %}Events - pixie{% endblock %}
{% block subnav %}
<nav class="navbar subnav-strip" aria-label="Section sub-navigation">
    <div class="container">
        {# LEFT: anchor links. Don't repeat the top-nav ("Events");
           use section-specific verbs. #}
        <span class="subnav-jumps d-flex align-items-center flex-wrap">
            <a href="#log">Log</a>
        </span>
        {# The kind + related-to filter dropdowns used to live here.
           They moved into the table's card-header row alongside the
           freeform filter + pagination so an operator's eye lands on
           "what am I filtering", "what am I searching for", "how
           many are there" in one horizontal sweep -- matching the
           layout intent documented in table_helpers.html. #}
    </div>
</nav>
{% endblock %}
{% block content %}
{{ page_description('clock-history', 'Chronological log of every state change pixie has emitted: machines binding + status POSTs, catalog images fetching, exports going up + down, admin logins. Filter by kind or by the subject it\'s about; freeform search narrows the summary column. The tail is truncated to the newest 2000 events by default.') }}
<div class="card" id="log">
    <div class="card-header bg-light fw-semibold d-flex flex-wrap align-items-center gap-2 py-2">
        <span class="text-nowrap"><i class="bi bi-clock-history me-1"></i>Events</span>
        {{ search_input('/ui/events', q, preserved, 'kind / related to / summary') }}
        {# Strict-equality narrowings applied BEFORE the freeform ``q``
           filter. The two selects are dropped-label + icon-tooltip
           only so they don't push pagination onto a second row on
           medium viewports. Each is its own tiny form that submits on
           ``change``; hidden inputs preserve the OTHER filter + q so
           ``page`` + ``sort`` survive a filter flip. #}
        <form method="get" action="/ui/events" class="d-flex align-items-center m-0">
            {% if preserved.q %}<input type="hidden" name="q" value="{{ preserved.q }}">{% endif %}
            {% if subject_kind_selected %}
            <input type="hidden" name="subject_kind" value="{{ subject_kind_selected }}">
            {% endif %}
            <label for="filter-kind" class="text-muted small mb-0 me-1"
                   title="Filter by kind">
                <i class="bi bi-tag"></i>
            </label>
            <select id="filter-kind" name="kind" onchange="this.form.submit()"
                    class="form-select form-select-sm" style="max-width: 14rem;"
                    aria-label="Filter by kind">
                <option value="">kind: any</option>
                {% for k in kind_choices %}
                <option value="{{ k }}" {% if k == kind_selected %}selected{% endif %}>{{ k }}</option>
                {% endfor %}
            </select>
        </form>
        <form method="get" action="/ui/events" class="d-flex align-items-center m-0">
            {% if preserved.q %}<input type="hidden" name="q" value="{{ preserved.q }}">{% endif %}
            {% if kind_selected %}
            <input type="hidden" name="kind" value="{{ kind_selected }}">
            {% endif %}
            <label for="filter-subject" class="text-muted small mb-0 me-1"
                   title="Filter by related-to">
                <i class="bi bi-link-45deg"></i>
            </label>
            <select id="filter-subject" name="subject_kind" onchange="this.form.submit()"
                    class="form-select form-select-sm" style="max-width: 10rem;"
                    aria-label="Filter by related-to">
                <option value="">related: any</option>
                {% for s in subject_kind_choices %}
                <option value="{{ s }}" {% if s == subject_kind_selected %}selected{% endif %}>{{ s }}</option>
                {% endfor %}
            </select>
        </form>
        {% if kind_selected or subject_kind_selected %}
        <a href="/ui/events{% if preserved.q %}?q={{ preserved.q }}{% endif %}"
           class="btn btn-sm btn-link text-nowrap p-0 text-decoration-none"
           title="Clear kind + related-to filters">
            <i class="bi bi-x-circle"></i>
        </a>
        {% endif %}
        {# Bulk actions, pushed to the right. Acknowledge advances the
           ack cursor so the dashboard error count zeros (the log is
           left intact); Clear wipes the whole log after a confirm. #}
        <form method="post" action="/ui/events/ack" class="m-0 ms-auto">
            <input type="hidden" name="next" value="/ui/events">
            <button type="submit" class="btn btn-sm btn-outline-secondary text-nowrap"
                    title="Mark current errors as seen: zeros the dashboard error count. Deletes nothing.">
                <i class="bi bi-check2-all me-1"></i>Acknowledge
            </button>
        </form>
        <form method="post" action="/ui/events/clear" class="m-0"
              onsubmit="return confirm('Clear the entire event log? This permanently deletes every event.');">
            <button type="submit" class="btn btn-sm btn-outline-danger text-nowrap"
                    title="Permanently delete every event from the log.">
                <i class="bi bi-trash3 me-1"></i>Clear log
            </button>
        </form>
        {{ pagination_inline(page_state, preserved, label='events') }}
    </div>
    {% if events %}
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
                <tr>
                    {{ sort_header('When', 'ts', sort, preserved) }}
                    {{ sort_header('Kind', 'kind', sort, preserved) }}
                    {{ sort_header('Related to', 'subject_id', sort, preserved) }}
                    <th scope="col">Summary</th>
                </tr>
            </thead>
            <tbody>
                {% for e in events %}
                <tr>
                    <td class="small text-muted text-nowrap">{{ e.ts | fmt_ts }}</td>
                    <td><code>{{ e.kind }}</code></td>
                    <td>
                        {# ``Related to`` reads as ``<what>: <which>``:
                           e.subject_kind is the category (entry / machine /
                           export / auth), e.subject_id is the specific
                           name / MAC / export name. Presenting both with a
                           category label makes the row self-describing
                           without an operator having to memorise which
                           bare token means which. #}
                        {% if e.subject_kind %}
                        <span class="badge text-bg-light border me-1">{{ e.subject_kind }}</span>
                        <code class="small">{{ e.subject_id or '' }}</code>
                        {% else %}
                        <span class="text-muted small">-</span>
                        {% endif %}
                    </td>
                    <td>{{ e.summary or "" }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="card-body">
        <p class="text-muted mb-0">
            <i class="bi bi-inbox me-1"></i>
            {% if q %}No events match <code>{{ q }}</code>.{% else %}No events yet.{% endif %}
        </p>
    </div>
    {% endif %}
</div>
{% endblock %}