{% extends "ui/_layout.html" %}
{% block title %}Dashboard - 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="#dash-exports">Exports</a>
            <span class="vr"></span>
            <a href="#dash-health">Health</a>
            <span class="vr"></span>
            <a href="#dash-recent">Recent</a>
        </span>
    </div>
</nav>
{% endblock %}

{% block intro %}
<div class="alert alert-secondary small mb-3">
    Nbdmux overview. Exports currently multiplexed, warm-pipeline
    health, upstream withcache reachability, and the most recent
    ready-set changes. Drill into Exports for the row-level view.
</div>
{% endblock %}

{% block content %}
<div class="row g-3 mb-4">
    <div class="col-lg-6 col-md-6">
        <div class="card h-100 shadow-sm" id="dash-exports">
            <div class="card-header bg-light fw-semibold d-flex justify-content-between align-items-center">
                <span><i class="bi bi-list-ul me-1"></i>Exports</span>
                <a class="small text-decoration-none" href="/ui/exports">Open exports &rarr;</a>
            </div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span>Total registered</span>
                    <span class="badge bg-primary rounded-pill">{{ exports_total }}</span>
                </li>
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span>Ready (visible on nbd-server)</span>
                    <span class="badge bg-success rounded-pill">{{ ready_count }}</span>
                </li>
                {% if pending_count %}
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span>Warming in flight</span>
                    <span class="badge bg-info text-dark rounded-pill">
                        <i class="bi bi-arrow-down-circle me-1"></i>{{ pending_count }}
                    </span>
                </li>
                {% endif %}
                {% if failed_count %}
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span>Failed</span>
                    <span class="badge bg-danger rounded-pill">{{ failed_count }}</span>
                </li>
                {% endif %}
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span>Catalog entries visible on upstream</span>
                    <span class="badge bg-light text-dark border rounded-pill">{{ catalog_count }}</span>
                </li>
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span>NBD listener port</span>
                    <code class="small">{{ nbd_port }}</code>
                </li>
            </ul>
        </div>
    </div>
    <div class="col-lg-6 col-md-6">
        <div class="card h-100 shadow-sm" id="dash-health">
            <div class="card-header bg-light fw-semibold d-flex justify-content-between align-items-center">
                <span><i class="bi bi-heart-pulse me-1"></i>Health</span>
                {% set _checks = sanity | rejectattr("info") | list %}
                {% set _ok = _checks | selectattr("ok") | list | length %}
                <span class="text-muted small">{{ _ok }} / {{ _checks | length }} OK</span>
            </div>
            <ul class="list-group list-group-flush">
                {% for s in sanity %}
                <li class="list-group-item d-flex align-items-center">
                    {% if s.info %}
                    <i class="bi bi-info-circle-fill text-info fs-5 me-2 flex-shrink-0" aria-label="info"></i>
                    {% elif s.ok %}
                    <i class="bi bi-check-circle-fill text-success fs-5 me-2 flex-shrink-0" aria-label="ok"></i>
                    {% else %}
                    <i class="bi bi-x-circle-fill text-danger fs-5 me-2 flex-shrink-0" aria-label="not ok"></i>
                    {% endif %}
                    {% if s.href or s.fix_href %}
                    <a href="{{ s.fix_href if (not s.ok and not s.info) else s.href }}"
                       class="text-decoration-none text-body flex-grow-1">
                        <span class="fw-semibold small">{{ s.label }}</span>
                        <div class="text-muted small">{{ s.detail }}</div>
                    </a>
                    {% else %}
                    <div class="flex-grow-1">
                        <span class="fw-semibold small">{{ s.label }}</span>
                        <div class="text-muted small">{{ s.detail }}</div>
                    </div>
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>

<div class="card mb-3" id="dash-recent">
    <div class="card-header bg-light fw-semibold d-flex justify-content-between align-items-center py-2">
        <span><i class="bi bi-clock-history me-1"></i>Recent exports</span>
        <a class="small text-decoration-none" href="/ui/exports">Open exports &rarr;</a>
    </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 style="width: 1%; white-space: nowrap;">Status</th>
                    <th style="width: 1%; white-space: nowrap;">Size</th>
                </tr>
            </thead>
            <tbody>
                {% for e in recent_exports %}
                <tr>
                    <td class="small font-monospace text-truncate" style="max-width: 32rem;"
                        title="{{ e.name }}">{{ e.name }}</td>
                    <td>
                        {% if e.status == 'ready' %}
                        <span class="badge bg-success">ready</span>
                        {% elif e.status == 'pending' %}
                        <span class="badge bg-info text-dark">pending</span>
                        {% elif e.status == 'failed' %}
                        <span class="badge bg-danger">failed</span>
                        {% else %}
                        <span class="badge bg-secondary">{{ e.status or '-' }}</span>
                        {% endif %}
                    </td>
                    <td class="small font-monospace text-nowrap">
                        {% if e.size %}{{ e.size }}{% else %}<span class="text-muted">-</span>{% endif %}
                    </td>
                </tr>
                {% endfor %}
                {% if not recent_exports %}
                <tr><td colspan="3" class="text-muted text-center py-3">
                    No exports yet. Pick a catalog entry on
                    <a href="/ui/exports">Exports</a> or drop a
                    pre-warmed .img in <code>&lt;images-dir&gt;</code>
                    and register it via POST /exports.
                </td></tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}