{% 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="d-flex align-items-center flex-wrap">
            <span class="text-muted">
                {{ exports|length }} export{{ '' if exports|length == 1 else 's' }} registered
                {% if withcache_url %}
                <span class="vr"></span>
                exports from <code>{{ withcache_url }}</code>'s cache
                {% else %}
                <span class="vr"></span>
                <span class="text-warning">no NBDMUX_WITHCACHE_URL configured; nothing to pick from</span>
                {% endif %}
            </span>
        </span>
        {# Create-export form pinned to the right of the subnav so
           operators can register a new export without leaving the
           page. The picker options are the catalog entries that
           withcache has already downloaded (`GET /catalog`
           filtered on ``downloaded_at != null``); nbdmux does no
           auto-fetch. The export name is derived from the entry's
           URL basename. Pre-warmed {name, file} exports have no
           browser form because the operator's already shelled in
           to place the file. #}
        <span class="ms-auto d-flex align-items-center gap-2">
            {% if catalog_entries %}
            <form method="post" action="/admin/create_export"
                  class="d-flex align-items-center gap-1 m-0">
                <label class="form-label small mb-0 me-1 text-nowrap" for="create-export-catalog">
                    Export from downloaded:
                </label>
                <select required class="form-select form-select-sm"
                        id="create-export-catalog" name="src_url"
                        style="max-width: 32rem;"
                        title="Pick a downloaded 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>
            {% elif not withcache_url %}
            <span class="text-warning small">
                <i class="bi bi-exclamation-triangle me-1"></i>Set NBDMUX_WITHCACHE_URL to pick from downloaded catalog entries.
            </span>
            {% elif catalog_error %}
            <span class="text-danger small" title="{{ catalog_error }}">
                <i class="bi bi-x-octagon me-1"></i>catalog unreachable
            </span>
            {% else %}
            <span class="text-muted small">
                <i class="bi bi-inbox me-1"></i>
                No downloaded catalog entries. Add + Download on
                <a href="{{ withcache_url|trim('/') }}/ui/catalog">{{ withcache_url|trim('/') }}/ui/catalog</a>.
            </span>
            {% endif %}
        </span>
    </div>
</nav>
{% endblock %}

{% block intro %}
{# One-sentence context so an operator landing here knows what
   nbdmux does without hunting for the README. #}
<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 downloaded
    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>
{% endblock %}

{% block content %}
<div class="card mb-3">
    <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 %}