{{ define "hold_card" }}
<div class="card bg-base-100 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">
                <span class="text-warning" title="Active hold">&#9733;</span>
                <h3 class="font-semibold text-lg truncate">{{ .DisplayName }}</h3>
                <span class="badge badge-sm badge-warning">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">&#9679; Online</span>
                {{ else if eq .Status "offline" }}<span class="badge badge-sm badge-error gap-1">&#9679; Offline</span>
                {{ end }}
            </div>
            <code class="text-xs text-base-content/50 break-all">{{ .DID }}</code>
        </div>
        <div class="shrink-0">
        </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/50">{{ icon "loader-2" "size-4 animate-spin" }} Loading storage...</p>
        </div>
    </div>
</div>
{{ end }}