{{ define "other_holds_table" }}
<div class="card bg-base-100 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">
            <thead>
                <tr>
                    <th>Hold</th>
                    <th>Role</th>
                    <th class="text-center">Status</th>
                    <th class="text-right">Storage</th>
                </tr>
            </thead>
            <tbody>
                {{ range . }}
                <tr>
                    <td>
                        <span class="font-medium">{{ .DisplayName }}</span>
                    </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="text-success" title="Online">&#9679;</span>
                        {{ else if eq .Status "offline" }}<span class="text-error" title="Offline">&#9679;</span>
                        {{ else }}<span class="text-base-content/30" title="Unknown">&#9679;</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"
                              class="text-sm font-mono">
                            ...
                        </span>
                    </td>
                </tr>
                {{ end }}
            </tbody>
        </table>
    </div>
</div>
{{ end }}