{% extends "ui/_layout.html" %}
{% block title %}Dashboard - bty-web{% endblock %}

{% block subnav %}
{# In-page jump links to the dashboard's panels, separated by rules. #}
<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-machines">Machine Summary</a>
            <span class="vr"></span>
            <a href="#dash-images">Images Summary</a>
            <span class="vr"></span>
            <a href="#dash-health">Health Monitoring</a>
            <span class="vr"></span>
            <a href="#dash-activity">Activity</a>
        </span>
    </div>
</nav>
{% endblock %}

{% block intro %}
{% from "ui/_intro_box.html" import render as intro_box %}
{% call intro_box() %}
    Fleet overview. Counters and recent activity update live as
    machines check in via PXE, operators bind catalog entries to
    MACs, image uploads complete, and target boxes signal
    flash-done. Drill into any count to see the underlying rows.
{% endcall %}
{% endblock %}

{% block content %}
{# Top row: three independent, equally-spaced panels. Each is a
   direct grid column so Bootstrap's gutters apply uniformly (an
   earlier display:contents wrapper bundled Machine + Images and ate
   their gutter). The row opens one SSE connection; the Machine
   Summary + Images columns each swap their own event
   (``dashboard-machine`` / ``dashboard-images``) live on machine
   mutations / image changes. Health Monitoring is rendered at
   request time (reload to refresh) -- its checks shell out, so we
   don't want them on every check-in. #}
<div class="row g-3 mb-4" hx-ext="sse" sse-connect="/events/machines">
    <div class="col-lg-4 col-md-6 sse-target" sse-swap="dashboard-machine">
        {% include "ui/_dashboard_machine.html" %}
    </div>
    <div class="col-lg-4 col-md-6 sse-target" sse-swap="dashboard-images">
        {% include "ui/_dashboard_images.html" %}
    </div>
    <div class="col-lg-4 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 Monitoring</span>
                {# Info rows (advisory, e.g. dedicated-disk state) are
                   excluded from the pass/fail count: they're neither OK
                   nor not-OK, just informational. #}
                {% 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 %}
                {# Whole row links to the fix page on failure, else the
                   view page -- keeps the panel compact (no separate
                   button) at one-third width. Info rows render a blue
                   "i" instead of a check/cross and carry no link. #}
                <li class="list-group-item d-flex align-items-center">
                    {% if s.info %}
                    {# Advisory row: always the neutral info colour, never
                       green/red. It's a "nice to have", not a pass/fail --
                       a blue "i" you might act on but that never alarms. #}
                    <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>

{# Recent activity slice -- reuses the per-subject events card.
   Static at request time (reload to refresh); the live SSE
   stream is wired to the counters above, not here. #}
{% with events=recent_events,
        title="Recent Events",
        link_to_full="/ui/events",
        card_id="dash-activity" %}
{% include "ui/_events_card.html" %}
{% endwith %}
{% endblock %}