{{ define "other_holds_table" }}
<div class="card bg-base-200 shadow-sm">
    <div class="p-4 pb-2">
        <h3 class="text-sm font-semibold text-base-content/70">Other Holds</h3>
    </div>
    <div class="overflow-x-auto">
        <table class="table table-sm">
            <caption class="sr-only">Other holds you are a member of</caption>
            <thead>
                <tr>
                    <th scope="col">Hold</th>
                    <th scope="col">Role</th>
                    <th scope="col" class="text-center">Status</th>
                    <th scope="col" class="text-right">Storage</th>
                </tr>
            </thead>
            <tbody>
                {{ range . }}
                <tr>
                    <td>
                        <span class="font-medium block max-w-55 truncate" title="{{ .DID }}">{{ or .DisplayName .DID }}</span>
                        <code class="block font-mono text-xs text-base-content/50 truncate max-w-55">{{ .DID }}</code>
                    </td>
                    <td>
                        {{ if eq .Membership "owner" }}<span class="badge badge-xs badge-primary">Owner</span>
                        {{ else }}<span class="badge badge-xs badge-secondary">Crew</span>{{ end }}
                    </td>
                    <td class="text-center">
                        {{ if eq .Status "online" }}
                            <span class="inline-block size-2 rounded-full bg-success" aria-hidden="true"></span>
                            <span class="sr-only">Online</span>
                        {{ else if eq .Status "offline" }}
                            <span class="inline-block size-2 rounded-full bg-error" aria-hidden="true"></span>
                            <span class="sr-only">Offline</span>
                        {{ else }}
                            <span class="inline-block size-2 rounded-full bg-base-content/40" aria-hidden="true"></span>
                            <span class="sr-only">Unknown</span>
                        {{ end }}
                    </td>
                    <td class="text-right">
                        <span id="storage-compact-{{ sanitizeID .DID }}"
                              hx-get="/api/storage?hold_did={{ .DID | urlquery }}&compact=true"
                              hx-trigger="load, tab:storage from:body once"
                              hx-swap="innerHTML"
                              hx-on::response-error="this.innerHTML='&mdash;'"
                              class="text-sm font-mono">
                            ...
                        </span>
                    </td>
                </tr>
                {{ end }}
            </tbody>
        </table>
    </div>
</div>
{{ end }}