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

{% block subnav %}
{# Three jump links: artifacts inventory (with live fetch UI),
   TFTP daemon control, recent activity. v0.41.2+: the old
   /ui/downloads page collapsed into here since the only
   downloads bty-web does are netboot artifacts. #}
<nav class="navbar subnav-strip" aria-label="Section sub-navigation">
    <div class="container">
        <span class="subnav-jumps d-flex align-items-center flex-wrap">
            <a href="#netboot-list">Artifacts</a>
            <span class="vr"></span>
            <a href="#netboot-tftp">TFTP Daemon</a>
            <span class="vr"></span>
            <a href="#netboot-activity">Activity</a>
        </span>
    </div>
</nav>
{% endblock %}

{% block intro %}
{% from "ui/_intro_box.html" import render as intro_box %}
{% call intro_box() %}
    The bty live env PXE clients chain into when their assignment has
    <code>boot_mode=bty-flash-always</code>. Trigger a fetch from the
    artifacts header to pull the kernel + initrd + squashfs + sha256
    manifest for tag <code>{{ netboot_tag }}</code> from
    <code>{{ netboot_repo }}</code>; rows below tick from missing to
    present as each file lands. The TFTP daemon panel is purely
    observational; the router-side DHCP / PXE cheatsheet lives on the
    <strong>Settings</strong> page.
{% endcall %}
{% endblock %}

{% block content %}
<div class="card mb-4" id="netboot-list">
    <div class="card-header bg-light fw-semibold d-flex justify-content-between align-items-center flex-wrap gap-2 py-2">
        <span><i class="bi bi-box-seam me-1"></i>Netboot artifacts
              <span class="text-muted small bty-workers-poll-status ms-1">refreshing...</span></span>
        {# Fetch artifacts: enqueues the netboot trio + sha256 manifest.
           The release tag is an editable magic value (Settings ->
           Upstream sources). Disabled when all four files are already
           cached on disk; re-enables when one disappears (operator
           ``rm``, state-dir migrate, etc.). #}
        <button type="button" class="btn btn-sm btn-primary text-nowrap"
                id="bty-downloads-fetch-artifacts-btn"
                data-tag="{{ netboot_tag }}"
                {% if artifacts_all_cached %}disabled
                title="Netboot artifacts for tag '{{ netboot_tag }}' are already cached. Remove a file from the boot directory below to re-fetch."
                {% else %}
                title="Fetch netboot artifacts for tag '{{ netboot_tag }}' from {{ netboot_repo }}"
                {% endif %}>
            <i class="bi bi-cloud-download me-1"></i>Fetch '<strong>{{ netboot_tag }}</strong>' artifacts
            {% if artifacts_all_cached %}<i class="bi bi-check-circle ms-1" title="cached"></i>{% endif %}
        </button>
    </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 }}" aria-label="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>

{# Active fetch jobs (release-tag rows, one progress bar per artifact).
   Hidden when no fetch is in flight; appears when "Fetch artifacts"
   is clicked. Cancel re-arms the trigger button. #}
<div class="card mb-4" id="netboot-active">
    <div class="card-header bg-light fw-semibold">
        <i class="bi bi-arrow-down-circle me-1"></i>Active fetches
    </div>
    <div class="table-responsive">
        <table class="table mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    <th style="width: 35%;">Item</th>
                    <th>Status</th>
                    <th style="width: 35%;">Progress</th>
                    <th>Bytes</th>
                    <th class="text-end" style="width: 1%; white-space: nowrap;">Action</th>
                </tr>
            </thead>
            <tbody class="bty-workers-downloads-tbody">
                <tr><td colspan="5" class="text-muted">No active fetches.</td></tr>
            </tbody>
        </table>
    </div>
</div>

{# TFTP daemon: observational only. Lifecycle (start / stop / restart)
   belongs to systemd or Podman, not the web UI. The card just
   surfaces what bty-web can see: the local ``dnsmasq.service`` state,
   what that state implies, and where to look next. #}
<div class="card mb-4" id="netboot-tftp">
    <div class="card-header bg-light fw-semibold">
        <i class="bi bi-cpu me-1"></i>TFTP daemon
    </div>
    <div class="card-body">
        <h3 class="h6 mb-2">Network probe</h3>
        <table class="table table-sm mb-2 align-middle">
            <tbody>
                <tr>
                    <th scope="row" class="text-muted small" style="width: 14rem;">Target</th>
                    <td><code>{{ tftp_probe.host }}:{{ tftp_probe.port }}</code></td>
                </tr>
                <tr>
                    <th scope="row" class="text-muted small">Reachable</th>
                    <td>
                        {% if tftp_probe.reachable %}
                        <span class="badge bg-success"><i class="bi bi-check-circle me-1"></i>yes</span>
                        {% else %}
                        <span class="badge bg-danger"><i class="bi bi-x-circle me-1"></i>no</span>
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <th scope="row" class="text-muted small">
                        <code>{{ tftp_probe.filename }}</code> present
                    </th>
                    <td>
                        {% if tftp_probe.file_present %}
                        <span class="badge bg-success"><i class="bi bi-check-circle me-1"></i>yes</span>
                        {% elif tftp_probe.reachable %}
                        <span class="badge bg-warning text-dark"><i class="bi bi-exclamation-circle me-1"></i>missing</span>
                        {% else %}
                        <span class="badge bg-secondary">unknown</span>
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <th scope="row" class="text-muted small">Detail</th>
                    <td><small class="text-muted">{{ tftp_probe.detail or "-" }}</small></td>
                </tr>
            </tbody>
        </table>
        <p class="text-muted small mb-3">
            {% if tftp_probe.ok %}
            The TFTP server at <code>{{ tftp_probe.host }}:{{ tftp_probe.port }}</code>
            is up and serves the UEFI iPXE bootfile -- PXE clients on this subnet
            should chainload successfully.
            {% elif tftp_probe.reachable %}
            The server is reachable but doesn't have
            <code>{{ tftp_probe.filename }}</code>. UEFI PXE-Boot clients will 404
            at the bootfile step. Check the TFTP root contents (the bty-tftp
            sidecar bakes <code>ipxe.efi</code> in by default).
            {% else %}
            Nothing answered on <code>{{ tftp_probe.host }}:{{ tftp_probe.port }}</code>.
            On a container deploy: is <code>bty-tftp.service</code> up
            (<code>systemctl status bty-tftp</code> /
            <code>podman ps</code>)? On a host install:
            <code>systemctl status dnsmasq.service</code>. The probe aims at
            the withcache host by default; override it with
            <code>[netboot] tftp_probe_host</code> (env
            <code>$BTY_NETBOOT_TFTP_PROBE_HOST</code>) if your TFTP daemon
            lives elsewhere (e.g. on the LAN router).
            {% endif %}
        </p>

        <h3 class="h6 mt-3 mb-2">Local <code>dnsmasq.service</code></h3>
        <div class="d-flex align-items-center gap-2 mb-2">
            {% 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 %}
            <small class="text-muted">
                {% if tftp.state == 'active' %}
                co-located dnsmasq is running on this host
                {% elif tftp.state in ('inactive', 'unknown') %}
                no local dnsmasq (normal in container deploys; the
                bty-tftp sidecar runs separately and the probe above
                is the canonical signal there)
                {% else %}
                check <code>journalctl -u dnsmasq.service</code>
                {% endif %}
            </small>
        </div>
        <p class="text-muted small mb-0">
            <a href="/ui/settings#dhcp-pxe">
                <i class="bi bi-box-arrow-up-right me-1"></i>DHCP / PXE cheatsheet
            </a>
        </p>
    </div>
</div>

<script>
(function () {
    // esc + fmtBytes come from /static/bty-utils.js (loaded by the
    // layout); local aliases keep the per-page <script> readable.
    var esc = window.btyUtils.esc;
    var fmtBytes = window.btyUtils.fmtBytes;
    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;
        return '<div class="progress" style="height: 16px;">' +
               '<div class="progress-bar" style="width: ' +
               pct.toFixed(1) + '%;">' + pct.toFixed(1) + '%</div></div>';
    }
    function isActive(j) {
        return j && (j.status === "queued" || j.status === "running");
    }

    function renderActive(releases) {
        var tbody = document.querySelector(".bty-workers-downloads-tbody");
        if (!tbody) return;
        var rows = [];
        (releases || []).forEach(function (rf) {
            (rf.artifacts || []).forEach(function (a) {
                if (!isActive(a)) return;
                rows.push({
                    label: '<code>' + esc(rf.tag) + '</code> <small class="text-muted">' +
                           esc(a.name) + '</small>',
                    key: rf.tag,
                    d: a,
                });
            });
        });
        if (!rows.length) {
            tbody.innerHTML = '<tr><td colspan="5" class="text-muted">No active fetches.</td></tr>';
            return;
        }
        rows.sort(function (a, b) {
            var aS = a.d.status === "running" ? 0 : 1;
            var bS = b.d.status === "running" ? 0 : 1;
            return aS - bS;
        });
        tbody.innerHTML = rows.map(function (r) {
            var d = r.d;
            var bytes = fmtBytes(d.bytes_done || 0);
            if (d.bytes_total != null) bytes += " / " + fmtBytes(d.bytes_total);
            var cancel = '<button type="button" class="btn btn-sm btn-outline-danger text-nowrap ' +
                         'bty-workers-cancel" data-key="' +
                         esc(r.key) + '"><i class="bi bi-x-circle me-1"></i>Cancel</button>';
            return "<tr>" +
                   "<td>" + r.label + "</td>" +
                   "<td>" + statusBadge(d.status) + "</td>" +
                   "<td>" + progressBar(d) + "</td>" +
                   "<td class=\"small\">" + esc(bytes) + "</td>" +
                   "<td class=\"text-end\">" + cancel + "</td>" +
                   "</tr>";
        }).join("");
    }

    // Track which keys completed since the last poll so we can reload
    // the page once any release-fetch terminates. The reload picks up
    // the freshly-cached state into the server-rendered artifacts
    // table + the Fetch artifacts button's disabled bit.
    var seenCompletedKeys = null;
    function refresh() {
        var ts = "updated " + new Date().toLocaleTimeString();
        return fetch("/boot/releases", { credentials: "same-origin" })
            .then(function (r) { return r.ok ? r.json() : null; })
            .then(function (rl) {
                renderActive(rl ? rl.fetches : []);
                var statusEl = document.querySelector(".bty-workers-poll-status");
                if (statusEl) statusEl.textContent = rl ? ts : "(poll failed)";
                var nowCompleted = new Set();
                (rl ? rl.fetches : []).forEach(function (f) {
                    if (f.status === "completed" || f.status === "failed") {
                        nowCompleted.add("release:" + f.tag);
                    }
                });
                if (seenCompletedKeys === null) {
                    seenCompletedKeys = nowCompleted;
                    return;
                }
                var fresh = false;
                nowCompleted.forEach(function (k) {
                    if (!seenCompletedKeys.has(k)) fresh = true;
                });
                seenCompletedKeys = nowCompleted;
                if (fresh) setTimeout(function () { window.location.reload(); }, 400);
            });
    }

    // Cancel an in-flight row (event-delegated; rows re-render every poll).
    document.addEventListener("click", function (ev) {
        var btn = ev.target.closest(".bty-workers-cancel");
        if (!btn) return;
        var url = "/boot/releases/" + encodeURIComponent(btn.dataset.key);
        btn.disabled = true;
        fetch(url, { method: "DELETE", credentials: "same-origin" })
            .then(refresh)
            .catch(function () { btn.disabled = false; });
    });

    // "Fetch artifacts" trigger. The button disables immediately on
    // click and STAYS disabled while the fetch runs -- the polling
    // loop above reloads the page on completion, which picks up the
    // freshly-cached state into the server-rendered disabled / enabled
    // bit. Re-enable only on a synchronous enqueue error.
    var fetchBtn = document.getElementById("bty-downloads-fetch-artifacts-btn");
    if (fetchBtn) {
        fetchBtn.addEventListener("click", function () {
            var tag = (fetchBtn.dataset.tag || "latest").trim() || "latest";
            fetchBtn.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);
                return refresh();
            }).catch(function (e) {
                alert("Fetch failed: " + e.message);
                fetchBtn.disabled = false;
            });
        });
    }

    // SSE-driven refresh; the 30s interval is a safety net for the rare
    // case where the EventSource drops without auto-reconnect.
    var handle = null;
    function start() { if (!handle) { refresh(); handle = setInterval(refresh, 30000); } }
    function stop()  { if (handle) { clearInterval(handle); handle = null; } }
    document.addEventListener("visibilitychange", function () {
        if (document.hidden) stop(); else start();
    });
    document.addEventListener("bty-worker-state-changed", function (e) {
        if (e.detail && e.detail.kind === "release") refresh();
    });
    document.addEventListener("bty-worker-events-connected", refresh);
    start();
})();
</script>

{# Recent netboot activity (release fetches + fetch failures). #}
{% with events=boot_events,
        title="Recent Events",
        link_to_full="/ui/events?subject_kind=netboot",
        card_id="netboot-activity" %}
{% include "ui/_events_card.html" %}
{% endwith %}
{% endblock %}