{% extends "ui/_layout.html" %}
{% from "ui/_table_macros.html" import sort_header, pagination_footer with context %}
{% block title %}Machines - bty-web{% endblock %}

{% block subnav %}
{# In-page jump links to the two tables on this page, separated by a
   vertical rule (same style as the Settings section nav). #}
<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="#machines-list">List</a>
            <span class="vr"></span>
            <a href="#machines-activity">Activity</a>
        </span>
    </div>
</nav>
{% endblock %}

{% block intro %}
{% from "ui/_intro_box.html" import render as intro_box %}
{% call intro_box() %}
    Machines auto-appear on first remote contact (PXE or manual
    <code>tui --server .. --mac ..</code>); to stage one before it
    boots, use the <strong>Add</strong> field in the table header
    (image binding + boot mode are set per-machine on the detail
    page).
{% endcall %}
{% endblock %}

{% block content %}
{# Post-delete flash banner. A non-trivial action (delete a machine
   record) deserves operator feedback whether or not the row
   actually existed. ``?deleted=<mac>`` after a real removal;
   ``?missing=<mac>`` when the row was already gone (stale tab,
   re-clicked delete). Auto-dismiss after 5 seconds via the
   bootstrap data-bs-dismiss + setTimeout below. #}
{% if flash_deleted %}
  <div class="alert alert-success alert-dismissible fade show" role="alert" id="bty-flash">
    <i class="bi bi-check-circle-fill me-1"></i>
    Deleted machine <code>{{ flash_deleted }}</code>.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
{% elif flash_missing %}
  <div class="alert alert-warning alert-dismissible fade show" role="alert" id="bty-flash">
    <i class="bi bi-info-circle me-1"></i>
    Machine <code>{{ flash_missing }}</code> was not found (already deleted, or never bound).
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
{% endif %}
{% if flash_deleted or flash_missing %}
  <script>setTimeout(function () { var el = document.getElementById("bty-flash"); if (el) el.remove(); }, 5000);</script>
{% endif %}

{# The live table of all machines, with a minimal inline add-by-MAC
   field in the header. Machines also auto-appear on first PXE
   contact; the inline Add just stages a row early. #}
<div class="card mb-3" id="machines-list">
    {# ``py-1`` + ``flex-nowrap`` keep the header a single tight row
       around the inline add-MAC form: default padding plus a wrap to a
       second line made the bar much taller than a table row. The input
       shrinks rather than wrapping on a narrow window. #}
    <div class="card-header bg-light fw-semibold d-flex justify-content-between align-items-center flex-nowrap gap-2 py-1">
        <span class="text-nowrap"><i class="bi bi-pc-display me-1"></i>Machines</span>
        {# Minimal add-by-MAC: MAC only. boot_mode defaults to the
           safe "ipxe-exit" (never a flash policy from here); hostname,
           image binding + policy are set on the detail page. The
           upsert handler creates the row with discovered_at=NULL; it
           flips to first-seen on the box's first PXE contact. #}
        <form id="add-machine-form" class="d-flex align-items-center gap-1 m-0" style="min-width: 0;"
              onsubmit="return submitAddMachine(event);">
            <input type="text" required class="form-control form-control-sm font-monospace"
                   id="add-mac" name="mac" style="max-width: 14rem; min-width: 0;"
                   pattern="^([0-9a-fA-F]{2}[:-]){5}[0-9a-fA-F]{2}$"
                   placeholder="aa:bb:cc:dd:ee:ff"
                   title="Stage a machine by MAC before it boots; boot mode defaults to 'ipxe-exit' (set image + mode on the detail page)">
            <button type="submit" class="btn btn-sm btn-primary flex-shrink-0 text-nowrap">
                <i class="bi bi-plus-lg me-1"></i>Add
            </button>
        </form>
    </div>
    {# Free-text search across MAC / hostname / image ref / last-seen
       IP. Submits via GET so the result URL is bookmarkable. Carries
       the active filter + sort + per_page through hidden inputs so a
       search inside a filtered/sorted view preserves the operator's
       view. #}
    <div class="card-body py-2 border-bottom">
        <form method="get" class="d-flex align-items-center gap-2 m-0">
            {% if active_filter %}<input type="hidden" name="filter" value="{{ active_filter }}">{% endif %}
            {% if sort.column != 'mac' %}<input type="hidden" name="sort" value="{{ sort.column }}">{% endif %}
            {% if sort.direction != 'asc' %}<input type="hidden" name="dir" value="{{ sort.direction }}">{% endif %}
            {% if page.per_page != per_page_choices[1] %}<input type="hidden" name="per_page" value="{{ page.per_page }}">{% endif %}
            <input type="search" name="q" value="{{ q or '' }}"
                   class="form-control form-control-sm" style="max-width: 24rem;"
                   placeholder="Search MAC / hostname / image / IP">
            <button type="submit" class="btn btn-sm btn-outline-secondary">
                <i class="bi bi-search me-1"></i>Search
            </button>
            {% if q %}
            <a href="?{% if active_filter %}filter={{ active_filter }}{% endif %}" class="btn btn-sm btn-link">Clear</a>
            <span class="text-muted small">Filtered by &ldquo;<code>{{ q }}</code>&rdquo;</span>
            {% endif %}
        </form>
    </div>
    <div class="table-responsive">
        <table class="table table-hover mb-0 align-middle">
            <thead class="table-light">
                {# Pin the narrow columns to width:1% + nowrap (as the
                   other tables do) so they stay tight and only MAC /
                   Image / Hostname absorb the slack -- otherwise the
                   header columns stretch evenly and look oversized. #}
                <tr>
                    {{ sort_header('MAC', 'mac', sort, preserved, 'style="white-space: nowrap;"') }}
                    {{ sort_header('Image', 'bty_image_ref', sort, preserved) }}
                    {{ sort_header('Boot', 'boot_mode', sort, preserved, 'style="width: 1%; white-space: nowrap;"') }}
                    {{ sort_header('Hostname', 'hostname', sort, preserved) }}
                    {{ sort_header('Last seen', 'last_seen_at', sort, preserved, 'style="width: 1%; white-space: nowrap;"') }}
                    {{ sort_header('Last flashed', 'last_flashed_at', sort, preserved, 'style="width: 1%; white-space: nowrap;"') }}
                    <th style="width: 1%;"></th>
                </tr>
            </thead>
            {# The tbody subscribes to the SSE stream so it auto-updates
               when the operator (or auto-discovery) mutates machines.
               The browser carries the bty-token cookie automatically;
               that is what authenticates the EventSource connection.
               ``sse-target`` opts in to the layout-level flash animation.

               When a server-side filter is active (``?filter=...``)
               the SSE wiring is dropped: the next ``machines-update``
               would replace the filtered tbody with the full
               un-filtered list, which is operator-confusing. The page
               becomes static under filter; reload to refresh. #}
            <tbody id="machines-tbody"
                   class="sse-target"
                   {% if sse_eligible %}
                   hx-ext="sse"
                   sse-connect="/events/machines"
                   sse-swap="machines-update"
                   {% endif %}>
                {% include "ui/_machines_tbody.html" %}
            </tbody>
        </table>
    </div>
    {{ pagination_footer(page, preserved, label='machines') }}
</div>

<script>
    function submitAddMachine(ev) {
        ev.preventDefault();
        var mac = document.getElementById("add-mac").value.trim().toLowerCase();
        var data = new FormData();
        // Minimal: MAC only. boot_mode defaults to the safe "ipxe-exit"
        // (never a flash policy from this inline form); hostname +
        // image binding + policy are set on the machine's detail page.
        data.append("hostname", "");
        data.append("boot_mode", "ipxe-exit");
        fetch("/ui/machines/" + encodeURIComponent(mac), {
            method: "POST",
            credentials: "same-origin",
            body: data,
        }).then(function (r) {
            if (!r.ok) throw new Error("HTTP " + r.status);
            window.location = "/ui/machines";
        }).catch(function (e) {
            alert("Add machine failed: " + e.message);
        });
        return false;
    }
</script>

{# Recent machine activity (discoveries, flashes, inventory posts). The
   "Activity" sub-nav anchor jumps here; always rendered (empty-state
   row when there's nothing yet). #}
{% with events=machine_events,
        title="Recent Events",
        link_to_full="/ui/events?subject_kind=machine",
        card_id="machines-activity" %}
{% include "ui/_events_card.html" %}
{% endwith %}
{% endblock %}