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

{% block intro %}
<div class="alert alert-secondary small mb-3">
    Withcache overview. Catalog entries staged by the operator, the
    bytes cached on disk, download activity, and the last few URLs
    clients asked for that are not in the catalog. Drill in via
    Catalog / Misses.
</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-catalog">
            <div class="card-header bg-light fw-semibold d-flex justify-content-between align-items-center">
                <span><i class="bi bi-book me-1"></i>Catalog</span>
                <a class="small text-decoration-none" href="/ui/catalog">Open catalog &rarr;</a>
            </div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span>Entries staged</span>
                    <span class="badge bg-primary rounded-pill">{{ entries_total }}</span>
                </li>
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span>Entries cached</span>
                    <span class="badge bg-success rounded-pill">{{ entries_cached }}</span>
                </li>
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span>Cached blobs on disk</span>
                    <span class="badge bg-light text-dark border rounded-pill">{{ blob_count }}</span>
                </li>
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span>Cached bytes</span>
                    <code class="small">{{ cached_bytes }}</code>
                </li>
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span>Downloads in flight</span>
                    {% if active_jobs %}
                    <span class="badge bg-info text-dark rounded-pill">
                        <i class="bi bi-arrow-down-circle me-1"></i>{{ active_jobs }}
                    </span>
                    {% else %}
                    <span class="text-muted small">-</span>
                    {% endif %}
                </li>
                {% if failed_jobs %}
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span>Failed downloads</span>
                    <span class="badge bg-danger rounded-pill">{{ failed_jobs }}</span>
                </li>
                {% endif %}
            </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-activity">
    <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>Last {{ recent_events_limit }} events</span>
        <a class="small text-decoration-none" href="/ui/events">Open events &rarr;</a>
    </div>
    <div class="table-responsive">
        <table class="table table-striped table-hover mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    <th style="width: 1%; white-space: nowrap;">Time</th>
                    <th style="width: 1%; white-space: nowrap;">Kind</th>
                    <th>Summary</th>
                    <th style="width: 1%; white-space: nowrap;">Subject</th>
                </tr>
            </thead>
            <tbody>
                {% for e in recent_events %}
                <tr>
                    <td class="small text-muted text-nowrap font-monospace">{{ e.ts }}</td>
                    <td class="small text-nowrap">
                        {% if e.kind.endswith('failed') %}
                        <span class="badge bg-danger">{{ e.kind }}</span>
                        {% elif e.kind.endswith('completed') or e.kind.endswith('added') or e.kind.endswith('refreshed') or e.kind.endswith('succeeded') %}
                        <span class="badge bg-success">{{ e.kind }}</span>
                        {% elif e.kind.endswith('cancelled') or e.kind.endswith('dismissed') or e.kind.endswith('logout') %}
                        <span class="badge bg-secondary">{{ e.kind }}</span>
                        {% else %}
                        <span class="badge bg-info text-dark">{{ e.kind }}</span>
                        {% endif %}
                    </td>
                    <td class="small">{{ e.summary }}</td>
                    <td class="small font-monospace text-truncate" style="max-width: 16rem;"
                        title="{{ e.subject_kind }}/{{ e.subject_id }}">
                        {% if e.subject_kind %}
                        {{ e.subject_kind }}{% if e.subject_id %}<span class="text-muted">/</span>{{ e.subject_id }}{% endif %}
                        {% else %}
                        <span class="text-muted">-</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
                {% if not recent_events %}
                <tr><td colspan="4" class="text-muted text-center py-3">
                    No events yet. Actions on Catalog, Misses, and Settings
                    pages land here, as do downloads and first-time client
                    misses on the byte-serving routes.
                </td></tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}