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

            {# ---- Overlay profile (nbdboot only) --------------------

               A profile name maps to a per-machine qcow2 kept on
               pixie's data volume; picking one flips this machine
               from ephemeral (writes vanish on reboot) to persistent
               (writes survive on the qcow2). Blank means ephemeral.
               ``__new`` reveals a text input for a fresh profile name;
               the bind handler on the server merges the two form
               fields back into a single ``overlay_profile`` value. #}
            <div data-policy-relevant="nbdboot">
                <label for="overlay_profile" class="form-label fw-semibold">
                    Overlay profile
                    <span class="policy-usage small text-muted fw-normal ms-1"></span>
                </label>
                <div class="d-flex gap-2 align-items-start flex-wrap">
                    <select id="overlay_profile" name="overlay_profile"
                            class="form-select flex-grow-1" style="min-width: 14rem;">
                        <option value=""
                                {% if not machine.overlay_profile %}selected{% endif %}>
                            Ephemeral (no persist)
                        </option>
                        {% for ov in overlay_profiles %}
                        <option value="{{ ov.profile }}"
                                {% if machine.overlay_profile == ov.profile %}selected{% endif %}>
                            {{ ov.profile }}
                        </option>
                        {% endfor %}
                        {# Fallback: if the machine is bound to a profile
                           whose overlay row got GC'd, keep the value
                           visible + selected so the operator can clear
                           or rebind it. #}
                        {% set known_profiles = overlay_profiles | map(attribute='profile') | list %}
                        {% if machine.overlay_profile and machine.overlay_profile not in known_profiles %}
                        <option value="{{ machine.overlay_profile }}" selected>
                            {{ machine.overlay_profile }} (no qcow2 yet)
                        </option>
                        {% endif %}
                        <option value="__new">+ New profile...</option>
                    </select>
                    <input type="text" id="overlay_profile_new" name="overlay_profile_new"
                           class="form-control font-monospace d-none"
                           style="max-width: 16rem;"
                           placeholder="new profile name"
                           pattern="^[A-Za-z0-9][A-Za-z0-9._\-]{0,63}$"
                           title="Alphanumeric-leading; a-z / A-Z / 0-9 / . _ - (max 64 chars)">
                    {% if machine.overlay_profile and machine.image_content_sha256 %}
                    <form method="post" style="display:inline;"
                          action="/ui/machines/{{ machine.mac }}/overlay/reset"
                          onsubmit="return confirm('Reset overlay {{ machine.overlay_profile }} for {{ machine.mac }}? The qcow2 file will be deleted; the next boot lazy-creates a fresh overlay from the base image. Any state in the current overlay is lost.');">
                        <input type="hidden" name="image_sha" value="{{ machine.image_content_sha256 }}">
                        <input type="hidden" name="profile" value="{{ machine.overlay_profile }}">
                        <button type="submit" class="btn btn-outline-danger flex-shrink-0"
                                title="Delete the qcow2 for this profile; next boot starts fresh.">
                            <i class="bi bi-arrow-counterclockwise me-1"></i>Reset
                        </button>
                    </form>
                    {% endif %}
                </div>
                <div class="form-text">
                    Blank = ephemeral tmpfs (writes vanish on reboot;
                    original nbdboot behaviour). Named = qcow2 kept at
                    <code>data/overlays/&lt;mac&gt;/&lt;image_sha&gt;/&lt;profile&gt;.qcow2</code>
                    on pixie's data volume with
                    <code>backing_file=&lt;base blob&gt;</code>. Multiple
                    profiles per (machine, image) can coexist; different
                    machines are independent. See
                    <a href="https://github.com/safl/pixie/blob/main/docs/src/boot-modes.md" target="_blank" rel="noreferrer">boot-modes docs</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">{{ initial_bind_preview }}</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
           raw payload posted by the live env's ``pixie`` CLI is
           ``{"lshw": <lshw -json>, "disks": [<lsblk rows>]}``; the
           ``inv`` context var (built by
           ``pixie.web._inventory.normalise_inventory`` at render
           time) walks the lshw tree into the system/cpu/memory/nics
           shape rendered below. Each block 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 anything the summary
           render doesn't cover. #}
        {% set system = inv.system %}
        {% 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") }}
                {% if system.get("firmware_vendor") %}<span class="text-muted">({{ system.get("firmware_vendor") }})</span>{% endif %}
            </dd>
            {% endif %}
        </dl>
        {% endif %}

        {% set cpu = inv.cpu %}
        {% if cpu.sockets %}
        <h3 class="h6 mt-3">CPU</h3>
        {% for socket in cpu.sockets %}
        <div class="border rounded p-3 mb-2 bg-light-subtle">
            <div class="d-flex align-items-center flex-wrap gap-2 mb-2">
                <span class="fw-semibold">
                    {{ socket.model or "Unknown CPU" }}{% if socket.mhz_current %} @ {{ socket.mhz_current | humanize_hz }}{% endif %}
                </span>
                {% if socket.arch %}<span class="badge text-bg-secondary">{{ socket.arch }}</span>{% endif %}
                {% if cpu.sockets|length > 1 %}<span class="badge text-bg-light border">Socket {{ socket.slot or loop.index0 }}</span>{% endif %}
            </div>
            <div class="row text-center">
                <div class="col-6 col-md-3">
                    <div class="display-6 lh-1">{{ socket.cores or "-" }}</div>
                    <div class="small text-muted">physical cores</div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="display-6 lh-1 text-primary">{{ socket.threads or "-" }}</div>
                    <div class="small text-muted">logical threads</div>
                </div>
                {% if socket.mhz_max %}
                <div class="col-6 col-md-3 mt-3 mt-md-0">
                    <div class="fs-4 lh-1">{{ socket.mhz_max | humanize_hz }}</div>
                    <div class="small text-muted">max clock</div>
                </div>
                {% endif %}
                {% if socket.vendor %}
                <div class="col-6 col-md-3 mt-3 mt-md-0">
                    <div class="fs-6 lh-1 text-muted">{{ socket.vendor }}</div>
                    <div class="small text-muted">vendor</div>
                </div>
                {% endif %}
            </div>
        </div>
        {% endfor %}
        {% if cpu.sockets|length > 1 and cpu.total_cores %}
        <p class="small text-muted">{{ cpu.sockets|length }} sockets, {{ cpu.total_cores }} cores / {{ cpu.total_threads }} threads total.</p>
        {% endif %}
        {% endif %}

        {% set memory = inv.memory %}
        {% if memory.total_bytes %}
        <h3 class="h6 mt-3">Memory</h3>
        <div class="border rounded p-3 mb-3 bg-light-subtle">
            <div class="d-flex align-items-baseline gap-2 mb-2">
                <span class="display-6 lh-1">{{ memory.total_bytes | humanize_bytes }}</span>
                <span class="text-muted small">total installed</span>
            </div>
            {% if memory.dimms %}
            <div class="d-flex gap-1 flex-wrap mb-2" role="list" aria-label="DIMM slots">
                {% for d in memory.dimms %}
                {% if d.empty %}
                <span class="border border-secondary-subtle rounded" style="width: 1.75rem; height: 1.75rem;"
                      title="{{ d.slot or 'slot' }}: empty"></span>
                {% else %}
                <span class="rounded text-bg-primary d-inline-flex align-items-center justify-content-center small"
                      style="width: 1.75rem; height: 1.75rem;"
                      title="{{ d.slot or 'slot' }}: {{ d.size_bytes | humanize_bytes }}{% if d.type %} {{ d.type }}{% endif %}{% if d.speed_hz %} @ {{ (d.speed_hz / 1000000) | round | int }} MHz{% endif %}"></span>
                {% endif %}
                {% endfor %}
            </div>
            <p class="small text-muted mb-0">
                {{ memory.slots_populated }} / {{ memory.slots_total }} slots populated
                {% if memory.dominant_type %}&middot; {{ memory.dominant_type }}{% endif %}
                {% if memory.dominant_speed_hz %} @ {{ (memory.dominant_speed_hz / 1000000) | round | int }} MHz{% endif %}
            </p>
            {% else %}
            <p class="small text-muted mb-0">
                Per-DIMM slot detail not reported by this machine's firmware; only the
                total is available.
            </p>
            {% endif %}
        </div>
        {% endif %}

        {% set nics = inv.nics %}
        {% 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 = inv.disks %}
        {% 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 overlayProfileSelect = form.querySelector("#overlay_profile");
    const overlayProfileNewInput = form.querySelector("#overlay_profile_new");
    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
    // _MODE_PREVIEWS table in pixie.web._bind_preview; kept in sync
    // manually until the JS routes preview text through a JSON
    // endpoint that reads that module. Sentences describe the OUTCOME
    // on the next PXE, not the mode definition (the cards themselves
    // cover that). nbdboot has TWO variants because the persistent-
    // overlay path (overlay_profile set) survives writes; ephemeral
    // does not.
    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_ephemeral":  "Pixie streams {IMAGE} over NBD; root is an overlay-on-tmpfs of the image. Nothing writes back to the source.",
        "nbdboot_persist":    "Pixie streams {IMAGE} over NBD onto this target's <code>{PROFILE}</code> qcow2 overlay. System changes on the target survive reboots; other machines are untouched.",
    };
    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 : "",
        overlay_profile: overlayProfileSelect ? overlayProfileSelect.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";
            // Under nbdboot, non-ready options are HIDDEN outright
            // rather than just disabled: a FreeBSD image or an
            // unfetched Linux image will never boot as an ext4 root
            // over NBD, so leaving them grayed-out in the picker is
            // pure UI noise the operator has to skip past. hidden +
            // disabled is belt-and-suspenders: hidden removes from
            // the dropdown on modern browsers, disabled blocks stray
            // keyboard selection on the ones that still render it.
            const shouldHide = isNbdboot && !ready;
            opt.hidden = shouldHide;
            opt.disabled = shouldHide;
        });
        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;
        if (overlayProfileSelect) {
            // Dirty if the raw select value changed OR if the operator
            // picked ``__new`` and typed a name (which becomes the
            // effective value post-submit).
            const effective =
                overlayProfileSelect.value === "__new" && overlayProfileNewInput
                    ? overlayProfileNewInput.value.trim()
                    : overlayProfileSelect.value;
            if (effective !== initial.overlay_profile) 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 pickedOverlayProfile() {
        if (!overlayProfileSelect) return "";
        const raw = overlayProfileSelect.value;
        if (raw === "__new") {
            return overlayProfileNewInput ? overlayProfileNewInput.value.trim() : "";
        }
        return raw;
    }

    function renderPreview() {
        if (!previewBody) return;
        const mode = pickedMode();
        if (!mode) {
            previewBody.textContent = "Pick a boot mode above to see what happens.";
            return;
        }
        // nbdboot has two flavours in the preview table: ephemeral vs
        // persist. Select the right one before templating.
        let key = mode;
        if (mode === NBDBOOT) {
            key = pickedOverlayProfile() ? "nbdboot_persist" : "nbdboot_ephemeral";
        }
        let text = MODE_PREVIEWS[key] || 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-");
        }
        const prof = pickedOverlayProfile();
        if (prof) {
            text = text.replace("{PROFILE}", prof);
        }
        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);
    if (overlayProfileSelect) {
        overlayProfileSelect.addEventListener("change", () => {
            // Reveal the new-profile text input only when __new is picked;
            // clear its value on any other selection so it doesn't
            // silently ride along.
            const isNew = overlayProfileSelect.value === "__new";
            if (overlayProfileNewInput) {
                overlayProfileNewInput.classList.toggle("d-none", !isNew);
                if (!isNew) overlayProfileNewInput.value = "";
                if (isNew) overlayProfileNewInput.focus();
            }
            refreshAll();
        });
    }
    if (overlayProfileNewInput) {
        overlayProfileNewInput.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 %}