{% extends "ui/_layout.html" %}
{% block title %}Event log - bty-web{% endblock %}

{% block subnav %}
{# In-page jump links to the event list + the filter card, separated by
   a vertical rule. #}
<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 class="vr"></span>
            <a href="#events-filter">Filter</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. Filter by kind / subject / actor /
    source IP via the form below. Newest first.
{% endcall %}
{% endblock %}

{% block content %}
<div class="card mb-3" id="events-filter">
    <div class="card-header bg-light fw-semibold">
        <i class="bi bi-funnel me-1"></i>Filter
    </div>
    <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" aria-label="Filter">
                    <i class="bi bi-funnel"></i>
                </button>
                <a href="/ui/events" class="btn btn-sm btn-outline-secondary"
                   title="Clear filters" aria-label="Clear filters">
                    <i class="bi bi-x-lg"></i>
                </a>
            </div>
            <div class="col-12">
                <div class="form-check small">
                    <input class="form-check-input" type="checkbox" name="failed" value="1"
                           id="failed-only" {% if failed_only %}checked{% endif %}>
                    <label class="form-check-label text-muted" for="failed-only">
                        Failures only (any kind ending in <code>.failed</code> /
                        <code>_failed</code>)
                    </label>
                </div>
            </div>
        </form>
    </div>
</div>

{% if not events %}
<div class="alert alert-light border" id="events-list">
    <i class="bi bi-info-circle me-2"></i>
    {% if kind or subject_kind or subject_id or actor or source_ip or failed_only %}
    No events match the current filter.
    <a href="/ui/events" class="ms-1">Clear filter</a>
    to see all events.
    {% else %}
    The log is empty. Rows appear as machines check in, operators
    make changes, and async-managers complete. If you've just
    started bty-web, hit a few endpoints and refresh.
    {% endif %}
</div>
{% else %}

<div class="card" id="events-list">
    <div class="card-header bg-light fw-semibold d-flex justify-content-between align-items-center flex-wrap gap-2">
        <span><i class="bi bi-list-ul me-1"></i>All Events</span>
        {# Bulk action on the checked rows. "Action:" prefixes the two
           buttons; both no-op (with a hint) if nothing is checked. #}
        <span class="d-flex align-items-center gap-2">
            <span class="text-muted small">Action:</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>
        </span>
    </div>
    <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;">
                        <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?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>
                    <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 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 or failed_only %} (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>

<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>

{% endif %}
{% endblock %}