{% extends "layout.html" %}
{% from "_partials/table_helpers.html" import search_input, sort_header, pagination_inline %}
{% from "_partials/recent_events.html" import recent_events_card %}
{% from "_partials/page_description.html" import page_description %}
{% block title %}Catalog - pixie{% endblock %}
{% block subnav %}
<nav class="navbar subnav-strip" aria-label="Section sub-navigation">
    <div class="container">
        {# LEFT: relative anchor links to in-page sections. #}
        <span class="subnav-jumps d-flex align-items-center flex-wrap">
            <a href="#entries">Entries</a>
        </span>
        {# RIGHT: inline action form. Import a catalog.toml URL and
           upsert every entry. #}
        <form method="post" action="/ui/catalog/import"
              class="subnav-actions d-flex align-items-center gap-1 m-0 ms-auto">
            <label for="catalog_url" class="text-white-50 small mb-0 flex-shrink-0"
                   title="Import a catalog.toml URL">
                <i class="bi bi-cloud-arrow-down"></i>
            </label>
            <input type="url" id="catalog_url" name="url"
                   class="form-control form-control-sm"
                   style="max-width: 22rem; min-width: 0;"
                   value="{{ default_catalog_url }}"
                   placeholder="catalog.toml URL"
                   title="Defaults to pixie's curated catalog (the netboot-capable subset). Replace to import a different catalog.toml, e.g. the full nosi catalog."
                   required>
            <button type="submit" class="btn btn-sm btn-primary flex-shrink-0 text-nowrap">
                Import
            </button>
        </form>
    </div>
</nav>
{% endblock %}
{% block content %}
{{ page_description('journal-code', 'Images pixie can flash or netboot. Add an entry with a source URL, then fetch it to pull the bytes onto pixie. An entry is bindable once fetched; deletion is safe only after every machine pointing at it is rebound.') }}
<div class="card" id="entries">
    {# Card header: title/label on the left, filter form inline in
       the middle, pagination + per-page on the right -- same
       toolbar shape bty uses on /ui/events. #}
    <div class="card-header bg-light fw-semibold d-flex flex-wrap align-items-center gap-3 py-2">
        <span class="text-nowrap"><i class="bi bi-collection me-1"></i>Catalog</span>
        <span class="vr"></span>
        {{ search_input('/ui/catalog', q, preserved, 'name / src / arch / format / description') }}
        {{ pagination_inline(page_state, preserved, label='entries') }}
    </div>
    {% if entries %}
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
                <tr>
                    {{ sort_header('Entry', 'name', sort, preserved) }}
                    {{ sort_header('Type', 'format', sort, preserved) }}
                    <th scope="col">Fetch state</th>
                    <th scope="col">NBD</th>
                    <th scope="col" class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for e in entries %}
                {% set st = fetch_states.get(e.name) or {} %}
                {% set exp = exports_by_sha.get(e.content_sha256) if e.content_sha256 else none %}
                <tr>
                    <td>
                        <div class="fw-semibold">
                            <a href="/ui/catalog/{{ e.name }}" class="text-decoration-none">
                                <code>{{ e.name }}</code>
                            </a>
                        </div>
                        {% if e.description %}
                        <div class="text-muted small">{{ e.description }}</div>
                        {% endif %}
                        <div class="text-muted small">
                            <i class="bi bi-link-45deg"></i>
                            <code>{{ e.src }}</code>
                        </div>
                        {% if e.netboot_src %}
                        <div class="text-muted small">
                            <i class="bi bi-box-seam"></i>
                            netboot bundle: <code>{{ e.netboot_src }}</code>
                        </div>
                        {% endif %}
                    </td>
                    <td>
                        {% if e.bindable %}
                        <span class="badge text-bg-primary">
                            <i class="bi bi-hdd me-1"></i>Disk image
                        </span>
                        {% else %}
                        <span class="badge text-bg-info">
                            <i class="bi bi-box-seam me-1"></i>Netboot bundle
                        </span>
                        {% endif %}
                        <div class="text-muted small mt-1">
                            <span class="badge text-bg-secondary">{{ e.format }}</span>
                            {% if e.arch %}<span class="ms-1">{{ e.arch }}</span>{% endif %}
                        </div>
                    </td>
                    <td data-fetch-cell="{{ e.name }}">
                        {% if st.state == "fetching" %}
                        {# Live phase pill: server-rendered starting
                           state; the poll script below rewrites this
                           cell's inner HTML every 2s when there's an
                           in-flight fetch. Phases in the sub-state
                           dict: ``downloading`` (+bytes_downloaded /
                           total_bytes), ``decompressing`` (+format),
                           ``unpacking`` (netboot bundles). #}
                        {% if st.phase == "downloading" %}
                        <span class="badge text-bg-primary">
                            <i class="bi bi-cloud-download me-1"></i>downloading
                        </span>
                        {% if st.total_bytes %}
                        <div class="text-muted small font-monospace">
                            {{ st.bytes_downloaded or 0 }} / {{ st.total_bytes }} bytes
                        </div>
                        {% elif st.bytes_downloaded %}
                        <div class="text-muted small font-monospace">
                            {{ st.bytes_downloaded }} bytes so far
                        </div>
                        {% endif %}
                        {% elif st.phase == "decompressing" %}
                        <span class="badge text-bg-primary">
                            <i class="bi bi-box-arrow-in-down me-1"></i>decompressing
                        </span>
                        {% if st.format %}
                        <div class="text-muted small">{{ st.format }}</div>
                        {% endif %}
                        {% elif st.phase == "unpacking" %}
                        <span class="badge text-bg-primary">
                            <i class="bi bi-box2 me-1"></i>unpacking
                        </span>
                        {% else %}
                        <span class="badge text-bg-primary">
                            <i class="bi bi-arrow-down-circle me-1"></i>fetching&hellip;
                        </span>
                        {% endif %}
                        {% if st.started_at %}
                        <div class="text-muted small">since {{ st.started_at | fmt_ts }}</div>
                        {% endif %}
                        {% elif st.state == "error" %}
                        <span class="badge text-bg-danger" title="{{ st.error or '' }}">
                            <i class="bi bi-exclamation-circle me-1"></i>error
                        </span>
                        {% if st.error %}
                        <div class="text-muted small">{{ st.error }}</div>
                        {% endif %}
                        {% elif st.state == "unchanged" %}
                        {# The operator clicked Update but the entry was
                           already at the current sha and the on-disk
                           bytes were intact. The pill lingers ~8 s (the
                           handler auto-clears it) so the click has a
                           visible acknowledgement, then the row falls
                           back to the plain "fetched" badge. #}
                        <span class="badge text-bg-info" title="the on-disk bytes match the currently-recorded sha; nothing to fetch">
                            <i class="bi bi-check2-all me-1"></i>already at latest
                        </span>
                        {% if e.content_sha256 %}
                        <div class="text-muted small font-monospace">
                            {{ e.content_sha256[:12] }}
                        </div>
                        {% endif %}
                        {% elif e.content_sha256 %}
                        <span class="badge text-bg-success">
                            <i class="bi bi-check-circle me-1"></i>fetched
                        </span>
                        <div class="text-muted small font-monospace">
                            {{ e.content_sha256[:12] }}
                        </div>
                        {% if e.size_bytes %}
                        <div class="text-muted small">{{ e.size_bytes }} bytes</div>
                        {% endif %}
                        {% else %}
                        <span class="badge text-bg-secondary">
                            <i class="bi bi-dash-circle me-1"></i>not fetched
                        </span>
                        {% endif %}
                    </td>
                    <td>
                        {% if not e.bindable %}
                        <span class="text-muted small">
                            <i class="bi bi-dash"></i> (HTTP artifact)
                        </span>
                        {% elif exp is none %}
                        <span class="text-muted small">
                            <i class="bi bi-dash"></i> not serving
                        </span>
                        {% elif exp.status == 'running' %}
                        <span class="badge text-bg-success">
                            <i class="bi bi-broadcast me-1"></i>running
                        </span>
                        <div class="text-muted small font-monospace">port {{ exp.nbd_port }}</div>
                        {% elif exp.status == 'error' %}
                        <span class="badge text-bg-danger">
                            <i class="bi bi-exclamation-circle me-1"></i>error
                        </span>
                        {% if exp.error %}
                        <div class="text-danger small">{{ exp.error }}</div>
                        {% endif %}
                        {% else %}
                        <span class="badge text-bg-secondary">{{ exp.status }}</span>
                        {% endif %}
                    </td>
                    <td class="text-end text-nowrap">
                        {# All three action buttons are ALWAYS rendered so an
                           operator's eye finds them at the same X position in
                           every row. Verb + enabled state track the row's
                           current state: no bytes on disk -> Fetch; a prior
                           fetch failed -> Retry; already have bytes -> Update
                           (re-runs the fetch pipeline; picks up a moved
                           oras:// tag's new manifest); in-flight fetch ->
                           Fetching (disabled). Update is enabled because
                           labelling a fetched entry as "Fetch" makes an
                           operator instinctively hit it thinking bytes are
                           missing. Stop is disabled when there is no NBD
                           export to stop; Delete is always enabled. #}
                        {% set fetching = st.state == 'fetching' %}
                        {% set fetch_errored = st.state == 'error' %}
                        {% set already_fetched = e.content_sha256 and not fetch_errored %}
                        <form method="post" action="/ui/catalog/fetch" class="d-inline">
                            <input type="hidden" name="name" value="{{ e.name }}">
                            <button type="submit" class="btn btn-sm btn-outline-primary"
                                    {% if fetching %}disabled{% endif %}
                                    title="{% if fetching %}fetch already in flight{% elif already_fetched %}re-run the fetch pipeline; picks up a moved oras:// tag's new bytes{% elif fetch_errored %}retry the failed fetch{% else %}download the bytes for this entry{% endif %}">
                                {% if fetching %}
                                <i class="bi bi-hourglass-split me-1"></i>Fetching
                                {% elif fetch_errored %}
                                <i class="bi bi-arrow-clockwise me-1"></i>Retry
                                {% elif already_fetched %}
                                <i class="bi bi-arrow-repeat me-1"></i>Update
                                {% else %}
                                <i class="bi bi-arrow-down-circle me-1"></i>Fetch
                                {% endif %}
                            </button>
                        </form>
                        <form method="post" action="/ui/exports/delete" class="d-inline"
                              title="{% if exp is none %}no NBD export to stop{% else %}stop the NBD export ({{ exp.name }}); the catalog entry stays{% endif %}">
                            <input type="hidden" name="name" value="{{ exp.name if exp is not none else '' }}">
                            <button type="submit"
                                    class="btn btn-sm btn-outline-warning"
                                    aria-label="{% if exp is none %}No NBD export for {{ e.name }}{% else %}Stop NBD export {{ exp.name }}{% endif %}"
                                    {% if exp is none %}disabled{% endif %}>
                                <i class="bi bi-stop-circle" aria-hidden="true"></i>
                            </button>
                        </form>
                        <form method="post" action="/ui/catalog/delete" class="d-inline"
                              title="Delete this catalog entry (does not delete the fetched blob)."
                              onsubmit="return confirm('Delete catalog entry {{ e.name }}? The fetched blob stays on disk.');">
                            <input type="hidden" name="name" value="{{ e.name }}">
                            <button type="submit"
                                    class="btn btn-sm btn-outline-danger"
                                    aria-label="Delete catalog entry {{ e.name }}">
                                <i class="bi bi-trash" aria-hidden="true"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="card-body">
        <p class="text-muted mb-0">
            <i class="bi bi-inbox me-1"></i>
            {% if q %}
            No entries match <code>{{ q }}</code>.
            {% else %}
            No entries yet. Paste a catalog URL in the bar above and hit Import;
            entries land here staged (not fetched) so you can pick the ones to
            pull with Fetch.
            {% endif %}
        </p>
    </div>
    {% endif %}
</div>

<script>
// Live fetch-state poller. As long as any row in the current view has
// a data-fetch-cell whose innerHTML contains "fetching" / "downloading"
// / "decompressing" / "unpacking", poll /ui/catalog/fetch-states.json
// every 2 s and rewrite the cells in place. Stops polling when nothing
// in the current view is in flight anymore -- an operator on a full
// catalog page with 200 rows won't churn network for rows that are
// already done. A completed row (state=='done' or 'error') triggers
// one full-page reload so the fetched/error pill + Actions column
// reflect the terminal state without hand-crafted templating here.
(function () {
    const POLL_MS = 2000;
    const cells = document.querySelectorAll("[data-fetch-cell]");
    if (!cells.length) return;

    function fmtBytes(n) {
        if (n == null) return "";
        if (n < 1024) return n + " B";
        if (n < 1024 * 1024) return (n / 1024).toFixed(1) + " KiB";
        if (n < 1024 * 1024 * 1024) return (n / (1024 * 1024)).toFixed(1) + " MiB";
        return (n / (1024 * 1024 * 1024)).toFixed(2) + " GiB";
    }

    function renderCell(cell, state) {
        if (!state || state.state !== "fetching") return false;
        let icon = "bi-arrow-down-circle", label = "fetching…";
        let sub = "";
        if (state.phase === "downloading") {
            icon = "bi-cloud-download"; label = "downloading";
            const done = state.bytes_downloaded || 0;
            if (state.total_bytes) {
                const pct = Math.floor((done / state.total_bytes) * 100);
                sub = `${fmtBytes(done)} / ${fmtBytes(state.total_bytes)} (${pct}%)`;
            } else if (done) {
                sub = `${fmtBytes(done)} so far`;
            }
        } else if (state.phase === "decompressing") {
            icon = "bi-box-arrow-in-down"; label = "decompressing";
            if (state.format) sub = state.format;
        } else if (state.phase === "unpacking") {
            icon = "bi-box2"; label = "unpacking";
        }
        let html = `<span class="badge text-bg-primary"><i class="bi ${icon} me-1"></i>${label}</span>`;
        if (sub) html += `<div class="text-muted small font-monospace">${sub}</div>`;
        cell.innerHTML = html;
        return true;
    }

    let interval = null;
    async function poll() {
        try {
            const r = await fetch("/ui/fetch-states.json", {credentials: "same-origin"});
            if (!r.ok) return;
            const states = await r.json();
            let anyInFlight = false;
            let anyJustFinished = false;
            cells.forEach((cell) => {
                const name = cell.getAttribute("data-fetch-cell");
                const st = states[name];
                if (st && st.state === "fetching") {
                    renderCell(cell, st);
                    anyInFlight = true;
                } else if (cell.textContent.match(/fetching|downloading|decompressing|unpacking/i)) {
                    // Was in-flight last render; the server-side state
                    // moved on. Trigger one reload so the terminal
                    // pill + Actions column show the correct state.
                    anyJustFinished = true;
                }
            });
            if (anyJustFinished) {
                window.location.reload();
            } else if (!anyInFlight && interval) {
                clearInterval(interval);
                interval = null;
            }
        } catch (e) { /* swallow; try again next tick */ }
    }

    // Only spin up polling when a row starts life "in flight".
    const hasInFlightRow = Array.from(cells).some((c) =>
        c.textContent.match(/fetching|downloading|decompressing|unpacking/i)
    );
    if (hasInFlightRow) {
        poll();
        interval = setInterval(poll, POLL_MS);
    }
})();
</script>
{{ recent_events_card(catalog_events, "catalog") }}
{% endblock %}