{% extends "ui/_layout.html" %}
{% block title %}Netboot artifacts - bty-web{% endblock %}

{% block subnav %}
{% with sections=[
    {"key": "list",     "label": "List",         "icon": "list-ul",        "href": "/ui/boot"},
    {"key": "dhcp-pxe", "label": "DHCP / PXE",   "icon": "hdd-network",    "href": "/ui/boot?section=dhcp-pxe"},
    {"key": "tftp",     "label": "TFTP daemon",  "icon": "cpu",            "href": "/ui/boot?section=tftp"},
] , active=section %}
{% include "ui/_subnav.html" %}
{% endwith %}
{% endblock %}

{% block intro %}
{% from "ui/_intro_box.html" import render as intro_box %}
{% call intro_box() %}
    The bty live env that PXE clients chain into when their
    assignment has <code>boot_policy=flash</code>. Until these
    files are present, machines with <code>boot_policy=flash</code>
    cannot actually flash. Use the <strong>Fetch</strong> control in
    the table header below (tag defaults to <code>latest</code>) to
    populate them from GitHub releases.
{% endcall %}
{% endblock %}

{% block content %}
{% if section == "dhcp-pxe" %}
{# Router-side cheatsheet. The bits the operator pastes into
   UniFi / pfSense / dnsmasq DHCP config to point PXE clients
   at this appliance. Reference-only; no editable fields here
   -- bty doesn't run DHCP, the LAN router does. #}
<div class="card mb-3">
    <div class="card-header bg-light fw-semibold">
        <i class="bi bi-hdd-network me-1"></i>DHCP / PXE
    </div>
    <div class="card-body">
        <p class="text-muted">
            bty-server runs a TFTP daemon (dnsmasq) and serves boot
            artifacts over HTTP. The DHCP side stays with your LAN's
            router (or DHCP server); bty deliberately doesn't try
            to replace it. Point your router at this appliance with
            the settings below.
        </p>

        {% if missing_netboot_artifacts %}
        <div class="alert alert-warning d-flex justify-content-between align-items-start">
            <div>
                <i class="bi bi-exclamation-triangle-fill me-1"></i>
                <strong>Netboot environment incomplete.</strong>
                Missing under <code>{{ boot_root }}</code>:
                {% for name in missing_netboot_artifacts %}
                <code>{{ name }}</code>{% if not loop.last %}, {% endif %}
                {% endfor %}.
                PXE clients will chain into iPXE but get 404 on the
                kernel fetch until these files are present.
            </div>
            <a href="/ui/boot?section=fetch" class="btn btn-sm btn-outline-warning ms-3 flex-shrink-0">
                <i class="bi bi-cloud-download me-1"></i>Fetch latest
            </a>
        </div>
        {% endif %}

        <h3 class="h6 mt-3">This appliance</h3>
        <table class="table table-sm mb-3">
            <thead>
                <tr>
                    <th scope="col">Interface</th>
                    <th scope="col">State</th>
                    <th scope="col">IPv4</th>
                </tr>
            </thead>
            <tbody>
                {% for iface in interfaces %}
                <tr>
                    <td><code>{{ iface.name }}</code></td>
                    <td>{{ iface.operstate }}</td>
                    <td>
                        {% if iface.ipv4 %}
                        <code>{{ iface.ipv4 }}/{{ iface.prefix }}</code>
                        {% else %}
                        <span class="text-muted">(no address)</span>
                        {% endif %}
                    </td>
                </tr>
                {% else %}
                <tr><td colspan="3" class="text-muted">(no interfaces detected)</td></tr>
                {% endfor %}
            </tbody>
        </table>

        <h3 class="h6 mt-4">Router-side configuration</h3>
        <p class="text-muted">
            Configure your LAN's DHCP server to tag PXE clients with
            the options below. For UniFi: <em>Settings &rarr; Networks
            &rarr; [your LAN] &rarr; Advanced &rarr; DHCP &rarr; Network
            Boot</em>. For pfSense / OpenWRT / dnsmasq: equivalent
            options on the DHCP service.
        </p>

        <table class="table table-sm">
            <thead>
                <tr>
                    <th scope="col">Option</th>
                    <th scope="col">Value</th>
                    <th scope="col">Notes</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><code>option 60</code></td>
                    <td><code>PXEClient</code></td>
                    <td>Vendor-class echo. Strict UEFI firmware filters offers without it.</td>
                </tr>
                <tr>
                    <td><code>option 66</code> / Next-Server</td>
                    <td>
                        {% if primary and primary.ipv4 %}
                        <code>{{ primary.ipv4 }}</code>
                        {% else %}
                        <code>(this appliance's LAN IP)</code>
                        {% endif %}
                    </td>
                    <td>The TFTP server. Same box as bty-web.</td>
                </tr>
                <tr>
                    <td><code>option 67</code> / Boot-Filename</td>
                    <td><code>ipxe.efi</code></td>
                    <td>For UEFI PXEClient (arch 6/7/9). Use <code>undionly.kpxe</code> for legacy BIOS (arch 0).</td>
                </tr>
                <tr>
                    <td><code>option 67</code> for <code>user-class=iPXE</code></td>
                    <td>
                        <code>http://{% if primary and primary.ipv4 %}{{ primary.ipv4 }}{% else %}&lt;bty-server&gt;{% endif %}:8080/pxe-bootstrap.ipxe</code>
                    </td>
                    <td>Stops iPXE chain-loop. Different bootfile when iPXE re-DHCPs.</td>
                </tr>
            </tbody>
        </table>

        <p class="form-text mt-2 mb-0">
            For UEFI HTTP-Boot (vendor-class <code>HTTPClient</code>), point
            <code>option 67</code> at
            <code>http://{% if primary and primary.ipv4 %}{{ primary.ipv4 }}{% else %}&lt;bty-server&gt;{% endif %}:8080/boot/ipxe.efi</code>
            instead (no TFTP roundtrip).
        </p>
    </div>
</div>

{% elif section == "tftp" %}
{# Local dnsmasq.service state + start/stop/restart. The "take
   PXE offline briefly" knob, separate from the cheatsheet
   because most operators never touch it. #}
<div class="card mb-3">
    <div class="card-header bg-light fw-semibold">
        <i class="bi bi-cpu me-1"></i>TFTP daemon
    </div>
    <div class="card-body">
        <p class="text-muted">
            The local <code>dnsmasq.service</code> serves the TFTP root
            (<code>/var/lib/tftpboot</code>). Stop it to take PXE offline
            without disabling DHCP; restart it to pick up new bootfiles
            staged into the TFTP root.
        </p>
        <div class="d-flex align-items-center gap-3">
            <div>
                {% if tftp.state == 'active' %}
                <span class="badge bg-success fs-6">{{ tftp.state }}</span>
                {% elif tftp.state == 'failed' %}
                <span class="badge bg-danger fs-6">{{ tftp.state }}</span>
                {% elif tftp.state in ('activating', 'deactivating', 'reloading') %}
                <span class="badge bg-warning text-dark fs-6">{{ tftp.state }}</span>
                {% else %}
                <span class="badge bg-secondary fs-6">{{ tftp.state }}</span>
                {% endif %}
                <code class="ms-2">dnsmasq.service</code>
            </div>
            {% if tftp_controllable %}
            <form action="/ui/settings/tftp-control" method="post" class="d-inline-flex gap-1 m-0 ms-auto">
                <button type="submit" name="action" value="start"
                        class="btn btn-sm btn-outline-success"
                        {% if tftp.is_active %}disabled{% endif %}>
                    <i class="bi bi-play-fill"></i> Start
                </button>
                <button type="submit" name="action" value="stop"
                        class="btn btn-sm btn-outline-secondary"
                        {% if not tftp.is_active %}disabled{% endif %}>
                    <i class="bi bi-stop-fill"></i> Stop
                </button>
                <button type="submit" name="action" value="restart"
                        class="btn btn-sm btn-outline-warning">
                    <i class="bi bi-arrow-clockwise"></i> Restart
                </button>
            </form>
            {% else %}
            <span class="text-muted ms-auto small">
                <i class="bi bi-info-circle me-1"></i>Controls disabled (no daemon helper here)
            </span>
            {% endif %}
        </div>
    </div>
</div>

{% else %}
{# section == "list" (default): the netboot artifacts table, with
   the Fetch control (tag input, default "latest") inline in its
   header -- List and Fetch are merged into one view, like the
   Catalog. Live fetch activity shows in the top-nav indicator. #}
<div class="card mb-4">
    <div class="card-header bg-light fw-semibold d-flex justify-content-between align-items-center flex-wrap gap-2">
        <span><i class="bi bi-box-seam me-1"></i>Netboot artifacts</span>
        <span class="d-flex gap-1 align-items-center">
            {# The release tag is an editable magic value (Settings ->
               Upstream sources); the button just fetches whatever it
               resolves to. #}
            <button type="button" class="btn btn-sm btn-primary" id="enqueue-fetch-btn"
                    data-tag="{{ release_tag }}" onclick="enqueueFetch();"
                    title="Fetch netboot artifacts for tag '{{ release_tag }}' from {{ release_repo }} (change the tag on the Settings page)">
                <i class="bi bi-cloud-download me-1"></i>Fetch
                {% if release_tag == "latest" %}latest{% else %}<code>{{ release_tag }}</code>{% endif %}
                artifacts
            </button>
        </span>
    </div>
    <div class="table-responsive">
        <table class="table mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    <th>File</th>
                    <th>Status</th>
                    <th>Size</th>
                    <th>SHA256</th>
                    <th>Last fetched</th>
                    <th class="text-end" style="width: 1%; white-space: nowrap;">Action</th>
                </tr>
            </thead>
            <tbody>
                {% for a in artifacts %}
                <tr>
                    <td><code>{{ a.name }}</code></td>
                    <td>
                        {% if a.present %}
                        <span class="badge bg-success"><i class="bi bi-check-circle me-1"></i>present</span>
                        {% else %}
                        <span class="badge bg-warning text-dark"><i class="bi bi-exclamation-circle me-1"></i>missing</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if a.size is not none %}
                        <small class="text-muted">{{ "{:,}".format(a.size) }} bytes</small>
                        {% else %}
                        <small class="text-muted">-</small>
                        {% endif %}
                    </td>
                    <td>
                        {% set sha = artifact_shas.get(a.name) %}
                        {% if sha %}
                        <code class="small" title="{{ sha }}">{{ sha[:12] }}...</code>
                        {% else %}
                        <small class="text-muted">-</small>
                        {% endif %}
                    </td>
                    <td>
                        {% if a.mtime %}
                        <small class="text-muted">{{ a.mtime | fmt_ts }}</small>
                        {% else %}
                        <small class="text-muted">-</small>
                        {% endif %}
                    </td>
                    <td class="text-end">
                        {% if a.present %}
                        <a href="/boot/{{ a.name }}" download
                           class="btn btn-sm btn-outline-secondary" title="Download {{ a.name }}">
                            <i class="bi bi-download"></i>
                        </a>
                        {% else %}
                        <span class="text-muted small">-</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{# Live release-fetch jobs: active (queued / running) + previous
   (completed / failed, backfilled from events on restart). Polls
   GET /boot/releases, the same endpoint the top-nav worker
   indicator counts. Mirrors the Images -> Downloads jobs table. #}
<div class="card mb-4">
    <div class="card-header bg-light fw-semibold d-flex justify-content-between align-items-center">
        <span><i class="bi bi-arrow-down-circle me-1"></i>Release fetches</span>
        <span class="text-muted small bty-fetch-poll-status">refreshing...</span>
    </div>
    <div class="table-responsive">
        <table class="table mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    <th>Tag</th>
                    <th>Status</th>
                    <th style="width: 30%;">Progress</th>
                    <th>Bytes</th>
                    <th class="text-end" style="width: 1%; white-space: nowrap;">Action</th>
                </tr>
            </thead>
            <tbody class="bty-fetches-tbody">
                <tr><td colspan="5" class="text-muted">No fetches yet.</td></tr>
            </tbody>
        </table>
    </div>
</div>

<script>
(function () {
    function esc(s) {
        return String(s == null ? "" : s).replace(/[&<>"']/g, function (c) {
            return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c];
        });
    }
    function fmtBytes(n) {
        if (n == null) return "-";
        if (n < 1024) return n + " B";
        var u = ["KiB", "MiB", "GiB", "TiB"], i = -1;
        do { n /= 1024; i++; } while (n >= 1024 && i < u.length - 1);
        return n.toFixed(1) + " " + u[i];
    }
    function statusBadge(s) {
        var cls = {
            "queued": "bg-secondary", "running": "bg-primary",
            "completed": "bg-success", "cancelled": "bg-warning text-dark",
            "failed": "bg-danger",
        }[s] || "bg-secondary";
        return '<span class="badge ' + cls + '">' + esc(s) + '</span>';
    }
    function progressBar(d) {
        if (d.bytes_total == null) {
            return '<div class="progress" style="height: 16px;">' +
                   '<div class="progress-bar progress-bar-striped progress-bar-animated" ' +
                   'style="width: 100%;">' + (d.status === "running" ? "..." : "") + '</div></div>';
        }
        var pct = d.bytes_total > 0 ? (100 * (d.bytes_done || 0) / d.bytes_total) : 0;
        var color = d.status === "completed" ? "bg-success" :
                    d.status === "failed" ? "bg-danger" :
                    d.status === "cancelled" ? "bg-warning" : "";
        return '<div class="progress" style="height: 16px;">' +
               '<div class="progress-bar ' + color + '" style="width: ' +
               pct.toFixed(1) + '%;">' + pct.toFixed(1) + '%</div></div>';
    }
    function actionCell(d) {
        if (d.status === "queued" || d.status === "running") {
            return '<button type="button" class="btn btn-sm btn-outline-danger bty-fetch-cancel" ' +
                   'data-tag="' + esc(d.tag) + '"><i class="bi bi-x-circle me-1"></i>Cancel</button>';
        }
        if (d.status === "failed") {
            return '<span class="text-danger small" title="' + esc(d.error || "") + '">' +
                   '<i class="bi bi-exclamation-triangle me-1"></i>' +
                   esc((d.error || "failed").substring(0, 60)) + '</span>';
        }
        return "";
    }
    function render(jobs) {
        var tbody = document.querySelector(".bty-fetches-tbody");
        if (!tbody) return;
        if (!jobs.length) {
            tbody.innerHTML = '<tr><td colspan="5" class="text-muted">No fetches yet.</td></tr>';
            return;
        }
        var order = { "running": 0, "queued": 1, "failed": 2, "cancelled": 3, "completed": 4 };
        jobs.sort(function (a, b) { return (order[a.status] || 9) - (order[b.status] || 9); });
        tbody.innerHTML = jobs.map(function (d) {
            var bytes = fmtBytes(d.bytes_done || 0);
            if (d.bytes_total != null) bytes += " / " + fmtBytes(d.bytes_total);
            return "<tr>" +
                   "<td><code>" + esc(d.tag) + "</code>" +
                   (d.artifact ? ' <small class="text-muted">' + esc(d.artifact) + "</small>" : "") +
                   "</td>" +
                   "<td>" + statusBadge(d.status) + "</td>" +
                   "<td>" + progressBar(d) + "</td>" +
                   "<td class=\"small\">" + esc(bytes) + "</td>" +
                   "<td class=\"text-end\">" + actionCell(d) + "</td>" +
                   "</tr>";
        }).join("");
    }
    function refresh() {
        var statusEl = document.querySelector(".bty-fetch-poll-status");
        return fetch("/boot/releases", { credentials: "same-origin" })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                render(data.fetches || []);
                if (statusEl) statusEl.textContent = "updated " + new Date().toLocaleTimeString();
            }).catch(function () {
                if (statusEl) statusEl.textContent = "(poll failed)";
            });
    }

    // Cancel an in-flight fetch (event-delegated; rows are re-rendered
    // on every poll so per-row handlers would go stale).
    document.addEventListener("click", function (ev) {
        var btn = ev.target.closest(".bty-fetch-cancel");
        if (!btn) return;
        btn.disabled = true;
        fetch("/boot/releases/" + encodeURIComponent(btn.dataset.tag), {
            method: "DELETE", credentials: "same-origin",
        }).then(refresh).catch(function () { btn.disabled = false; });
    });

    window.enqueueFetch = function () {
        var btn = document.getElementById("enqueue-fetch-btn");
        var tag = (btn.dataset.tag || "latest").trim() || "latest";
        btn.disabled = true;
        fetch("/boot/releases", {
            method: "POST",
            credentials: "same-origin",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ tag: tag }),
        }).then(function (r) {
            if (!r.ok) throw new Error("HTTP " + r.status);
            // No reload: the poller picks up the queued job and shows
            // it progress -> done in the Release fetches table below.
            btn.disabled = false;
            return refresh();
        }).catch(function (e) {
            alert("Fetch failed: " + e.message);
            btn.disabled = false;
        });
    };

    // Poll while the page is visible; pause in a backgrounded tab.
    var handle = null;
    function start() { if (!handle) { refresh(); handle = setInterval(refresh, 2000); } }
    function stop() { if (handle) { clearInterval(handle); handle = null; } }
    document.addEventListener("visibilitychange", function () {
        if (document.hidden) stop(); else start();
    });
    start();
})();
</script>

{% endif %}

{# Recent activity for boot artifacts: release fetches +
   fetch failures via the per-subject events card. On the
   default list view only -- the DHCP / TFTP sections have their
   own focused content and the events log link in the top nav
   covers the cross-section view. #}
{% if section in ("list", "fetch") %}
{% with events=boot_events,
        title="Recent netboot activity",
        link_to_full="/ui/events?subject_kind=boot" %}
{% include "ui/_events_card.html" %}
{% endwith %}
{% endif %}
{% endblock %}