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

{% block subnav %}
{# In-page jump links to the fetch jobs table + the activity table. #}
<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="#fetches-list">List</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() %}
    Fetch the bty live-env netboot artifacts (kernel / initrd /
    squashfs) from GitHub releases and watch the jobs run. The release
    tag is an editable value on the <a href="/ui/settings">Settings</a>
    page. The present/missing artifact inventory and the TFTP daemon
    controls live on the <a href="/ui/netboot">Netboot</a> page.
{% endcall %}
{% endblock %}

{% block content %}
{# 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. The Fetch control lives inline in the header. #}
<div class="card mb-4" id="fetches-list">
    <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-arrow-down-circle me-1"></i>Artifact Fetches
              <span class="text-muted small bty-fetch-poll-status ms-1">refreshing...</span></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 text-nowrap" 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>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 text-nowrap 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 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>

{# Recent activity for boot artifacts: release fetches + fetch
   failures via the per-subject events card. #}
{% with events=boot_events,
        title="Recent netboot activity",
        link_to_full="/ui/events?subject_kind=boot",
        card_id="netboot-activity" %}
{% include "ui/_events_card.html" %}
{% endwith %}
{% endblock %}