{{ 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">{{ or .DisplayName .DID }}</h3>
                {{ 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>
                {{ else }}<span class="badge badge-sm badge-ghost gap-1.5"><span class="inline-block size-1.5 rounded-full bg-current" aria-hidden="true"></span>Unknown</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"
             hx-on::after-request="if(!event.detail.successful) this.innerHTML='<p class=\'text-sm text-base-content/70\'>Storage unavailable.</p>'">
            <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 }}