{% extends "layout.html" %}
{% from "_partials/page_description.html" import page_description %}
{% block title %}{{ machine.mac }} - pixie{% endblock %}
{% block subnav %}
<div class="subnav-strip">
    <div class="container">
        <a href="/ui/machines" class="text-decoration-none">
            <i class="bi bi-arrow-left me-1"></i>Machines
        </a>
        <span class="text-muted">/</span>
        <code class="text-white-50">{{ machine.mac }}</code>
        <ul class="nav nav-pills ms-auto">
            <li class="nav-item"><a class="nav-link" href="#binding">Binding</a></li>
            <li class="nav-item"><a class="nav-link" href="#inventory">Inventory</a></li>
            <li class="nav-item"><a class="nav-link" href="#events">Events</a></li>
        </ul>
    </div>
</div>
{% endblock %}
{% block content %}
{{ page_description('pc-display-horizontal', 'Everything pixie knows about one target: telemetry, current binding, inventory the live env posts back, and events scoped to this MAC. Editing the binding changes what pixie serves on this target\'s next PXE; labels and inventory are stored independently of the binding.') }}
<div class="card shadow-sm mb-4">
    <div class="card-header bg-light d-flex align-items-center">
        <h2 class="h5 mb-0"><i class="bi bi-pc-display me-2"></i><code>{{ machine.mac }}</code></h2>
        <span class="ms-auto">
            {% if machine.boot_mode == 'nbdboot' %}
            <span class="badge text-bg-primary">
                <i class="bi bi-hdd-network me-1"></i>nbdboot
            </span>
            {% else %}
            <span class="badge text-bg-secondary">
                <i class="bi bi-box-arrow-right me-1"></i>{{ machine.boot_mode }}
            </span>
            {% endif %}
        </span>
    </div>
    <div class="card-body">
        <dl class="row mb-0">
            <dt class="col-sm-3 text-muted small">Image content sha</dt>
            <dd class="col-sm-9">
                {% if machine.image_content_sha256 %}
                <code>{{ machine.image_content_sha256 }}</code>
                {% else %}
                <span class="text-muted">(unbound)</span>
                {% endif %}
            </dd>
            <dt class="col-sm-3 text-muted small">Labels</dt>
            <dd class="col-sm-9">
                {# Labels are metadata (search / filter / grouping) and
                   have no effect on the plan render. Edit them here on
                   their own form; the bind form below does NOT touch
                   labels, so a boot-mode flip cannot clobber tags an
                   operator set up ahead of time. #}
                <form method="post"
                      action="/ui/machines/{{ machine.mac }}/labels/edit"
                      class="d-flex flex-wrap gap-2 align-items-start">
                    <input type="text" name="labels"
                           class="form-control form-control-sm font-monospace flex-grow-1"
                           style="max-width: 32rem;"
                           value="{{ machine.labels | join(', ') }}"
                           placeholder="rack-3, noisy, gmktec-g5"
                           aria-label="Comma-separated labels">
                    <button type="submit" class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-check2 me-1"></i>Save labels
                    </button>
                </form>
                <div class="form-text small text-muted mt-1">
                    Comma-separated. Alnum-leading; a-z / 0-9 / space /
                    <code>.</code> <code>_</code> <code>-</code>; max 64
                    chars per tag, 16 tags per machine. Blank clears.
                </div>
            </dd>
            <dt class="col-sm-3 text-muted small">Discovered at</dt>
            <dd class="col-sm-9 small text-muted">{{ machine.discovered_at | fmt_ts }}</dd>
            <dt class="col-sm-3 text-muted small">Last seen</dt>
            <dd class="col-sm-9 small text-muted" data-live="last-seen">{{ machine.last_seen_at | fmt_ts }}</dd>
            <dt class="col-sm-3 text-muted small">Last seen IP</dt>
            <dd class="col-sm-9 small" data-live="last-seen-ip">
                {% if machine.last_seen_ip %}<code>{{ machine.last_seen_ip }}</code>
                {% else %}<span class="text-muted">-</span>{% endif %}
            </dd>
        </dl>
    </div>
</div>

<div class="card shadow-sm mb-4" id="binding">
    <div class="card-header bg-light d-flex align-items-center">
        <h2 class="h5 mb-0"><i class="bi bi-pencil me-2"></i>Edit binding</h2>
        <span class="ms-auto small text-primary d-none" id="bind-dirty-hint">
            <i class="bi bi-dot"></i>Unsaved changes
        </span>
    </div>
    <div class="card-body">
        <form method="post" action="/ui/machines/bind" id="bind-form" class="d-flex flex-column gap-3">
            <input type="hidden" name="mac" value="{{ machine.mac }}">

            {# ---- Boot-mode radio-card picker ------------------------

               Six cards in a 3-across grid. The underlying
               ``<input type="radio">`` is visually hidden but keeps
               the form serialisation + keyboard accessibility that a
               plain click-a-card widget would drop. The label wraps
               both the radio and the visual card so anywhere on the
               card selects the mode. #}
            <div>
                <label class="form-label fw-semibold">Boot mode</label>
                <div class="row g-2 mode-picker" role="radiogroup" aria-label="Boot mode">
                    {% for mode_value, meta in boot_mode_meta %}
                    <div class="col-lg-4 col-sm-6">
                        <label class="mode-card d-block h-100 mb-0" data-mode="{{ mode_value }}">
                            <input type="radio" name="boot_mode" value="{{ mode_value }}"
                                   class="visually-hidden mode-radio"
                                   {% if machine.boot_mode == mode_value %}checked{% endif %}>
                            <div class="mode-card-body card h-100 border">
                                <div class="card-body p-3 d-flex flex-column">
                                    <div class="d-flex align-items-center mb-1">
                                        <i class="bi bi-{{ meta.icon }} me-2 text-primary" style="font-size: 1.15rem;"></i>
                                        <span class="fw-semibold">{{ meta.short }}</span>
                                        <span class="ms-auto mode-check text-primary" aria-hidden="true">
                                            <i class="bi bi-check-circle-fill"></i>
                                        </span>
                                    </div>
                                    <div class="small text-muted flex-grow-1">{{ meta.desc }}</div>
                                    <div class="small text-body-tertiary mt-2 font-monospace">
                                        {{ mode_value }}
                                    </div>
                                </div>
                            </div>
                        </label>
                    </div>
                    {% endfor %}
                </div>
            </div>

            <div class="row g-3">
                {# ---- Image picker --------------------------------- #}
                <div class="col-md-6"
                     data-policy-relevant="pixie-flash-once pixie-flash-always nbdboot">
                    <label for="image_content_sha256" class="form-label fw-semibold">
                        Image
                        <span class="policy-usage small text-muted fw-normal ms-1"></span>
                    </label>
                    {% set entry_shas = bindable_entries | map(attribute='content_sha256') | list %}
                    <select id="image_content_sha256" name="image_content_sha256"
                            class="form-select" data-nbdboot-gate="1">
                        <option value="" {% if not machine.image_content_sha256 %}selected{% endif %}>
                            (unbound)
                        </option>
                        {% for e in bindable_entries %}
                        {# ``data-nbdboot-ready`` mirrors ``e.fetched``: bytes
                           on disk means pixie can serve the image over NBD
                           for nbdboot. The inline script disables options
                           whose value is "false" when ``boot_mode=nbdboot``
                           so an operator can't accidentally bind an
                           unfetched image for a nbdboot target. Flash modes
                           leave every option enabled (the flash pipeline
                           will refuse a missing blob at plan time). #}
                        <option value="{{ e.content_sha256 }}"
                                data-nbdboot-ready="{{ 'true' if e.fetched else 'false' }}"
                                data-image-name="{{ e.name }}"
                                {% if machine.image_content_sha256 == e.content_sha256 %}selected{% endif %}>
                            {{ e.name }}{% if e.arch %} ({{ e.arch }}){% endif %}{% if not e.fetched %} -- not fetched{% endif %}
                        </option>
                        {% endfor %}
                        {# Fallback: keep a bound sha visible even if its
                           catalog entry was deleted, so an operator can see
                           and clear the stale binding rather than losing it
                           silently. #}
                        {% if machine.image_content_sha256 and machine.image_content_sha256 not in entry_shas %}
                        <option value="{{ machine.image_content_sha256 }}" selected>
                            {{ machine.image_content_sha256 }} (no matching catalog entry)
                        </option>
                        {% endif %}
                    </select>
                    {% if not bindable_entries %}
                    <div class="form-text text-muted">
                        No fetched images yet. <a href="/ui/catalog">Add and fetch one on the Catalog page.</a>
                    </div>
                    {% endif %}
                </div>

                {# ---- Target disk picker --------------------------- #}
                <div class="col-md-6" data-policy-relevant="pixie-flash-once pixie-flash-always">
                    <label for="target_disk_serial" class="form-label fw-semibold">
                        Target disk
                        <span class="policy-usage small text-muted fw-normal ms-1"></span>
                    </label>
                    {% set disks = (machine.inventory or {}).get("disks") or [] %}
                    {% if disks %}
                    <select id="target_disk_serial" name="target_disk_serial" class="form-select">
                        <option value="">- none picked (flash will refuse) -</option>
                        {% for d in disks %}
                        {% set serial = d.get("serial") or "" %}
                        {% if serial %}
                        <option value="{{ serial }}"
                                {% if serial == machine.target_disk_serial %}selected{% endif %}>
                            {{ d.get("path") or "?" }} | {{ d.get("size") or "?" }}{% if d.get("model") %} | {{ d.get("model") }}{% endif %} | serial: {{ serial }}
                        </option>
                        {% else %}
                        <option disabled>
                            {{ d.get("path") or "?" }} | (no serial; cannot flash-target)
                        </option>
                        {% endif %}
                        {% endfor %}
                    </select>
                    <div class="form-text">
                        The live env matches this SERIAL against the current disks
                        at flash time; a swapped or renumbered drive refuses the
                        flash rather than risking the wrong disk.
                    </div>
                    {% else %}
                    <input type="hidden" name="target_disk_serial"
                           value="{{ machine.target_disk_serial or '' }}">
                    <div class="alert alert-warning small mb-0 py-2">
                        <i class="bi bi-info-circle me-1"></i>
                        No inventory on file yet. Pick
                        <span class="fw-semibold">Discover inventory</span> above,
                        power-cycle this target, and its disks will populate here.
                    </div>
                    {% endif %}
                </div>
            </div>

            {# ---- Per-machine extra kernel cmdline -------------------

               Overrides the deploy-wide PIXIE_LIVE_ENV_EXTRA_CMDLINE
               for THIS machine. Blank falls back to the global; a
               non-blank value fully replaces (does not concatenate)
               so an operator can pin a hardware quirk to one target
               without every other machine seeing the same tokens.
               Consumed by the nbdboot + pixie-live-env templates. #}
            <div data-policy-relevant="nbdboot pixie-flash-once pixie-flash-always pixie-inventory pixie-tui">
                <label for="extra_cmdline" class="form-label fw-semibold">
                    Extra kernel cmdline
                    <span class="policy-usage small text-muted fw-normal ms-1"></span>
                </label>
                <input type="text" id="extra_cmdline" name="extra_cmdline"
                       class="form-control font-monospace"
                       value="{{ machine.extra_cmdline or '' }}"
                       placeholder="fall back to global default"
                       list="extra-cmdline-suggestions"
                       maxlength="256">
                <datalist id="extra-cmdline-suggestions">
                    <option value="pci=realloc=on,nocrs">
                    <option value="intel_iommu=off">
                    <option value="pci=nommconf">
                </datalist>
                <div class="form-text">
                    Tokens appended verbatim to the kernel cmdline for
                    <em>this machine only</em>. A non-blank value fully
                    overrides the deploy-wide
                    <code>PIXIE_LIVE_ENV_EXTRA_CMDLINE</code>. Blank
                    falls back to the global (currently effective:
                    {% if global_live_env_extra_cmdline %}
                    <code>{{ global_live_env_extra_cmdline }}</code>
                    {% else %}<em>none</em>{% endif %}).
                    Whitespace-separated; single line. Known-good values
                    per hardware in <a href="https://github.com/safl/pixie/blob/main/docs/src/hardware-quirks.md" target="_blank" rel="noreferrer">docs/hardware-quirks.md</a>.
                </div>
            </div>

            {# ---- Preview panel --------------------------------------

               Plain-English description of what will happen on the
               next PXE from this target. Updated by JS on any input
               change. Sits ABOVE the flash-guard hint so an operator
               scanning the form always knows what "Save" will do
               before they're asked whether they can Save. #}
            <div class="border rounded p-3 bg-body-tertiary" id="bind-preview">
                <div class="small text-muted mb-1">
                    <i class="bi bi-eye me-1"></i>On the next PXE from this target
                </div>
                <div class="preview-body">-</div>
            </div>

            {# ---- Flash-mode guard hint ------------------------------

               Client-side echo of the server-side 422 guard: the JS
               disables Save + surfaces this hint when the picked
               boot_mode is pixie-flash-{once,always} AND either no
               inventory is on file OR no target_disk_serial is
               picked. The server rejects the same combination
               regardless. #}
            <div id="flash-guard-hint"
                 class="alert alert-warning small py-2 mb-0 d-none"
                 role="alert">
                <i class="bi bi-exclamation-triangle me-1"></i>
                <span class="hint-body"></span>
            </div>

            <div class="d-flex align-items-center gap-3">
                <button type="submit" id="save-binding" class="btn btn-primary" disabled>
                    <i class="bi bi-check2 me-1"></i>Save changes
                </button>
                <span class="small text-muted" id="bind-clean-hint">
                    No changes to save.
                </span>
            </div>
        </form>
    </div>
</div>

<style>
/* ---- Bind form: radio-card boot-mode picker ------------------
 *
 * A card grid backed by a hidden ``<input type=radio>`` per card:
 * click anywhere selects, keyboard nav works via the underlying
 * radio group, and the form serialises the pick the same way a
 * plain <select> would.
 *
 * :has() drives the checked-state styling on browsers that support
 * it (Chrome 105+, Safari 15.4+, Firefox 121+). Older browsers
 * fall through to the .mode-card-selected class the JS below
 * toggles. Both selectors are OR'd in every rule below. */
.mode-card { cursor: pointer; }
.mode-card .mode-card-body {
    transition: border-color 120ms, box-shadow 120ms, background-color 120ms;
}
.mode-card:hover .mode-card-body {
    border-color: var(--bs-primary);
    box-shadow: 0 0.125rem 0.35rem rgba(13, 110, 253, 0.10);
}
.mode-card .mode-check { opacity: 0; transition: opacity 120ms; }
.mode-card:has(.mode-radio:checked) .mode-card-body,
.mode-card.mode-card-selected .mode-card-body {
    border-color: var(--bs-primary);
    border-width: 2px;
    background-color: rgba(13, 110, 253, 0.04);
}
.mode-card:has(.mode-radio:checked) .mode-check,
.mode-card.mode-card-selected .mode-check { opacity: 1; }
/* The underlying radio is visually-hidden but still receives keyboard
 * focus; ring the visible card body when :focus-visible fires. */
.mode-card .mode-radio:focus-visible + .mode-card-body {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}
</style>

<div class="card shadow-sm mb-4" id="inventory">
    <div class="card-header bg-light d-flex align-items-center">
        <h2 class="h5 mb-0"><i class="bi bi-hdd-stack me-2"></i>Inventory</h2>
        {% if machine.inventory %}
        <span class="text-muted small ms-auto">Recorded at {{ machine.inventory_at | fmt_ts }}</span>
        {% endif %}
    </div>
    <div class="card-body">
        <p class="text-muted small">
            Posted by the live env's <code>pixie</code> CLI on boot via
            <code>POST /pxe/{{ machine.mac }}/inventory</code>. The blob is stored verbatim;
            fields below are a best-effort render of the shape emitted by
            <code>lsblk</code> + <code>lshw</code>.
        </p>
        {% if machine.inventory %}
        {# Best-effort render of the machine hardware summary. The
           live env's ``pixie`` CLI writes whichever sections it can
           enumerate; each block below is guarded so a partial payload
           still renders the sections that DID come through. Raw lshw
           JSON sits collapsed at the bottom as the always-available
           fallback for a section the summary render doesn't cover. #}
        {% set system = machine.inventory.get("system") or {} %}
        {% if system %}
        <h3 class="h6 mt-3">System</h3>
        <dl class="row small mb-3">
            {% if system.get("vendor") %}
            <dt class="col-sm-3 text-muted">Vendor</dt>
            <dd class="col-sm-9">{{ system.get("vendor") }}</dd>
            {% endif %}
            {% if system.get("model") %}
            <dt class="col-sm-3 text-muted">Model</dt>
            <dd class="col-sm-9">{{ system.get("model") }}</dd>
            {% endif %}
            {% if system.get("serial") %}
            <dt class="col-sm-3 text-muted">Serial</dt>
            <dd class="col-sm-9 font-monospace">{{ system.get("serial") }}</dd>
            {% endif %}
            {% if system.get("firmware") %}
            <dt class="col-sm-3 text-muted">Firmware</dt>
            <dd class="col-sm-9 small">{{ system.get("firmware") }}</dd>
            {% endif %}
        </dl>
        {% endif %}

        {% set cpu = machine.inventory.get("cpu") or {} %}
        {% if cpu %}
        <h3 class="h6 mt-3">CPU</h3>
        <dl class="row small mb-3">
            {% if cpu.get("model") %}
            <dt class="col-sm-3 text-muted">Model</dt>
            <dd class="col-sm-9">{{ cpu.get("model") }}</dd>
            {% endif %}
            {% if cpu.get("cores") %}
            <dt class="col-sm-3 text-muted">Cores</dt>
            <dd class="col-sm-9">{{ cpu.get("cores") }}{% if cpu.get("threads") %} ({{ cpu.get("threads") }} threads){% endif %}</dd>
            {% endif %}
            {% if cpu.get("arch") %}
            <dt class="col-sm-3 text-muted">Arch</dt>
            <dd class="col-sm-9"><code>{{ cpu.get("arch") }}</code></dd>
            {% endif %}
        </dl>
        {% endif %}

        {% set memory = machine.inventory.get("memory") or {} %}
        {% if memory %}
        <h3 class="h6 mt-3">Memory</h3>
        <dl class="row small mb-3">
            {% if memory.get("total") %}
            <dt class="col-sm-3 text-muted">Total</dt>
            <dd class="col-sm-9 font-monospace">{{ memory.get("total") }}</dd>
            {% endif %}
            {% if memory.get("modules") %}
            <dt class="col-sm-3 text-muted">Modules</dt>
            <dd class="col-sm-9">{{ memory.get("modules") }}</dd>
            {% endif %}
        </dl>
        {% endif %}

        {% set nics = machine.inventory.get("nics") or [] %}
        {% if nics %}
        <h3 class="h6 mt-3">Network ({{ nics|length }})</h3>
        <div class="table-responsive mb-3">
            <table class="table table-sm table-hover align-middle mb-0">
                <thead>
                    <tr>
                        <th scope="col">Interface</th>
                        <th scope="col">MAC</th>
                        <th scope="col">Vendor / Driver</th>
                        <th scope="col">Link</th>
                    </tr>
                </thead>
                <tbody>
                    {% for n in nics %}
                    <tr>
                        <td class="font-monospace small">{{ n.get("name") or "-" }}</td>
                        <td><code>{{ n.get("mac") or "-" }}</code></td>
                        <td class="small">
                            {{ n.get("vendor") or "-" }}
                            {% if n.get("driver") %}<br><span class="text-muted">{{ n.get("driver") }}</span>{% endif %}
                        </td>
                        <td class="small">
                            {% if n.get("speed") %}<code>{{ n.get("speed") }}</code>{% else %}-{% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% endif %}

        {% set disks = machine.inventory.get("disks") or [] %}
        {% if disks %}
        <h3 class="h6 mt-3">Disks ({{ disks|length }})</h3>
        <div class="table-responsive">
            <table class="table table-sm table-hover align-middle">
                <thead>
                    <tr>
                        <th scope="col">Path</th>
                        <th scope="col">Size</th>
                        <th scope="col">Vendor / Model</th>
                        <th scope="col">Serial</th>
                        <th scope="col">Transport</th>
                    </tr>
                </thead>
                <tbody>
                    {% for d in disks %}
                    <tr>
                        <td><code>{{ d.get("path") or "-" }}</code></td>
                        <td class="font-monospace small">{{ d.get("size") or "-" }}</td>
                        <td>
                            {{ d.get("vendor") or "-" }}
                            {% if d.get("model") %}<br><span class="text-muted small">{{ d.get("model") }}</span>{% endif %}
                        </td>
                        <td class="small"><code>{{ d.get("serial") or "-" }}</code></td>
                        <td class="small">{{ d.get("tran") or "-" }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <p class="text-muted small mb-0">No disks in the posted inventory.</p>
        {% endif %}

        {% if machine.inventory.get("lshw") %}
        <details class="mt-3">
            <summary class="text-muted small">Raw <code>lshw</code> JSON</summary>
            <pre class="bg-light border rounded p-3 mt-2 small" style="max-height: 30rem; overflow: auto;">{{ machine.inventory.get("lshw") | tojson(indent=2) }}</pre>
        </details>
        {% endif %}
        {% else %}
        <p class="text-muted mb-0">
            <i class="bi bi-inbox me-1"></i>
            No inventory has been posted for this machine yet. The live env's
            <code>pixie</code> CLI posts one on boot; check the target's PXE
            reach to pixie.
        </p>
        {% endif %}
    </div>
</div>

<div class="card shadow-sm" id="events">
    <div class="card-header bg-light d-flex align-items-center">
        <h2 class="h5 mb-0"><i class="bi bi-clock-history me-2"></i>Recent events</h2>
        <a href="/ui/events" class="ms-auto small">All events</a>
    </div>
    {% if events %}
    <div class="table-responsive">
        <table class="table table-sm table-hover align-middle mb-0">
            <thead>
                <tr>
                    <th scope="col">When</th>
                    <th scope="col">Kind</th>
                    <th scope="col">Summary</th>
                </tr>
            </thead>
            <tbody>
                {% for e in events %}
                <tr>
                    <td class="small text-muted text-nowrap">{{ e.ts | fmt_ts }}</td>
                    <td><code>{{ e.kind }}</code></td>
                    <td>{{ e.summary or "" }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="card-body">
        <p class="text-muted small mb-0">No events recorded for this machine yet.</p>
    </div>
    {% endif %}
</div>

<script>
(function () {
    // ---- Bind-form controller -------------------------------------
    //
    // Coordinates four independent behaviours over the same form:
    //   1. Radio-card checked-state fallback for browsers without
    //      :has() support (Firefox < 121 mostly).
    //   2. Mode-relevance dimming: image + target-disk pickers get
    //      an "opacity-50" + "(not used by <mode>)" label when the
    //      picked mode ignores them. The pick VALUE survives so a
    //      sha calibrated under ipxe-exit stays around when the
    //      operator flips to nbdboot.
    //   3. Nbdboot-ready gate on the image picker: only fetched
    //      catalog entries are selectable under boot_mode=nbdboot
    //      (pixie needs the bytes on disk to serve them over NBD).
    //   4. Flash-mode guard: pixie-flash-{once,always} refuses to
    //      Save without both inventory + a picked target disk. The
    //      server enforces the same constraint with a 422; the
    //      client-side mirror surfaces the reason BEFORE the click.
    //   5. Dirty tracking on the Save button: enabled iff any field
    //      differs from its initial value at page-load, cleared by
    //      submitting the form.
    //   6. Live "preview" panel: plain-English narration of what
    //      the target will do on its next PXE given the current
    //      picks. Same signal the operator would read from
    //      /pxe/<mac>/plan, without the JSON round-trip.
    const form = document.getElementById("bind-form");
    if (!form) return;
    const modeInputs = form.querySelectorAll('input[name="boot_mode"]');
    if (!modeInputs.length) return;
    const modeCards = form.querySelectorAll(".mode-card");
    const targets = form.querySelectorAll("[data-policy-relevant]");
    const imgSelect = form.querySelector("select[data-nbdboot-gate]");
    const targetSelect = form.querySelector("#target_disk_serial");
    const hasInventoryDisks = !!(
        targetSelect && targetSelect.tagName === "SELECT"
        && targetSelect.querySelectorAll('option:not([value=""]):not([disabled])').length > 0
    );
    const extraCmdlineInput = form.querySelector("#extra_cmdline");
    const saveBtn = form.querySelector("#save-binding");
    const flashHint = form.querySelector("#flash-guard-hint");
    const dirtyHint = document.getElementById("bind-dirty-hint");
    const cleanHint = document.getElementById("bind-clean-hint");
    const previewBody = form.querySelector("#bind-preview .preview-body");

    // Human-readable descriptions for the preview panel. Mirrors the
    // BOOT_MODE_META table in pixie.machines._store but pared to a
    // sentence-per-mode that describes the OUTCOME on the next PXE,
    // not the mode definition (the cards themselves cover that).
    const MODE_PREVIEWS = {
        "ipxe-exit":          "Pixie exits the iPXE chain. The BIOS boot order picks the next bootable device on this target.",
        "pixie-inventory":    "Pixie boots its live env; the pixie CLI posts disk + NIC inventory back, then the target reboots to firmware.",
        "pixie-tui":          "Pixie boots its live env into an interactive TUI. An operator drives the wizard on the target's console.",
        "pixie-flash-once":   "Pixie boots its live env, which writes {IMAGE} to disk (serial: {DISK}), then the target reboots to firmware.",
        "pixie-flash-always": "Pixie boots its live env, which re-writes {IMAGE} to disk (serial: {DISK}) on every PXE. Any local changes are lost.",
        "nbdboot":            "Pixie streams {IMAGE} over NBD; root is an overlay-on-tmpfs of the image. Nothing writes back to the source.",
    };
    const FLASH_MODES = new Set(["pixie-flash-once", "pixie-flash-always"]);
    const NBDBOOT = "nbdboot";
    const IMAGE_MODES = new Set([NBDBOOT, "pixie-flash-once", "pixie-flash-always"]);

    // Snapshot of the initial pick per field, taken at DOMContentLoaded.
    // A field is DIRTY iff its current value differs from this snapshot.
    // The form submit clears dirty (the page re-renders anyway).
    const initial = {
        boot_mode: pickedMode() || "",
        image_content_sha256: imgSelect ? imgSelect.value : "",
        target_disk_serial: (targetSelect && targetSelect.tagName === "SELECT") ? targetSelect.value : "",
        extra_cmdline: extraCmdlineInput ? extraCmdlineInput.value : "",
    };

    function pickedMode() {
        for (const r of modeInputs) if (r.checked) return r.value;
        return "";
    }

    function pickedImageName() {
        if (!imgSelect) return "";
        const opt = imgSelect.selectedOptions[0];
        if (!opt) return "";
        return opt.getAttribute("data-image-name") || opt.value || "";
    }

    function pickedDiskLabel() {
        if (!targetSelect || targetSelect.tagName !== "SELECT") return "";
        const opt = targetSelect.selectedOptions[0];
        if (!opt || !opt.value) return "";
        return opt.value;
    }

    // 1. Radio-card :has() fallback ---------------------------------
    function syncCardSelectedClass() {
        modeCards.forEach((card) => {
            const radio = card.querySelector(".mode-radio");
            card.classList.toggle("mode-card-selected", !!(radio && radio.checked));
        });
    }

    // 2. Mode-relevance dimming -------------------------------------
    function applyUsage() {
        const current = pickedMode();
        targets.forEach((el) => {
            const allowed = (el.getAttribute("data-policy-relevant") || "").split(/\s+/);
            const consumed = allowed.includes(current);
            el.classList.toggle("opacity-50", !consumed);
            const note = el.querySelector(".policy-usage");
            if (note) note.textContent = consumed ? "" : "(not used by this mode)";
            // ``disabled`` on the underlying control keeps a stray
            // click or tab from landing on a value the current mode
            // ignores. The submit handler re-enables everything so
            // the value survives a mode flip when POSTed.
            el.querySelectorAll("input, select, textarea").forEach((ctrl) => {
                ctrl.disabled = !consumed;
            });
        });
    }

    // 3. Nbdboot-ready image gate -----------------------------------
    function applyNbdbootGate() {
        if (!imgSelect) return;
        const isNbdboot = pickedMode() === NBDBOOT;
        imgSelect.querySelectorAll("option[data-nbdboot-ready]").forEach((opt) => {
            const ready = opt.getAttribute("data-nbdboot-ready") === "true";
            opt.disabled = isNbdboot && !ready;
        });
        if (imgSelect.selectedOptions.length && imgSelect.selectedOptions[0].disabled) {
            imgSelect.value = "";
        }
    }

    // 4. Flash-mode guard -------------------------------------------
    function applyFlashGuard() {
        if (!flashHint) return false;
        const isFlash = FLASH_MODES.has(pickedMode());
        let msg = "";
        if (isFlash) {
            if (!hasInventoryDisks) {
                msg = "This mode flashes a specific disk, and pixie hasn't seen this target's disks yet. Pick Discover inventory above, power-cycle, then come back.";
            } else if (!targetSelect || !targetSelect.value) {
                msg = "Pick which disk to flash. Pixie matches by serial at flash time; a swapped drive refuses the flash rather than risking the wrong disk.";
            }
        }
        const body = flashHint.querySelector(".hint-body");
        if (msg) {
            if (body) body.textContent = msg;
            flashHint.classList.remove("d-none");
            return true; // guard tripped -> block Save
        }
        flashHint.classList.add("d-none");
        return false;
    }

    // 5. Dirty tracking + Save button state -------------------------
    function isDirty() {
        if (pickedMode() !== initial.boot_mode) return true;
        if (imgSelect && imgSelect.value !== initial.image_content_sha256) return true;
        if (targetSelect && targetSelect.tagName === "SELECT"
            && targetSelect.value !== initial.target_disk_serial) return true;
        if (extraCmdlineInput && extraCmdlineInput.value !== initial.extra_cmdline) return true;
        return false;
    }

    function applySaveState(flashGuardBlocked) {
        if (!saveBtn) return;
        const dirty = isDirty();
        // Guard-blocked ALWAYS wins over dirty (safety > convenience).
        saveBtn.disabled = flashGuardBlocked || !dirty;
        if (dirtyHint) dirtyHint.classList.toggle("d-none", !dirty);
        if (cleanHint) cleanHint.classList.toggle("d-none", dirty);
    }

    // 6. Preview panel narration ------------------------------------
    function renderPreview() {
        if (!previewBody) return;
        const mode = pickedMode();
        if (!mode) {
            previewBody.textContent = "Pick a boot mode above to see what happens.";
            return;
        }
        let text = MODE_PREVIEWS[mode] || mode;
        const imgName = pickedImageName();
        const diskLabel = pickedDiskLabel();
        if (IMAGE_MODES.has(mode)) {
            if (!imgName) {
                previewBody.innerHTML = `<span class="text-warning-emphasis"><i class="bi bi-exclamation-circle me-1"></i>Pick an image above; this mode needs one.</span>`;
                return;
            }
            text = text.replace("{IMAGE}", `<code>${imgName}</code>`);
        }
        if (FLASH_MODES.has(mode)) {
            text = text.replace("{DISK}", diskLabel ? `<code>${diskLabel}</code>` : "-not picked-");
        }
        previewBody.innerHTML = text;
    }

    function refreshAll() {
        syncCardSelectedClass();
        applyUsage();
        applyNbdbootGate();
        const blocked = applyFlashGuard();
        renderPreview();
        applySaveState(blocked);
    }

    // Wire events.
    modeInputs.forEach((r) => r.addEventListener("change", refreshAll));
    if (imgSelect) imgSelect.addEventListener("change", refreshAll);
    if (targetSelect) targetSelect.addEventListener("change", refreshAll);
    if (extraCmdlineInput) extraCmdlineInput.addEventListener("input", refreshAll);

    // Re-enable every mode-gated control at submit time so the
    // browser POSTs the current values even for fields the current
    // mode does not consume, matching the server's "config is
    // GENERAL, mode picks what to consume" contract.
    form.addEventListener("submit", () => {
        targets.forEach((el) => {
            el.querySelectorAll("input, select, textarea").forEach((ctrl) => {
                ctrl.disabled = false;
            });
        });
    });

    refreshAll();
})();

// Live poll: refresh the ``Last seen`` / ``Last seen IP`` cells
// every 5 s so an operator watching a target boot into the live
// env sees the ``last_seen_at`` bump when the initrd's iPXE
// chain hits /pxe/<mac>. Same JSON endpoint the machines list
// poll uses so the two views stay in lockstep.
(function () {
    const MAC = "{{ machine.mac }}";
    async function poll() {
        try {
            const r = await fetch("/ui/machines-live.json", {credentials: "same-origin"});
            if (!r.ok) return;
            const rows = await r.json();
            const d = rows[MAC];
            if (!d) return;
            const seen = document.querySelector('[data-live="last-seen"]');
            if (seen) seen.textContent = d.last_seen_at_display || d.last_seen_at || "-";
            const ip = document.querySelector('[data-live="last-seen-ip"]');
            if (ip) {
                ip.innerHTML = d.last_seen_ip
                    ? `<code>${d.last_seen_ip}</code>`
                    : `<span class="text-muted">-</span>`;
            }
        } catch (e) { /* swallow */ }
    }
    setInterval(poll, 5000);
})();
</script>
{% endblock %}