{{ define "hold_selector" }}
<div class="card bg-base-200 shadow-sm p-4">
    <form hx-post="/api/profile/default-hold" hx-swap="none" class="flex items-center gap-3 flex-wrap">
        <label class="text-sm font-medium whitespace-nowrap" for="hold-select">Active Hold:</label>
        <select id="hold-select" name="hold_did" class="select select-bordered select-sm flex-1 min-w-0"
                data-action="submit-form">
            {{ if not .ActiveHold }}
            <option value="" selected>-- Select a hold --</option>
            {{ end }}

            {{ if .MemberHolds }}
            <optgroup label="Your Holds">
            {{ range .MemberHolds }}
                <option value="{{ .DID }}" {{ if .IsActive }}selected{{ end }}>
                    {{ .DisplayName }}{{ if eq .Membership "owner" }} (Owner){{ else }} (Crew){{ end }}{{ if .Region }} &middot; {{ .Region }}{{ end }}
                </option>
            {{ end }}
            </optgroup>
            {{ end }}

            {{ if .EligibleHolds }}
            <optgroup label="Available Holds">
            {{ range .EligibleHolds }}
                <option value="{{ .DID }}">
                    {{ .DisplayName }}{{ if .Region }} &middot; {{ .Region }}{{ end }} (Join)
                </option>
            {{ end }}
            </optgroup>
            {{ end }}
        </select>
        <noscript><button type="submit" class="btn btn-sm btn-primary">Switch</button></noscript>
    </form>
</div>
{{ end }}