{% extends "ui/_layout.html" %}
{% from "ui/_table_macros.html" import pagination_inline with context %}
{% block title %}Event log - bty-web{% endblock %}

{% block subnav %}
<nav class="navbar subnav-strip" aria-label="Section sub-navigation">
    <div class="container">
        <span class="subnav-jumps d-flex align-items-center flex-wrap">
            <a href="#events-list">List</a>
        </span>
    </div>
</nav>
{% endblock %}

{% block intro %}
{% from "ui/_intro_box.html" import render as intro_box %}
{% call intro_box() %}
    Append-only audit trail of operator + machine activity:
    PXE check-ins, image uploads, catalog edits, settings
    changes, auth attempts. Type a substring in the search box
    to filter by kind, subject, actor, source IP, or summary
    text. Newest first.
{% endcall %}
{% endblock %}

{% block content %}
<div class="card" id="events-list">
    {# Card header: "Events | Filter: <input> <search>" flexes
       to fill the left side; pagination + bulk actions sit on
       the right. The search does substring match across kind,
       subject_kind, subject_id, actor, source_ip, and summary
       so every previously-dropdown pivot is reachable by
       typing the value. #}
    <div class="card-header bg-light fw-semibold d-flex flex-wrap align-items-center gap-3 py-2">
        <form method="get" class="d-flex align-items-center gap-2 m-0 flex-grow-1" style="min-width: 14rem;">
            {% if page.per_page != per_page_choices[0] %}<input type="hidden" name="per_page" value="{{ page.per_page }}">{% endif %}
            <span class="text-nowrap"><i class="bi bi-list-ul me-1"></i>Events</span>
            <span class="vr"></span>
            <label for="events-q" class="text-nowrap text-muted small mb-0">Filter:</label>
            <input type="search" name="q" id="events-q" value="{{ q or '' }}"
                   class="form-control form-control-sm flex-grow-1"
                   placeholder="kind / subject / actor / IP / summary">
            <button type="submit" class="btn btn-sm btn-outline-secondary" title="Search">
                <i class="bi bi-search"></i>
            </button>
            {% if q %}
            <a href="?" class="btn btn-sm btn-link text-nowrap">Clear</a>
            {% endif %}
        </form>
        {{ pagination_inline(page, preserved, label='events') }}
    </div>
    {# Bulk-action row: lives in its own thin band below the
       filter/pagination card header so the checkbox actions
       (Ack / Clear) on the table's left column have a clear
       home. Anchored to the right so it visually pairs with
       the per-row Ack toggle column. #}
    <div class="card-body py-2 border-bottom d-flex flex-wrap align-items-center gap-2">
        <span class="text-muted small text-nowrap">Selected rows:</span>
        <button type="button" class="btn btn-sm btn-outline-primary text-nowrap" id="bulk-ack"
                title="Acknowledge the checked events">
            <i class="bi bi-check2-square me-1"></i>Ack
        </button>
        <button type="button" class="btn btn-sm btn-outline-secondary text-nowrap" id="bulk-clear"
                title="Clear acknowledgement on the checked events">
            <i class="bi bi-arrow-counterclockwise me-1"></i>Clear
        </button>
    </div>
    <div class="table-responsive">
        <table class="table table-striped table-hover mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    <th style="width: 1%; white-space: nowrap;">
                        <input type="checkbox" id="select-all" class="form-check-input"
                               title="Select all on this page" aria-label="Select all">
                    </th>
                    <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>
                    <th style="width: 1%; white-space: nowrap;">Ack</th>
                </tr>
            </thead>
            <tbody>
                {% for e in events %}
                <tr>
                    <td>
                        <input type="checkbox" class="form-check-input ev-check"
                               value="{{ e.id }}" aria-label="Select event {{ e.id }}">
                    </td>
                    <td><small class="text-muted" title="{{ e.ts }}">{{ e.ts | fmt_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',
                            'auth': 'bg-success',
                        } %}
                        {% 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 | linkify }}</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?q={{ 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?q={{ 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?q={{ 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>
                    <td>
                        {# Per-row toggle: Acknowledge when unacked, Clear
                           when acked. Acknowledging a failure clears it
                           from the dashboard Health Monitoring tripwire;
                           clearing puts it back. Works on any event. #}
                        {% if e.acknowledged %}
                        <button type="button" class="btn btn-sm btn-outline-secondary text-nowrap ev-toggle"
                                data-id="{{ e.id }}" data-ack="0"
                                title="Clear acknowledgement">
                            <i class="bi bi-arrow-counterclockwise me-1"></i>Clear
                        </button>
                        {% else %}
                        <button type="button" class="btn btn-sm btn-outline-primary text-nowrap ev-toggle"
                                data-id="{{ e.id }}" data-ack="1"
                                title="Acknowledge this event">
                            <i class="bi bi-check2-square me-1"></i>Ack
                        </button>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<script>
(function () {
    function postAck(ids, ack) {
        if (!ids.length) return;
        var data = new FormData();
        ids.forEach(function (id) { data.append("ids", id); });
        data.append("acknowledged", ack ? "1" : "0");
        fetch("/ui/events/acknowledge", {
            method: "POST", credentials: "same-origin", body: data,
        }).then(function (r) {
            if (!r.ok) throw new Error("HTTP " + r.status);
            window.location.reload();
        }).catch(function (e) { alert("Action failed: " + e.message); });
    }
    function checkedIds() {
        return Array.prototype.slice
            .call(document.querySelectorAll(".ev-check:checked"))
            .map(function (c) { return c.value; });
    }
    var selectAll = document.getElementById("select-all");
    if (selectAll) {
        selectAll.addEventListener("change", function () {
            document.querySelectorAll(".ev-check").forEach(function (c) {
                c.checked = selectAll.checked;
            });
        });
    }
    // Bulk buttons act on the checked rows.
    var bulkAck = document.getElementById("bulk-ack");
    var bulkClear = document.getElementById("bulk-clear");
    if (bulkAck) bulkAck.addEventListener("click", function () {
        var ids = checkedIds();
        if (!ids.length) { alert("No events selected."); return; }
        postAck(ids, true);
    });
    if (bulkClear) bulkClear.addEventListener("click", function () {
        var ids = checkedIds();
        if (!ids.length) { alert("No events selected."); return; }
        postAck(ids, false);
    });
    // Per-row toggle (event-delegated; data-ack is the target state).
    document.addEventListener("click", function (ev) {
        var btn = ev.target.closest(".ev-toggle");
        if (!btn) return;
        postAck([btn.dataset.id], btn.dataset.ack === "1");
    });
})();
</script>

{% endblock %}