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

{% block subnav %}
{# Left: in-page jump links (List | Activity).
   Right: the inline add-by-MAC action, moved here from the card
   header so the page-level "create a new machine" action lives in
   the page chrome and the card-body stays focused on the data
   table. The form's id + JS submit are unchanged so the existing
   upsert handler + the inline-add tests keep working. #}
<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>
        <form id="add-machine-form"
              class="subnav-actions d-flex align-items-center gap-1 m-0 ms-auto"
              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 machine by MAC
            </button>
        </form>
    </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">
    {# Card header: "Machines | Filter: <input> <search>" flexes
       to fill the left side; pagination sits on the right. The
       Add-MAC action moved into the subnav strip; this card
       stays focused on the data view. #}
    <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 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[0] %}<input type="hidden" name="per_page" value="{{ page.per_page }}">{% endif %}
            <span class="text-nowrap"><i class="bi bi-pc-display me-1"></i>Machines</span>
            <span class="vr"></span>
            <label for="machines-q" class="text-nowrap text-muted small mb-0">Filter:</label>
            <input type="search" name="q" id="machines-q" value="{{ q or '' }}"
                   class="form-control form-control-sm flex-grow-1"
                   placeholder="MAC / label / image / IP (any field, substring)">
            <button type="submit" class="btn btn-sm btn-outline-secondary" title="Search">
                <i class="bi bi-search"></i>
            </button>
            {% if q %}
            <a href="?{% if active_filter %}filter={{ active_filter }}{% endif %}" class="btn btn-sm btn-link text-nowrap">Clear</a>
            {% endif %}
        </form>
        {{ pagination_inline(page, preserved, label='machines') }}
    </div>
    <div class="table-responsive">
        <table class="table table-striped table-hover mb-0 align-middle">
            <thead class="table-light">
                {# Column order is identity (MAC, Labels) -> configuration
                   (Image, Boot) -> timeline (Last seen, Last IP, Last
                   flashed) -> actions. Narrow columns get width:1% +
                   nowrap so they stay tight and only MAC / Labels /
                   Image absorb the slack. Labels is unsortable -- a
                   machine carries a SET of tags, "sort by labels" has
                   no natural meaning when each row has several. #}
                <tr>
                    {{ sort_header('MAC', 'mac', sort, preserved, 'style="white-space: nowrap;"') }}
                    <th>Labels</th>
                    {{ sort_header('Image', 'bty_image_ref', sort, preserved) }}
                    {{ sort_header('Boot', 'boot_mode', sort, preserved, 'style="width: 1%; white-space: nowrap;"') }}
                    {{ sort_header('Last seen', 'last_seen_at', sort, preserved, 'style="width: 1%; white-space: nowrap;"') }}
                    {{ sort_header('Last IP', 'last_seen_ip', 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>
</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); labels +
        // image binding + policy are set on the machine's detail page.
        data.append("labels", "");
        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="Last " + recent_events_limit|string + " Events",
        link_to_full="/ui/events?q=machine",
        card_id="machines-activity" %}
{% include "ui/_events_card.html" %}
{% endwith %}
{% endblock %}