{% extends "ui/_layout.html" %}
{% from "ui/_table_macros.html" import sort_header, pagination_inline, filter_form with context %}
{% block title %}Catalog - withcache{% endblock %}

{% block subnav %}
{# Left: jump link to the entries table.
   Right: three inline actions -- Add ORAS URL, Add HTTPS URL,
   Fetch default catalog. The catalog source URL itself is edited
   on /ui/settings so the Catalog page stays focused on the
   entries data. #}
<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="#catalog-entries">Entries</a>
        </span>
        <form method="post" action="/admin/catalog_add_oras"
              class="subnav-actions d-flex align-items-center gap-1 m-0 ms-auto">
            <input type="text" required class="form-control form-control-sm font-monospace"
                   name="url" style="max-width: 18rem; min-width: 0;"
                   placeholder="oras://ghcr.io/owner/repo:tag"
                   title="Add an oras:// entry; the registry walk fills format + size from the manifest.">
            <button type="submit" class="btn btn-sm btn-outline-primary text-nowrap">
                <i class="bi bi-plus-circle me-1"></i>Add ORAS
            </button>
        </form>
        <form method="post" action="/admin/catalog_add_entry"
              class="subnav-actions d-flex align-items-center gap-1 m-0">
            <input type="url" required class="form-control form-control-sm font-monospace"
                   name="url" style="max-width: 18rem; min-width: 0;"
                   placeholder="https://example.com/appliance.img.gz"
                   title="Add an https:// entry; name comes from the URL basename, format from the file suffix. sha + size arrive at Download time.">
            <button type="submit" class="btn btn-sm btn-outline-primary text-nowrap">
                <i class="bi bi-plus-circle me-1"></i>Add HTTPS
            </button>
        </form>
        <form method="post" action="/admin/catalog_refresh"
              class="subnav-actions d-flex align-items-center gap-1 m-0">
            <button type="submit" class="btn btn-sm btn-outline-primary text-nowrap"
                    title="Re-fetch the currently-configured catalog source (Settings > Catalog source) and merge its entries.">
                <i class="bi bi-arrow-clockwise me-1"></i>Fetch default
            </button>
        </form>
    </div>
</nav>
{% endblock %}

{% block intro %}
<div class="alert alert-secondary small mb-3">
    Operator-staged catalog entries. Add + Download here; the
    trio-facing <code>GET /catalog</code> API filters to entries whose
    bytes are already downloaded so bty + nbdmux never see a
    not-yet-ready entry. Configure the catalog source URL on
    <a href="/ui/settings#catalog">Settings &rarr; Catalog source</a>.
</div>
{% if catalog_last_error %}
<div class="alert alert-danger small mb-3">
    <i class="bi bi-exclamation-triangle me-1"></i>{{ catalog_last_error }}
</div>
{% endif %}
{% if catalog_last_info %}
<div class="alert alert-info small mb-3">{{ catalog_last_info }}</div>
{% endif %}
{% endblock %}

{% block content %}
<div class="card mb-3" id="catalog-entries">
    <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-list-ul me-1"></i>Catalog entries</span>
        <span class="vr"></span>
        {{ filter_form(q, sort, page, per_page_choices, 'catalog-q', placeholder='Filter (name / URL / format)') }}
        {{ pagination_inline(page, preserved, label='entries') }}
    </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('Source', 'src', sort, preserved) }}
                    {{ sort_header('Format', 'format', sort, preserved, 'style="width: 1%; white-space: nowrap;"') }}
                    <th style="width: 1%; white-space: nowrap;">Size</th>
                    <th style="width: 1%; white-space: nowrap;" class="text-end"
                        title="Cached-blob hit count. Bumped every time a client fetches this entry's bytes from withcache.">Hits</th>
                    {{ sort_header('State', 'downloaded_at', sort, preserved, 'style="min-width: 12rem;" title="Cached / downloading / failed. Downloading shows a live progress bar."') }}
                    <th class="text-end" style="width: 1%; white-space: nowrap;">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for e in catalog_entries %}
                <tr>
                    <td class="small">{{ e.get('name', '') }}</td>
                    <td class="small font-monospace text-truncate" style="max-width: 30rem;"
                        title="{{ e.get('src') or e.get('url') or '' }}">
                        {{ e.get('src') or e.get('url') or '' }}
                    </td>
                    <td>
                        {% if e.get('format') %}
                        <span class="badge bg-light text-dark border">{{ e.format }}</span>
                        {% else %}
                        <span class="text-muted">-</span>
                        {% endif %}
                    </td>
                    <td class="small font-monospace text-nowrap">
                        {% if e.get('downloaded_size') %}
                        {{ e.downloaded_size }}
                        {% elif e.get('size_bytes') %}
                        {{ e.size_bytes }}
                        {% else %}
                        <span class="text-muted">-</span>
                        {% endif %}
                    </td>
                    <td class="small text-end">{{ e.get('hits', 0) }}</td>
                    <td class="small">
                        {% if e.get('active_job_status') in ('queued', 'running') %}
                        {% set st = e.active_job_status %}
                        <span class="badge bg-info text-dark d-inline-flex align-items-center gap-1">
                            <i class="bi bi-arrow-down-circle"></i>{{ st }}
                        </span>
                        {% if e.get('active_job_bytes_total') and e.active_job_bytes_total > 0 %}
                        {% set pct = (e.active_job_bytes_done * 100 / e.active_job_bytes_total) | round(1) %}
                        <div class="progress mt-1" style="height: 0.4rem;" role="progressbar"
                             aria-valuenow="{{ pct }}" aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar bg-primary" style="width: {{ pct }}%"></div>
                        </div>
                        <small class="text-muted">{{ pct }}%</small>
                        {% endif %}
                        {% elif e.get('active_job_status') == 'failed' %}
                        <span class="badge bg-danger" title="{{ e.get('active_job_error') or 'download failed' }}">
                            <i class="bi bi-exclamation-triangle me-1"></i>failed
                        </span>
                        {% elif e.get('active_job_status') == 'cancelled' %}
                        <span class="badge bg-secondary">cancelled</span>
                        {% elif e.get('downloaded_at') %}
                        <span class="badge bg-success" title="{{ e.downloaded_at }}">
                            <i class="bi bi-check-circle me-1"></i>cached
                        </span>
                        {% else %}
                        <span class="text-muted">-</span>
                        {% endif %}
                    </td>
                    <td class="text-end text-nowrap">
                        {% if e.get('active_job_status') in ('queued', 'running') %}
                        <form method="post" action="/admin/cancel_entry" class="d-inline m-0">
                            <input type="hidden" name="name" value="{{ e.get('name', '') }}">
                            <button type="submit" class="btn btn-sm btn-outline-warning"
                                    title="Cancel this download">
                                <i class="bi bi-x-circle"></i>
                            </button>
                        </form>
                        {% else %}
                        <form method="post" action="/admin/catalog_download_entry"
                              class="d-inline m-0">
                            <input type="hidden" name="name" value="{{ e.get('name', '') }}">
                            {% if e.get('downloaded_at') %}
                            <input type="hidden" name="force" value="1">
                            <button type="submit" class="btn btn-sm btn-outline-primary"
                                    title="Delete the cached bytes and refetch from origin">
                                <i class="bi bi-arrow-repeat"></i>
                            </button>
                            {% else %}
                            <button type="submit" class="btn btn-sm btn-primary"
                                    title="Fetch this entry's bytes into the local cache">
                                <i class="bi bi-download"></i>
                            </button>
                            {% endif %}
                        </form>
                        {% endif %}
                        <form method="post" action="/admin/catalog_delete_entry"
                              class="d-inline m-0"
                              onsubmit="return confirm('Delete catalog entry {{ e.get('name', '') }}?');">
                            <input type="hidden" name="name" value="{{ e.get('name', '') }}">
                            <button type="submit" class="btn btn-sm btn-outline-danger"
                                    title="Remove this catalog entry">
                                <i class="bi bi-trash"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
                {% if not catalog_entries %}
                <tr><td colspan="7" class="text-muted text-center py-3">
                    {% if q %}
                    No entries match <code>{{ q }}</code>.
                    {% else %}
                    No catalog entries yet. Add an ORAS or HTTPS URL
                    on the subnav, or click Fetch default to populate
                    from the configured source (Settings &rarr;
                    Catalog source).
                    {% endif %}
                </td></tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}