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

{% block subnav %}
{% set right_html %}<span class="text-muted small"><code>{{ boot_root }}</code></span>{% endset %}
{% with sections=[
    {"key": "list",     "label": "List",         "icon": "list-ul",        "href": "/ui/boot"},
    {"key": "fetch",    "label": "Fetch netboot artifacts", "icon": "cloud-download", "href": "/ui/boot?section=fetch"},
    {"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, right_html=right_html %}
{% 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. Click
    <a href="/ui/boot?section=fetch">Fetch netboot artifacts</a>
    to populate.
{% endcall %}
{% endblock %}

{% block content %}
{% if section == "fetch" %}
<div class="card mb-3">
    <div class="card-header bg-light fw-semibold">
        <i class="bi bi-cloud-download me-1"></i>Fetch from GitHub releases
    </div>
    <div class="card-body">
        <p>
            Pulls <code>vmlinuz</code> + <code>initrd</code> +
            <code>squashfs</code> + <code>sha256</code> from
            <a href="https://github.com/{{ release_repo }}/releases"
               target="_blank" rel="noopener">{{ release_repo }}</a>,
            verifies the manifest, and atomically installs into
            <code>{{ boot_root }}</code>.
        </p>
        <div class="row g-3 align-items-end">
            <div class="col-sm-8">
                <label class="form-label" for="tag">Tag</label>
                <input type="text" id="tag" class="form-control"
                       value="latest" placeholder="latest, or e.g. v0.11.3">
                <div class="form-text">
                    <code>latest</code> resolves through GitHub's redirect
                    to the most recent release.
                </div>
            </div>
            <div class="col-sm-4">
                <button type="button" class="btn btn-primary w-100" id="enqueue-fetch-btn"
                        onclick="enqueueFetch();">
                    <i class="bi bi-cloud-download me-1"></i>Fetch
                </button>
            </div>
        </div>
    </div>
</div>

<script>
(function () {
    window.enqueueFetch = function () {
        var tag = document.getElementById("tag").value.trim() || "latest";
        var btn = document.getElementById("enqueue-fetch-btn");
        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);
            // Send the operator back to the list so they can watch
            // the fetch progress (the list section polls).
            // Reload the same view so the fetches table below picks
            // up the new tag and the operator sees progress in place.
            window.location.reload();
        }).catch(function (e) {
            alert("Enqueue failed: " + e.message);
            btn.disabled = false;
        });
    };
})();
</script>

{# Active + recent fetches live alongside the fetch form so the
   operator who just clicked "Fetch" sees progress without
   leaving the page. #}
<div class="card mb-3">
    <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>Active + recent fetches</span>
        <span class="text-muted small bty-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>Progress</th>
                    <th>Started</th>
                    <th class="text-end" style="width: 1%; white-space: nowrap;">Action</th>
                </tr>
            </thead>
            <tbody id="fetches-tbody">
                <tr><td colspan="5" class="text-center text-muted py-3">
                    <em>Loading...</em>
                </td></tr>
            </tbody>
        </table>
    </div>
</div>

<script>
(function () {
    var pollHandle = null;
    var POLL_INTERVAL_MS = 2000;

    var seenCompleted = new Set();
    var lastFetchesSnapshot = null;

    function esc(v) {
        if (v === null || v === undefined) return "";
        return String(v)
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#39;");
    }

    function fmtBytes(n) {
        if (n === null || n === undefined) return "?";
        var mib = n / (1024 * 1024);
        if (mib < 1024) return mib.toFixed(1) + " MiB";
        return (mib / 1024).toFixed(2) + " GiB";
    }

    function fmtTime(ts) {
        if (!ts) return "-";
        return new Date(ts * 1000).toLocaleTimeString();
    }

    function statusBadge(s) {
        var cls = {
            queued: "bg-secondary",
            running: "bg-primary",
            completed: "bg-success",
            cancelled: "bg-warning text-dark",
            failed: "bg-danger",
        }[s] || "bg-light text-dark border";
        return '<span class="badge ' + cls + '">' + esc(s) + '</span>';
    }

    function progressCell(s) {
        if (s.status !== "running") {
            if (s.status === "completed") return '<span class="text-muted small">' + esc(fmtBytes(s.bytes_done)) + '</span>';
            if (s.status === "failed" && s.error) return '<span class="text-danger small">' + esc(s.error) + '</span>';
            return '<span class="text-muted small">-</span>';
        }
        var pct = s.bytes_total ? Math.round(s.bytes_done * 100 / s.bytes_total) : null;
        var label = (s.artefact || "...") + " - " + fmtBytes(s.bytes_done);
        if (pct !== null) label += " / " + fmtBytes(s.bytes_total) + " (" + pct + "%)";
        var bar = '<div class="progress" style="height: 0.85rem;">' +
                  '<div class="progress-bar progress-bar-striped progress-bar-animated" ' +
                  'style="width: ' + (pct === null ? 100 : pct) + '%;"></div></div>';
        return '<div class="small">' + esc(label) + '</div>' + bar;
    }

    function actionCell(s) {
        if (s.status === "queued" || s.status === "running") {
            return '<button class="btn btn-sm btn-outline-danger bty-cancel-fetch-btn" data-tag="' +
                   esc(s.tag) + '"><i class="bi bi-x-circle me-1"></i>Cancel</button>';
        }
        return '<span class="text-muted small">-</span>';
    }

    // When a tag transitions running -> completed we reload so the
    // List section (and the inline "missing artefacts" banner) pick
    // up the newly-present files.
    function detectCompletion(fetches) {
        if (lastFetchesSnapshot) {
            fetches.forEach(function (s) {
                if (s.status === "completed" && !seenCompleted.has(s.tag)) {
                    var prior = lastFetchesSnapshot.find(function (p) { return p.tag === s.tag; });
                    if (prior && prior.status === "running") {
                        seenCompleted.add(s.tag);
                        window.location.reload();
                    }
                }
            });
        }
        lastFetchesSnapshot = fetches;
    }

    function refresh() {
        return fetch("/boot/releases", { credentials: "same-origin" })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                var tbody = document.getElementById("fetches-tbody");
                var fetches = data.fetches || [];
                if (!fetches.length) {
                    tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted py-3"><em>No fetches yet.</em></td></tr>';
                } else {
                    var rows = fetches.map(function (s) {
                        return "<tr>" +
                               "<td><code>" + esc(s.tag) + "</code></td>" +
                               "<td>" + statusBadge(s.status) + "</td>" +
                               "<td>" + progressCell(s) + "</td>" +
                               "<td><small>" + esc(fmtTime(s.started_at)) + "</small></td>" +
                               '<td class="text-end">' + actionCell(s) + "</td>" +
                               "</tr>";
                    }).join("");
                    tbody.innerHTML = rows;
                }
                document.querySelector(".bty-poll-status").textContent = "updated " + new Date().toLocaleTimeString();
                detectCompletion(fetches);
            });
    }

    function startPolling() {
        if (pollHandle) return;
        refresh();
        pollHandle = setInterval(refresh, POLL_INTERVAL_MS);
    }
    function stopPolling() {
        if (pollHandle) { clearInterval(pollHandle); pollHandle = null; }
    }
    document.addEventListener("visibilitychange", function () {
        if (document.hidden) stopPolling(); else startPolling();
    });

    document.addEventListener("click", function (ev) {
        var cancelBtn = ev.target.closest(".bty-cancel-fetch-btn");
        if (cancelBtn) {
            ev.preventDefault();
            var tag = cancelBtn.getAttribute("data-tag");
            cancelBtn.disabled = true;
            fetch("/boot/releases/" + encodeURIComponent(tag), {
                method: "DELETE",
                credentials: "same-origin",
            }).then(refresh);
        }
    });

    startPolling();
})();
</script>

{% elif 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-body">
        <h2 class="h5 mb-3"><i class="bi bi-hdd-network me-2"></i>DHCP / PXE</h2>
        <p class="text-muted">
            bty-server runs a TFTP daemon (dnsmasq) and serves boot
            artefacts 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-body">
        <h2 class="h5 mb-3"><i class="bi bi-cpu me-2"></i>TFTP daemon</h2>
        <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): present/missing per-artefact + live
   fetch table. Operators land on the OBSERVABLE boot state when
   they click "Netboot" in the top nav. The single Fetch flow is
   one sub-nav click away. #}
<div class="card mb-4">
    <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>Last fetched</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>
                        {% if a.mtime %}
                        <small class="text-muted">{{ a.mtime }}</small>
                        {% else %}
                        <small class="text-muted">-</small>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{% endif %}

{# Recent activity for boot artefacts: 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 %}