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

{% block subnav %}
<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() %}
    The image catalog. Each entry references a URL (https or oras)
    the live env flashes from. v0.40+: bty-web doesn't host image
    bytes -- withcache holds them when warm, the upstream origin
    serves them when cold. The header carries
    <em>Fetch latest catalog</em> (pull the bty release catalog) and
    <em>Upload catalog</em> (a catalog.toml). Add a single entry
    from <a href="/ui/downloads">Downloads</a>.
{% endcall %}
{% endblock %}

{% block content %}

<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</th>
                    <th>Content SHA</th>
                    <th>Format</th>
                    <th>Source</th>
                    <th class="text-end" style="width: 1%; white-space: nowrap;">Action</th>
                </tr>
            </thead>
            <tbody>
                {% for u in unified %}
                {% set entry_src = u.sources|map(attribute='location')|first %}
                <tr data-row-name="{{ u.names[0] }}">
                    <td>
                        <i class="bi bi-file-earmark-binary text-secondary me-1"></i>
                        <code>{{ u.names[0] }}</code>
                    </td>
                    <td>
                        {% if u.sha256 %}
                        <button type="button"
                                class="btn btn-sm btn-link p-0 align-baseline bty-sha-copy text-decoration-none"
                                data-sha="{{ u.sha256 }}"
                                title="Click to copy the full sha256 ({{ u.sha256 }}) to the clipboard.">
                            <code>{{ u.sha256[:8] }}</code><i class="bi bi-clipboard ms-1"></i>
                        </button>
                        {% else %}
                        <span class="badge bg-light text-dark border"
                              title="no sha declared in the catalog entry. The live env still flashes the URL; an opt-in v0.41 verifier will hash the stream and compare against this column when set.">unset</span>
                        {% endif %}
                    </td>
                    <td><span class="badge bg-secondary">{{ u.format or "?" }}</span></td>
                    <td class="small">
                        {% if entry_src %}
                        {% if entry_src.startswith('oras://') %}
                        <i class="bi bi-box-seam text-muted me-1" title="oras (OCI registry)"></i>
                        {% else %}
                        <i class="bi bi-cloud text-muted me-1" title="https"></i>
                        {% endif %}
                        <code>{{ entry_src }}</code>
                        {% endif %}
                    </td>
                    <td class="text-end text-nowrap">
                        <button type="button"
                                class="btn btn-sm btn-outline-danger bty-catalog-entry-delete-btn"
                                {% if entry_src %}data-src="{{ entry_src }}"{% endif %}
                                title="Remove this entry from the catalog."
                                aria-label="Remove this entry from the catalog">
                            <i class="bi bi-trash"></i>
                        </button>
                    </td>
                </tr>
                {% endfor %}
                {% if not unified %}
                <tr><td colspan="5" class="text-muted text-center py-3">
                    No catalog entries yet. Use <strong>Fetch latest catalog</strong>
                    or <strong>Upload catalog</strong> above, or add a single
                    entry from <a href="/ui/downloads">Downloads</a>.
                </td></tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>

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

    function fallbackCopy(text) {
        // Non-HTTPS / no-Clipboard-API fallback: hidden textarea +
        // document.execCommand("copy"). Returns true on success.
        try {
            var ta = document.createElement("textarea");
            ta.value = text;
            ta.setAttribute("readonly", "");
            ta.style.position = "absolute";
            ta.style.left = "-9999px";
            document.body.appendChild(ta);
            ta.select();
            var ok = document.execCommand("copy");
            document.body.removeChild(ta);
            return ok;
        } catch (e) {
            return false;
        }
    }

    function flashCopyFeedback(btn) {
        var icon = btn.querySelector("i.bi");
        if (!icon) return;
        var orig = icon.className;
        icon.className = "bi bi-check2 ms-1 text-success";
        window.setTimeout(function () {
            icon.className = orig;
        }, 1200);
    }

    document.addEventListener("click", function (ev) {
        var shaBtn = ev.target.closest(".bty-sha-copy");
        if (shaBtn) {
            ev.preventDefault();
            var sha = shaBtn.getAttribute("data-sha");
            if (!sha) return;
            var done = function () { flashCopyFeedback(shaBtn); };
            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(sha).then(done).catch(function () {
                    fallbackCopy(sha) && done();
                });
            } else if (fallbackCopy(sha)) {
                done();
            }
            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; });
        }
    });
})();
</script>

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