{% extends "ui/_layout.html" %}
{% from "ui/_table_macros.html" import sort_header, pagination_inline, copy_chip with context %}
{% block title %}Images - bty-web{% endblock %}

{% block subnav %}
{# Left: in-page jump links. Right: the three add-paths (Add image
   / Upload catalog / Fetch catalog), moved here from the card
   header so the page-level actions live in the page chrome and
   the card-body stays focused on the catalog 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="#images-list">List</a>
            <span class="vr"></span>
            <a href="#images-activity">Activity</a>
        </span>
        <span class="subnav-actions d-flex flex-wrap align-items-center gap-2 ms-auto">
            <form method="post" action="/ui/catalog/entries"
                  class="d-flex align-items-center gap-1 m-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>
            <span class="vr"></span>
            <form method="post" action="/ui/catalog/upload" enctype="multipart/form-data"
                  class="d-flex align-items-center gap-1 m-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
                </button>
            </form>
            <span class="vr"></span>
            <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="GET {{ catalog_url }} and import its entries">
                    <i class="bi bi-cloud-download me-1"></i>Fetch catalog
                </button>
            </form>
        </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">
    {# Card header: "Images | Filter: <input> <search>" flexes to
       fill the left side; pagination sits on the right. The three
       add-paths moved up into the subnav strip. #}
    <div class="card-header bg-light fw-semibold d-flex flex-wrap align-items-center gap-3 py-2">
        <form method="get" class="d-flex align-items-center gap-2 m-0 flex-grow-1" style="min-width: 14rem;">
            {% 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[0] %}<input type="hidden" name="per_page" value="{{ page.per_page }}">{% endif %}
            <span class="text-nowrap"><i class="bi bi-list-ul me-1"></i>Images</span>
            <span class="vr"></span>
            <label for="images-q" class="text-nowrap text-muted small mb-0">Filter:</label>
            <input type="search" name="q" id="images-q" value="{{ q or '' }}"
                   class="form-control form-control-sm flex-grow-1"
                   placeholder="name / format / arch (e.g. freebsd)">
            <button type="submit" class="btn btn-sm btn-outline-secondary" title="Search">
                <i class="bi bi-search"></i>
            </button>
            {% if q %}
            <a href="?" class="btn btn-sm btn-link text-nowrap">Clear</a>
            {% endif %}
        </form>
        {{ pagination_inline(page, preserved, label='images') }}
    </div>
    <div class="table-responsive">
        <table class="table table-striped 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 %}
                        {{ copy_chip(u.sha256) }}
                        {% else %}
                        <span class="badge bg-light text-dark border"
                              title="no sha declared in the catalog entry. The live env still flashes the URL, but skips the stream-hash check it would perform if this column were set (curl | tee | sha256sum | dd would refuse on a mismatch).">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 %}
                        {{ copy_chip(entry_src, shown=entry_src) }}
                        {% 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>
</div>

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

    // Copy-to-clipboard is centralised in bty-utils.js (loaded by
    // ``_layout.html``); the per-page handler was a duplicate from
    // before that helper existed. Page-local JS now only owns the
    // catalog-entry actions (Check / Delete) below.

    // esc + fmtBytes come from /static/bty-utils.js (loaded by the
    // layout in <head>; always present by the time this script
    // runs at the bottom of <body>).
    var esc = window.btyUtils.esc;
    var fmtBytes = window.btyUtils.fmtBytes;

    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 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="Last " + recent_events_limit|string + " Events",
        link_to_full="/ui/events?q=catalog",
        card_id="images-activity" %}
{% include "ui/_events_card.html" %}
{% endwith %}
{% endblock %}