{% extends "ui/_layout.html" %}
{% from "ui/_table_macros.html" import sort_header, pagination_footer with context %}
{% 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. bty-web doesn't host image
    bytes -- withcache holds them when warm, the upstream origin
    serves them when cold. The header carries three add-paths:
    <em>Add image</em> (a single URL), <em>Upload catalog</em>
    (a catalog.toml), and <em>Fetch latest catalog</em> (pull the
    bty release catalog).
{% 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;">
            {# Single-entry add: http(s):// trusts the upstream bytes on
               first flash; oras:// resolves the OCI manifest at add time.
               ``type="text"`` not ``url`` since browsers reject oras://
               under HTML5 URL validation; the server-side Pydantic still
               validates. The most common add-path lives first so the
               operator's eye lands on it. #}
            <form method="post" action="/ui/catalog/entries"
                  class="d-flex align-items-center gap-1 m-0" style="min-width: 0;">
                <input type="text" required class="form-control form-control-sm"
                       id="image_url" name="image_url"
                       style="max-width: 18rem; min-width: 0;"
                       placeholder="https://...img.gz  |  oras://owner/repo:tag"
                       title="http(s):// trusts the upstream bytes on first flash; oras:// resolves the OCI manifest digest at add time.">
                <button type="submit" class="btn btn-sm btn-primary flex-shrink-0 text-nowrap">
                    <i class="bi bi-cloud-plus me-1"></i>Add image
                </button>
            </form>
            <div class="vr"></div>
            <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 catalog.toml for tag '{{ catalog_tag }}' from {{ catalog_repo }} and import its entries">
                    <i class="bi bi-cloud-download me-1"></i>Fetch '<strong>{{ catalog_tag }}</strong>' catalog
                </button>
            </form>
        </span>
    </div>
    {# Free-text search across name / format / arch / source. Typing
       "freebsd" narrows the list to just the freebsd images. Carries
       the active sort + per_page through hidden inputs. #}
    <div class="card-body py-2 border-bottom">
        <form method="get" class="d-flex align-items-center gap-2 m-0">
            {% if sort.column != 'name' %}<input type="hidden" name="sort" value="{{ sort.column }}">{% endif %}
            {% if sort.direction != 'asc' %}<input type="hidden" name="dir" value="{{ sort.direction }}">{% endif %}
            {% if page.per_page != per_page_choices[1] %}<input type="hidden" name="per_page" value="{{ page.per_page }}">{% endif %}
            <input type="search" name="q" value="{{ q or '' }}"
                   class="form-control form-control-sm" style="max-width: 24rem;"
                   placeholder="Search name / format / arch (e.g. freebsd)">
            <button type="submit" class="btn btn-sm btn-outline-secondary">
                <i class="bi bi-search me-1"></i>Search
            </button>
            {% if q %}
            <a href="?" class="btn btn-sm btn-link">Clear</a>
            <span class="text-muted small">Filtered by &ldquo;<code>{{ q }}</code>&rdquo;</span>
            {% endif %}
        </form>
    </div>
    <div class="table-responsive">
        <table class="table table-hover mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    {{ sort_header('Name', 'name', sort, preserved) }}
                    {{ sort_header('Content SHA', 'sha256', sort, preserved) }}
                    {{ sort_header('Format', 'format', sort, preserved) }}
                    {{ sort_header('Arch', 'arch', sort, preserved) }}
                    {{ sort_header('Source', 'ref', sort, preserved) }}
                    <th>Status</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>
                        {% if u.arch %}
                        <span class="badge bg-light text-dark border" title="Best-effort architecture hint derived from the image filename (informational; never restricts flashing).">{{ u.arch }}</span>
                        {% else %}
                        <span class="text-muted">&mdash;</span>
                        {% endif %}
                    </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="small bty-check-result text-muted">
                        <span class="text-muted">&mdash;</span>
                    </td>
                    <td class="text-end text-nowrap">
                        {% if entry_src %}
                        <button type="button"
                                class="btn btn-sm btn-outline-secondary bty-catalog-entry-check-btn me-1"
                                data-src="{{ entry_src }}"
                                title="Check whether the origin is reachable and whether withcache already holds it (the check also warms an auto-fetch withcache)."
                                aria-label="Check origin reachability and withcache status">
                            <i class="bi bi-arrow-repeat"></i> Check
                        </button>
                        {% endif %}
                        <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="7" class="text-muted text-center py-3">
                    No catalog entries yet. Use <strong>Add image</strong>,
                    <strong>Upload catalog</strong>, or
                    <strong>Fetch latest catalog</strong> in the header above.
                </td></tr>
                {% endif %}
            </tbody>
        </table>
    </div>
    {{ pagination_footer(page, preserved, label='images') }}
</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);
    }

    function fmtBytes(n) {
        if (!n || n <= 0) return "";
        var u = ["B", "KiB", "MiB", "GiB", "TiB"], i = 0, v = n;
        while (v >= 1024 && i < u.length - 1) { v /= 1024; i++; }
        return v.toFixed(i ? 1 : 0) + " " + u[i];
    }

    function esc(s) {
        return String(s == null ? "" : s).replace(/[&<>"]/g, function (c) {
            return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c];
        });
    }

    function badge(cls, text, title) {
        return '<span class="badge ' + cls + '"'
            + (title ? ' title="' + esc(title) + '"' : "")
            + '>' + esc(text) + '</span>';
    }

    function renderCheck(d) {
        var o = d.origin || {}, w = d.withcache || {}, parts = [];
        if (o.reachable) {
            var sz = fmtBytes(o.size_bytes);
            parts.push(badge("bg-success", "origin OK" + (sz ? " · " + sz : "")));
        } else {
            parts.push(badge("bg-danger", "origin down", o.error || ""));
        }
        if (!w.configured) {
            parts.push(badge("bg-secondary", "no withcache"));
        } else if (w.applicable === false) {
            parts.push(badge("bg-secondary", "withcache n/a", "no resolved URL for this scheme; only http(s) and oras catalog entries warm the cache"));
        } else if (w.hit) {
            parts.push(badge("bg-success", "cached"));
        } else {
            parts.push(badge("bg-warning text-dark", "warming", "not cached yet; the check enqueued a background fetch, click again shortly"));
        }
        var ts = String(d.checked_at || "").replace("T", " ").replace("+00:00", "Z");
        return parts.join(" ")
            + '<div class="text-muted" style="font-size:0.75em;">' + esc(ts) + '</div>';
    }

    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; });
            return;
        }
        var checkBtn = ev.target.closest(".bty-catalog-entry-check-btn");
        if (checkBtn) {
            ev.preventDefault();
            var csrc = checkBtn.getAttribute("data-src");
            if (!csrc) return;
            var row = checkBtn.closest("tr");
            var cell = row ? row.querySelector(".bty-check-result") : null;
            checkBtn.disabled = true;
            if (cell) {
                cell.innerHTML = '<span class="spinner-border spinner-border-sm text-secondary" '
                    + 'role="status" aria-hidden="true"></span>';
            }
            var body = new URLSearchParams();
            body.append("src", csrc);
            fetch("/ui/catalog/entries/check", {
                method: "POST",
                credentials: "same-origin",
                headers: { "Content-Type": "application/x-www-form-urlencoded" },
                body: body.toString(),
            }).then(function (resp) {
                return resp.json().then(function (data) {
                    if (!resp.ok) throw new Error((data && data.detail) || ("HTTP " + resp.status));
                    if (cell) cell.innerHTML = renderCheck(data);
                });
            }).catch(function (e) {
                if (cell) {
                    cell.innerHTML = '<span class="text-danger">check failed: '
                        + esc(e.message) + '</span>';
                } else {
                    alert("Check failed: " + e.message);
                }
            }).then(function () { checkBtn.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 %}