{# 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). #}
<div class="card h-100 shadow-sm">
    <div class="card-header bg-light fw-semibold">
        <i class="bi bi-disc me-1"></i>Images
    </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-2"></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-check-circle fs-6 me-2"></i>Cached</span>
            <span>{{ img_cached }}</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
            <span class="text-muted"><i class="bi bi-hdd fs-6 me-2"></i>Local</span>
            <span>{{ img_local }}</span>
        </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-2"></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-2"></i>ORAS</span>
            <span>{{ img_oras }}</span>
        </li>
    </ul>
</div>