{# Images card body. Rendered at page load (ui_dashboard) and swapped
   live on the ``dashboard-images`` SSE event. Lives in its own col in
   dashboard.html so it's an independent, equally-spaced grid column
   (not bundled with Machine Summary). The id lives on the card (not the
   col) so the sub-nav "Images Summary" jump + its flash ring hug the
   card, and it survives the SSE swap (the card is what gets swapped
   in). #}
<div class="card h-100 shadow-sm" id="dash-images">
    <div class="card-header bg-light fw-semibold">
        <i class="bi bi-disc me-1"></i>Images Summary
    </div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item d-flex justify-content-between align-items-center">
            <span class="text-muted"><i class="bi bi-disc fs-6 me-1"></i>Total</span>
            <a href="/ui/images" class="fw-semibold text-decoration-none">{{ img_total }}</a>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
            <span class="text-muted"><i class="bi bi-globe fs-6 me-1"></i>HTTP</span>
            <span>{{ img_http }}</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
            <span class="text-muted"><i class="bi bi-box-seam fs-6 me-1"></i>ORAS</span>
            <span>{{ img_oras }}</span>
        </li>
    </ul>
</div>