{% extends "ui/_layout.html" %}
{% 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>
    <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>
                    <th style="white-space: nowrap;">MAC</th>
                    <th>Image</th>
                    <th style="width: 1%; white-space: nowrap;">Boot</th>
                    <th>Hostname</th>
                    <th style="width: 1%; white-space: nowrap;">Last seen</th>
                    <th style="width: 1%; white-space: nowrap;">Last flashed</th>
                    <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 not active_filter %}
                   hx-ext="sse"
                   sse-connect="/events/machines"
                   sse-swap="machines-update"
                   {% endif %}>
                {% include "ui/_machines_tbody.html" %}
            </tbody>
        </table>
    </div>
</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 %}