{% extends "layout.html" %}
{% from "_partials/table_helpers.html" import search_input, sort_header, pagination_inline %}
{% from "_partials/recent_events.html" import recent_events_card %}
{% from "_partials/page_description.html" import page_description %}
{% block title %}Machines - pixie{% endblock %}
{% block subnav %}
<nav class="navbar subnav-strip" aria-label="Section sub-navigation">
    <div class="container">
        {# LEFT: anchor links to in-page sections. Don't repeat the
           top-nav label ("Machines"); use section-specific verbs. #}
        <span class="subnav-jumps d-flex align-items-center flex-wrap">
            <a href="#list">List</a>
        </span>
        {# RIGHT: no inline actions on this page. Bindings are edited
           per-machine on the detail page. #}
    </div>
</nav>
{% endblock %}
{% block content %}
{{ page_description('pc-display', 'Every MAC pixie has seen. A row appears here on the target\'s first PXE contact; the last-seen columns refresh every 5 s while the page is open. Click a MAC to bind its boot mode, edit labels, or inspect the inventory and events for that target.') }}
<div class="card" id="list">
    <div class="card-header bg-light fw-semibold d-flex flex-wrap align-items-center gap-3 py-2">
        <span class="text-nowrap"><i class="bi bi-pc-display me-1"></i>Machines</span>
        <span class="vr"></span>
        {{ search_input('/ui/machines', q, preserved, 'MAC / boot mode / sha / last IP') }}
        {{ pagination_inline(page_state, preserved, label='machines') }}
    </div>
    {% if machines %}
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
                <tr>
                    {{ sort_header('MAC', 'mac', sort, preserved) }}
                    {{ sort_header('Boot mode', 'boot_mode', sort, preserved) }}
                    <th scope="col">Image</th>
                    <th scope="col">Inventory</th>
                    {{ sort_header('Last seen', 'last_seen_at', sort, preserved) }}
                    <th scope="col" class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for m in machines %}
                <tr data-machine-row="{{ m.mac }}">
                    <td data-cell="mac-labels">
                        <a href="/ui/machines/{{ m.mac }}" class="text-decoration-none">
                            <code>{{ m.mac }}</code>
                        </a>
                        {% if m.labels %}
                        <div class="mt-1">
                            {% for lbl in m.labels %}
                            <span class="badge text-bg-light border me-1">{{ lbl }}</span>
                            {% endfor %}
                        </div>
                        {% endif %}
                    </td>
                    <td data-cell="boot-mode">
                        {% if m.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>{{ m.boot_mode }}
                        </span>
                        {% endif %}
                    </td>
                    <td data-cell="image">
                        {% set cell = image_cells.get(m.mac) %}
                        {% if cell and cell[0] %}
                        <a href="/ui/images/{{ cell[0] }}" title="{{ cell[0] }}" class="text-decoration-none">{% if cell[1] %}{{ cell[1] }}{% else %}<code>{{ cell[0][:12] }}</code>{% endif %}</a>
                        {% else %}
                        <span class="text-muted small">-</span>
                        {% endif %}
                    </td>
                    <td data-cell="inventory">
                        {% if m.inventory %}
                        {% set d = m.inventory.get("disks") or [] %}
                        <span class="small">
                            <i class="bi bi-hdd me-1"></i>{{ d|length }} disk{{ '' if d|length == 1 else 's' }}
                        </span>
                        {% if m.inventory.get("lshw") %}
                        <span class="text-muted small">+ lshw</span>
                        {% endif %}
                        {% else %}
                        <span class="text-muted small">-</span>
                        {% endif %}
                    </td>
                    <td class="small text-muted" data-cell="last-seen">
                        {{ m.last_seen_at | fmt_ts }}
                        {% if m.last_seen_ip %}<br><code>{{ m.last_seen_ip }}</code>{% endif %}
                    </td>
                    <td class="text-end text-nowrap">
                        {# The MAC cell already links to the detail page;
                           an "open" icon here is redundant. Keep only
                           the destructive action, which needs its own
                           control (a confirm-prompt on a link would be
                           surprising). #}
                        <form method="post" action="/ui/machines/delete" class="d-inline"
                              onsubmit="return confirm('Delete machine record for {{ m.mac }}? Inventory + binding will be lost.');">
                            <input type="hidden" name="mac" value="{{ m.mac }}">
                            <button type="submit"
                                    class="btn btn-sm btn-outline-danger"
                                    title="Delete {{ m.mac }}"
                                    aria-label="Delete {{ m.mac }}">
                                <i class="bi bi-trash" aria-hidden="true"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="card-body">
        <p class="text-muted mb-0">
            <i class="bi bi-inbox me-1"></i>
            {% if q %}
            No machines match <code>{{ q }}</code>.
            {% else %}
            No machines yet. Machines appear when a PXE-booting target hits
            <code>/pxe/&lt;mac&gt;</code>; open a machine to edit its binding.
            {% endif %}
        </p>
    </div>
    {% endif %}
</div>

<script>
// Live refresh: every 5 s hit /ui/machines-live.json and update the
// per-machine cells (boot_mode badge, image sha, inventory count,
// last_seen_at + IP). Only rows currently on the page get updated
// (rows on other pagination pages aren't visible; a full poll of
// them would just churn the state dict). A new MAC that shows up
// server-side but wasn't rendered here does NOT get injected --
// pagination + sort would be wrong without a re-render; the
// operator sees it on their next page load.
(function () {
    const POLL_MS = 5000;
    const rows = document.querySelectorAll("[data-machine-row]");
    if (!rows.length) return;

    function bootBadge(mode) {
        if (mode === "nbdboot") {
            return `<span class="badge text-bg-primary"><i class="bi bi-hdd-network me-1"></i>nbdboot</span>`;
        }
        return `<span class="badge text-bg-secondary"><i class="bi bi-box-arrow-right me-1"></i>${mode}</span>`;
    }

    const esc = (s) => String(s).replace(/[&<>"']/g, (c) => (
        {"&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;"}[c]));

    function imageCell(d) {
        // Mirror the server-side Image cell: link the bound image to its
        // Images page (name if known, short sha for an orphan blob), or a
        // muted dash when the boot mode doesn't consume an image.
        if (!d.image_sha) return `<span class="text-muted small">-</span>`;
        const label = d.image_name ? esc(d.image_name) : `<code>${d.image_sha.slice(0, 12)}</code>`;
        return `<a href="/ui/images/${d.image_sha}" title="${d.image_sha}" class="text-decoration-none">${label}</a>`;
    }

    async function poll() {
        try {
            const r = await fetch("/ui/machines-live.json", {credentials: "same-origin"});
            if (!r.ok) return;
            const rowsData = await r.json();
            rows.forEach((tr) => {
                const mac = tr.getAttribute("data-machine-row");
                const d = rowsData[mac];
                if (!d) return;
                const setCell = (key, html) => {
                    const cell = tr.querySelector(`[data-cell="${key}"]`);
                    if (cell && cell.innerHTML !== html) cell.innerHTML = html;
                };
                setCell("boot-mode", bootBadge(d.boot_mode));
                setCell("image", imageCell(d));
                let inv;
                if (d.inventory_at) {
                    const disks = d.disks_count || 0;
                    inv = `<span class="small"><i class="bi bi-hdd me-1"></i>${disks} disk${disks === 1 ? "" : "s"}</span>`;
                    if (d.has_lshw) inv += ` <span class="text-muted small">+ lshw</span>`;
                } else {
                    inv = `<span class="text-muted small">-</span>`;
                }
                setCell("inventory", inv);
                let seen = d.last_seen_at_display || d.last_seen_at || "-";
                if (d.last_seen_ip) seen += `<br><code>${d.last_seen_ip}</code>`;
                setCell("last-seen", seen);
            });
        } catch (e) { /* swallow; try again next tick */ }
    }
    poll();
    setInterval(poll, POLL_MS);
})();
</script>
{{ recent_events_card(machine_events, "machine") }}
{% endblock %}