<div class="fi-branch-switcher flex items-center px-1">
    <form method="POST" action="{{ route('branch.select') }}" class="flex items-center gap-2">
        @csrf
        <svg class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Z" />
        </svg>
        <select
            name="branch_id"
            aria-label="Select branch"
            class="rounded-lg border-0 bg-transparent text-sm font-medium text-gray-700 dark:text-gray-200 focus:outline-none focus:ring-0"
            onchange="this.form.submit()">
            <option value="" @selected(($selectedId ?? null) === null)>All Branches</option>
            @foreach ($branches as $branch)
                <option value="{{ $branch['id'] }}" @selected(($selectedId ?? null) === (int) $branch['id'])>{{ $branch['name'] }}</option>
            @endforeach
        </select>
        <noscript><button type="submit" class="text-sm text-gray-500">Go</button></noscript>
    </form>
</div>
