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

{% block subnav %}
{# In-page jump links: List + Activity. The Downloads / Hashes sub-sections
   are gone -- their live status lives on /ui/downloads + /ui/hashing. #}
<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="#images-list">List</a>
            <span class="vr"></span>
            <a href="#images-activity">Activity</a>
        </span>
    </div>
</nav>
{% endblock %}

{% block intro %}
{% from "ui/_intro_box.html" import render as intro_box %}
{% call intro_box() %}
    Pre-built system images bty flashes onto target disks, content-
    addressed by sha256. This is the merged catalog (dir scan +
    catalog entries): the header carries <em>Fetch latest catalog</em>
    (pull the bty release catalog) and <em>Upload catalog</em>
    (a catalog.toml). Files dropped into <code>{{ image_root }}</code>
    are picked up and hashed automatically; per-row Fetch / Hash
    buttons enqueue jobs visible on the
    <a href="/ui/downloads">Downloads</a> /
    <a href="/ui/hashing">Hashing</a> pages. Add a single image (URL or
    upload) from <a href="/ui/downloads">Downloads</a>.
{% endcall %}
{% endblock %}

{% block content %}

{# Catalog list: the operator's "what images do I have" view. Header
   carries the two catalog-shape actions (Upload catalog / Fetch latest
   catalog). The per-row Action column triggers fetch / hash / cache-
   delete / entry-delete; results show on /ui/downloads + /ui/hashing. #}
<div class="card mb-3" id="images-list">
    <div class="card-header bg-light fw-semibold d-flex justify-content-between align-items-center flex-nowrap gap-2 py-1">
        <span class="text-nowrap"><i class="bi bi-list-ul me-1"></i>Images</span>
        <span class="d-flex flex-nowrap align-items-center gap-2" style="min-width: 0;">
            <form method="post" action="/ui/catalog/upload" enctype="multipart/form-data"
                  class="d-flex align-items-center gap-1 m-0" style="min-width: 0;">
                <input type="file" required name="file" accept=".toml"
                       class="form-control form-control-sm" style="max-width: 12rem; min-width: 0;"
                       title="catalog.toml: parsed before replacing {{ manifest_path }}">
                <button type="submit" class="btn btn-sm btn-primary flex-shrink-0 text-nowrap">
                    <i class="bi bi-upload me-1"></i>Upload catalog
                </button>
            </form>
            <div class="vr"></div>
            <form method="post" action="/ui/catalog/fetch-release" class="m-0">
                <button type="submit" class="btn btn-sm btn-primary flex-shrink-0 text-nowrap"
                        title="Pull releases/latest/download/catalog.toml from {{ release_repo }} and import its entries">
                    <i class="bi bi-cloud-download me-1"></i>Fetch latest catalog
                </button>
            </form>
        </span>
    </div>
    <div class="table-responsive">
        <table class="table table-hover mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    <th>Name(s)</th>
                    <th>Content SHA</th>
                    <th>Format</th>
                    <th>Sources</th>
                    <th>Cached</th>
                    <th class="text-end" style="width: 1%; white-space: nowrap;">Action</th>
                </tr>
            </thead>
            <tbody>
                {% for u in unified %}
                <tr>
                    <td>
                        <i class="bi bi-file-earmark-binary text-secondary me-1"></i>
                        {% for n in u.names %}
                        <code>{{ n }}</code>{% if not loop.last %}, {% endif %}
                        {% endfor %}
                    </td>
                    <td>
                        {% if u.sha256 %}
                        <code title="{{ u.sha256 }}">{{ u.sha256[:12] }}...</code>
                        {% else %}
                        <span class="badge bg-warning text-dark"
                              title="content sha not computed yet; the entry is still bindable because machines bind by bty_image_ref. The sha lands when the HashManager finishes (local files) or after an explicit Download (remote sources)">unhashed</span>
                        {% endif %}
                    </td>
                    <td><span class="badge bg-secondary">{{ u.format or "?" }}</span></td>
                    <td class="small">
                        {% for s in u.sources %}
                        {% if s.kind == "local" %}
                        <i class="bi bi-hdd text-muted me-1" title="local file"></i><code>{{ s.location }}</code>
                        {% elif s.kind == "url" %}
                        <i class="bi bi-cloud-plus text-muted me-1" title="operator-added URL"></i><code>{{ s.location }}</code>
                        {% else %}
                        <i class="bi bi-cloud text-muted me-1" title="manifest src"></i><code>{{ s.location }}</code>
                        {% endif %}
                        {% if not loop.last %}<br>{% endif %}
                        {% endfor %}
                    </td>
                    <td>
                        {% if u.cached %}
                        <span class="badge bg-success"><i class="bi bi-check-circle me-1"></i>cached</span>
                        {% else %}
                        <span class="badge bg-light text-dark border">available</span>
                        {% endif %}
                    </td>
                    <td class="text-end text-nowrap">
                        {# Dispatch by source shape, not just sha presence:
                           - Has a ``local`` source and no sha -> file on disk
                             needs hashing. Hash button.
                           - No local source -> bytes need fetching. Fetch
                             button. Works for un-sha'd URL / oras entries
                             (the DownloadManager downloads + computes sha +
                             back-fills catalog_entries.disk_image_sha) AND
                             for sha-pinned entries not yet in cache. #}
                        {% set has_local = u.sources|selectattr('kind','equalto','local')|list|length > 0 %}
                        {% set has_remote = u.sources|selectattr('kind','in',['manifest','url'])|list|length > 0 %}
                        {% set entry_src = u.sources|selectattr('kind','in',['manifest','url'])|map(attribute='location')|first %}
                        {# Render per-row actions as a Bootstrap btn-group
                           so the buttons sit flush -- same idiom as the
                           Backups page's Download + Delete. The group is
                           omitted entirely when no action applies (sha-
                           pinned + cached + has_remote=False), in which
                           case the cell shows a muted dash. #}
                        {% if has_remote or u.cached or (not u.sha256 and has_local) %}
                        <div class="btn-group btn-group-sm" role="group">
                            {% if not u.sha256 and has_local %}
                            <button type="button"
                                    class="btn btn-warning text-nowrap bty-hash-btn"
                                    data-name="{{ u.names[0] }}">
                                <i class="bi bi-hash me-1"></i>Hash
                            </button>
                            {% elif not u.cached %}
                            <button type="button"
                                    class="btn btn-primary text-nowrap bty-fetch-btn"
                                    data-name="{{ u.names[0] }}">
                                <i class="bi bi-cloud-download me-1"></i>Fetch
                            </button>
                            {% endif %}
                            {% if u.cached and has_remote %}
                            <button type="button"
                                    class="btn btn-outline-warning bty-cache-delete-btn"
                                    data-name="{{ u.names[0] }}"
                                    title="Delete cached bytes (entry stays; Fetch re-downloads)"
                                    aria-label="Delete cached bytes">
                                <i class="bi bi-eraser"></i>
                            </button>
                            {% endif %}
                            {% if has_remote %}
                            <button type="button"
                                    class="btn btn-outline-danger bty-catalog-entry-delete-btn"
                                    data-src="{{ entry_src }}"
                                    title="Remove this entry from the catalog"
                                    aria-label="Remove this entry from the catalog">
                                <i class="bi bi-trash"></i>
                            </button>
                            {% endif %}
                        </div>
                        {% else %}
                        <span class="text-muted small">-</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
                {% if not unified %}
                <tr><td colspan="6" class="text-muted text-center py-3">
                    No images yet. Use <strong>Fetch latest</strong> or
                    <strong>Upload catalog</strong> above, drop a
                    <code>.qcow2</code> / <code>.img</code> /
                    <code>.img.zst</code> / <code>.img.xz</code> /
                    <code>.img.gz</code> / <code>.img.bz2</code> file into
                    <code>{{ image_root }}</code>, or add one via the
                    <strong>Add image</strong> card below.
                </td></tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>

<script>
(function () {
    "use strict";

    // Per-row catalog actions. Triggers enqueue against the manager
    // endpoints; live progress + cancel UI lives on /ui/downloads
    // and /ui/hashing (the merged /ui/workers page was split apart).
    //
    // A 2s poll mirrors active /catalog/downloads + /catalog/hashes
    // state onto the per-row Fetch / Hash buttons so the catalog
    // table reflects "this entry is downloading" without the operator
    // having to flip pages. The button shows ``Downloading`` /
    // ``Hashing`` while a job is queued or running for its name,
    // returns to ``Fetch`` / ``Hash`` (or is removed entirely when
    // the row caches) when the job terminates. The completion case
    // triggers a page reload so the catalog row's ``cached`` badge
    // + Action column re-render.
    function setBtnStateBusy(btn, busyLabel, busyIcon) {
        // Preserve the original label + icon on first transition so
        // we can restore on terminal status.
        if (!btn.dataset.originalLabel) {
            btn.dataset.originalLabel = btn.innerHTML;
        }
        btn.disabled = true;
        btn.innerHTML = '<i class="bi ' + busyIcon + ' me-1"></i>' + busyLabel;
    }
    function setBtnStateIdle(btn) {
        if (btn.dataset.originalLabel) {
            btn.innerHTML = btn.dataset.originalLabel;
        }
        btn.disabled = false;
    }
    function syncButtonsFromPoll() {
        // Build sets of names with an active (queued | running) job
        // for each kind; flip every matching button.  ``allSettled``
        // so one bad endpoint doesn't break the other.
        Promise.allSettled([
            fetch("/catalog/downloads", { credentials: "same-origin" })
                .then(function (r) { return r.ok ? r.json() : null; }),
            fetch("/catalog/hashes", { credentials: "same-origin" })
                .then(function (r) { return r.ok ? r.json() : null; }),
        ]).then(function (results) {
            var dl = results[0].status === "fulfilled" ? results[0].value : null;
            var hs = results[1].status === "fulfilled" ? results[1].value : null;
            var activeDl = new Set();
            (dl && dl.downloads || []).forEach(function (j) {
                if (j.status === "queued" || j.status === "running") activeDl.add(j.name);
            });
            var activeHs = new Set();
            (hs && hs.hashes || []).forEach(function (j) {
                if (j.status === "queued" || j.status === "running") activeHs.add(j.name);
            });
            document.querySelectorAll(".bty-fetch-btn").forEach(function (btn) {
                var name = btn.getAttribute("data-name");
                if (activeDl.has(name)) {
                    setBtnStateBusy(btn, "Downloading", "bi-arrow-repeat");
                } else if (btn.dataset.originalLabel) {
                    // We previously marked this button busy and the
                    // job is no longer active -> it terminated. Reload
                    // so the catalog row's ``cached`` badge + Action
                    // column re-render with the new state.
                    window.location.reload();
                }
            });
            document.querySelectorAll(".bty-hash-btn").forEach(function (btn) {
                var name = btn.getAttribute("data-name");
                if (activeHs.has(name)) {
                    setBtnStateBusy(btn, "Hashing", "bi-arrow-repeat");
                } else if (btn.dataset.originalLabel) {
                    window.location.reload();
                }
            });
        });
    }
    // SSE-driven sync; the 30s interval is a safety net for the rare
    // case where the EventSource drops without auto-reconnect. Was 2s
    // pre-SSE.
    var pollHandle = setInterval(syncButtonsFromPoll, 30000);
    document.addEventListener("visibilitychange", function () {
        // Pause polling in a backgrounded tab.
        if (document.hidden && pollHandle) {
            clearInterval(pollHandle);
            pollHandle = null;
        } else if (!document.hidden && !pollHandle) {
            syncButtonsFromPoll();
            pollHandle = setInterval(syncButtonsFromPoll, 30000);
        }
    });
    document.addEventListener("bty-worker-state-changed", function (e) {
        if (!e.detail) return;
        if (e.detail.kind === "download" || e.detail.kind === "hash") {
            syncButtonsFromPoll();
        }
    });
    document.addEventListener("bty-worker-events-connected", syncButtonsFromPoll);
    syncButtonsFromPoll();  // initial draw, no wait

    document.addEventListener("click", function (ev) {
        var fetchBtn = ev.target.closest(".bty-fetch-btn");
        if (fetchBtn) {
            ev.preventDefault();
            var name = fetchBtn.getAttribute("data-name");
            setBtnStateBusy(fetchBtn, "Downloading", "bi-arrow-repeat");
            fetch("/catalog/downloads", {
                method: "POST",
                credentials: "same-origin",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ name: name }),
            }).then(function (r) {
                if (!r.ok) throw new Error("HTTP " + r.status);
                // Don't restore the button -- the poller above will
                // either hold it busy (job queued / running) or
                // reload the page (job terminated, catalog state
                // changed).
            }).catch(function () {
                setBtnStateIdle(fetchBtn);
            });
            return;
        }
        var hashBtn = ev.target.closest(".bty-hash-btn");
        if (hashBtn) {
            ev.preventDefault();
            var name = hashBtn.getAttribute("data-name");
            setBtnStateBusy(hashBtn, "Hashing", "bi-arrow-repeat");
            fetch("/catalog/hashes", {
                method: "POST",
                credentials: "same-origin",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ name: name }),
            }).then(function (r) {
                if (!r.ok) throw new Error("HTTP " + r.status);
            }).catch(function () { setBtnStateIdle(hashBtn); });
            return;
        }
        var entryDeleteBtn = ev.target.closest(".bty-catalog-entry-delete-btn");
        if (entryDeleteBtn) {
            ev.preventDefault();
            var src = entryDeleteBtn.getAttribute("data-src");
            if (!confirm("Remove this entry from the catalog?\n\n" + src)) return;
            entryDeleteBtn.disabled = true;
            fetch("/catalog/entries?src=" + encodeURIComponent(src), {
                method: "DELETE",
                credentials: "same-origin",
            }).then(function (resp) {
                if (resp.ok) {
                    window.location.reload();
                    return;
                }
                resp.text().then(function (body) {
                    var msg;
                    try { msg = JSON.parse(body).detail || body; }
                    catch (_e) { msg = body || ("HTTP " + resp.status); }
                    alert("Could not remove entry:\n\n" + msg);
                    entryDeleteBtn.disabled = false;
                });
            }).catch(function () { entryDeleteBtn.disabled = false; });
            return;
        }
        var cacheDeleteBtn = ev.target.closest(".bty-cache-delete-btn");
        if (cacheDeleteBtn) {
            ev.preventDefault();
            var name = cacheDeleteBtn.getAttribute("data-name");
            if (!confirm("Delete the cached bytes for this image?\n\n" +
                         name + "\n\nThe catalog entry stays; the next " +
                         "Fetch re-downloads.")) return;
            cacheDeleteBtn.disabled = true;
            fetch("/catalog/cache/" + encodeURIComponent(name), {
                method: "DELETE",
                credentials: "same-origin",
            }).then(function () {
                window.location.reload();
            }).catch(function () { cacheDeleteBtn.disabled = false; });
        }
    });
})();

</script>

{# Image-relevant event slice (uploads, hashes, catalog adds /
   deletes). #}
{% with events=image_events,
        title="Recent Events",
        link_to_full="/ui/events?subject_kind=image",
        card_id="images-activity" %}
{% include "ui/_events_card.html" %}
{% endwith %}
{% endblock %}