{% extends "ui/_layout.html" %}
{% block title %}Exports - nbdmux{% 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="#exports-list">Exports</a>
        </span>
        {% if catalog_entries %}
        {# Create-export form on the right: picker options come from
           withcache's ``GET /catalog`` (which since withcache v0.11.0
           already contains only downloaded entries). The export name
           is derived from the entry's URL basename on the server
           side. Pre-warmed ``{name, file}`` exports have no browser
           form -- the operator is already shelled in to place the
           file. #}
        <form method="post" action="/admin/create_export"
              class="subnav-actions d-flex align-items-center gap-1 m-0 ms-auto">
            <label class="form-label small mb-0 me-1 text-nowrap" for="create-export-catalog">
                From catalog:
            </label>
            <select required class="form-select form-select-sm"
                    id="create-export-catalog" name="src_url"
                    style="max-width: 32rem;"
                    title="Pick a catalog entry from withcache. Nbdmux derives the export name from the URL basename, decompresses via withcache's cache, and stages the resulting .img at <images-dir>/<name>.img.">
                {% for e in catalog_entries %}
                <option value="{{ e.src }}">
                    {{ e.name or e.src }}{% if e.format %} ({{ e.format }}){% endif %}
                </option>
                {% endfor %}
            </select>
            <button type="submit" class="btn btn-sm btn-primary text-nowrap">
                <i class="bi bi-cloud-plus me-1"></i>Export
            </button>
        </form>
        {% endif %}
    </div>
</nav>
{% endblock %}

{% block intro %}
{# One-sentence context + operator-actionable hints for the two
   empty-state axes (withcache unconfigured, catalog empty /
   unreachable). Keeping these OUT of the subnav so the strip
   holds jump links + form only, matching bty. #}
<div class="alert alert-secondary small mb-3">
    Each row is an nbd-server export the multiplexer serves over
    TCP. Pre-warmed exports point at an existing file on disk;
    catalog-picker exports read from withcache's cache and
    decompress into <code>&lt;images-dir&gt;/&lt;name&gt;.img</code>
    before landing at <em>ready</em>. Only <em>ready</em> exports
    are visible to nbd-server on the wire.
</div>
{% if not withcache_url %}
<div class="alert alert-warning small mb-3">
    <i class="bi bi-exclamation-triangle me-1"></i>
    <code>NBDMUX_WITHCACHE_URL</code> is not set; the create-export
    picker needs a withcache upstream to populate its options.
</div>
{% elif catalog_error %}
<div class="alert alert-danger small mb-3" title="{{ catalog_error }}">
    <i class="bi bi-x-octagon me-1"></i>
    withcache catalog unreachable at <code>{{ withcache_url }}</code>.
</div>
{% elif not catalog_entries %}
<div class="alert alert-info small mb-3">
    <i class="bi bi-inbox me-1"></i>
    No catalog entries yet. Add + Download on
    <a href="{{ withcache_url|trim('/') }}/ui/catalog">{{ withcache_url|trim('/') }}/ui/catalog</a>.
</div>
{% endif %}
{% endblock %}

{% block content %}
<div class="card mb-3" id="exports-list">
    <div class="card-header bg-light fw-semibold d-flex flex-wrap align-items-center gap-2 py-2">
        <span class="text-nowrap"><i class="bi bi-list-ul me-1"></i>Exports</span>
    </div>
    <div class="table-responsive">
        <table class="table table-striped table-hover mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    <th>Name</th>
                    <th>Status</th>
                    <th>Progress</th>
                    <th>File</th>
                    <th>Source</th>
                    <th>Format</th>
                    <th class="text-end" style="width: 1%; white-space: nowrap;">Action</th>
                </tr>
            </thead>
            <tbody>
                {% for e in exports %}
                <tr>
                    <td>
                        <i class="bi bi-broadcast text-secondary me-1"></i>
                        <code>{{ e.name }}</code>
                    </td>
                    <td>
                        {# Status pill colours match the wire states
                           the JSON /exports endpoint documents: green
                           for ready (nbd-server picks up), red for
                           failed (operator retries), blue for the
                           three in-flight intermediates. #}
                        {% if e.status == 'ready' %}
                        <span class="badge bg-success">ready</span>
                        {% elif e.status == 'failed' %}
                        <span class="badge bg-danger" title="{{ e.error or 'see logs' }}">failed</span>
                        {% else %}
                        <span class="badge bg-info text-dark">{{ e.status }}</span>
                        {% endif %}
                    </td>
                    <td style="min-width: 10rem;">
                        {% if e.progress is not none %}
                        <div class="progress" style="height: 0.65rem;" role="progressbar"
                             aria-valuenow="{{ e.progress }}" aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar bg-primary" style="width: {{ e.progress }}%"></div>
                        </div>
                        <small class="text-muted">{{ e.progress }}%</small>
                        {% elif e.status == 'ready' %}
                        <small class="text-muted">-</small>
                        {% else %}
                        <small class="text-muted">pending</small>
                        {% endif %}
                    </td>
                    <td class="small font-monospace text-truncate" style="max-width: 24rem;"
                        title="{{ e.file }}">
                        {{ e.file }}
                    </td>
                    <td class="small font-monospace text-truncate" style="max-width: 20rem;"
                        title="{{ e.src_url or '' }}">
                        {% if e.src_url %}
                        {{ e.src_url }}
                        {% else %}
                        <span class="text-muted">pre-warmed</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if e.format %}
                        <span class="badge bg-light text-dark border">{{ e.format }}</span>
                        {% else %}
                        <span class="text-muted">-</span>
                        {% endif %}
                    </td>
                    <td class="text-end text-nowrap">
                        {# Delete: form-encoded POST so a simple button
                           works without JavaScript. Warm-created rows
                           also unlink the on-disk .img in the handler;
                           pre-warmed rows leave their file alone. #}
                        <form method="post" action="/admin/delete_export/{{ e.name }}"
                              class="d-inline m-0"
                              onsubmit="return confirm('Delete export {{ e.name }}? Warm-created rows unlink the .img from images-dir.');">
                            <button type="submit"
                                    class="btn btn-sm btn-outline-danger"
                                    title="Remove this export">
                                <i class="bi bi-trash"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
                {% if not exports %}
                <tr><td colspan="7" class="text-muted text-center py-3">
                    No exports registered yet. Pick a downloaded
                    catalog entry in the picker above, or POST to
                    <code>/exports</code> from a script (see
                    <code>nbdmux.client</code>).
                </td></tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}