at-container-registry/pkg/appview/templates/partials/hold_card.html

{{ define "hold_card" }}
<div class="card bg-base-200 shadow-sm">
    <!-- Header -->
    <div class="p-4 flex flex-wrap items-center gap-2">
        <div class="flex-1 min-w-0">
            <div class="flex items-center gap-2 flex-wrap">
                <h3 class="font-semibold text-lg truncate">{{ .DisplayName }}</h3>
                <span class="badge badge-sm badge-soft badge-primary">Active</span>
                {{ if eq .Membership "owner" }}<span class="badge badge-sm badge-primary">Owner</span>
                {{ else }}<span class="badge badge-sm badge-secondary">Crew</span>{{ end }}
                {{ if eq .Status "online" }}<span class="badge badge-sm badge-success gap-1.5"><span class="inline-block size-1.5 rounded-full bg-current" aria-hidden="true"></span>Online</span>
                {{ else if eq .Status "offline" }}<span class="badge badge-sm badge-error gap-1.5"><span class="inline-block size-1.5 rounded-full bg-current" aria-hidden="true"></span>Offline</span>
                {{ end }}
            </div>
            <code class="text-xs text-base-content/70 break-all">{{ .DID }}</code>
        </div>
    </div>

    <!-- Storage Stats (always visible, lazy-loaded) -->
    <div class="px-4 pb-4">
        <div id="storage-stats-active"
             hx-get="/api/storage?hold_did={{ .DID | urlquery }}"
             hx-trigger="load, tab:storage from:body once"
             hx-swap="innerHTML">
            <p class="flex items-center gap-2 text-sm text-base-content/70">{{ icon "loader-2" "size-4 animate-spin" }} Loading storage...</p>
        </div>
    </div>
</div>
{{ end }}