{{-- After a switch, the Livewire components in the page body (<main>) re-render in place with the new brand, keeping
     their state - a half-entered sale, filters; the bell and search in the layout are left alone. A page whose body
     is not Livewire is reloaded. --}}
<div class="flex items-center" x-data x-on:brand-switched.window="
    const page = Livewire.all().filter(component => component.el && component.el.closest('main'));
    page.length ? page.forEach(component => component.$wire.$refresh()) : window.location.reload();
">
    @if ($brands->count() <= 3)
        {{-- A few brands: a segmented control, one click to switch. --}}
        <div class="seg" role="group" aria-label="Brand">
            @if ($canSeeAll)
                <button type="button" wire:click="$set('brandId', '')" aria-pressed="{{ $brandId === '' ? 'true' : 'false' }}">All brands</button>
            @endif
            @foreach ($brands as $brand)
                <button type="button" wire:click="$set('brandId', '{{ $brand->id }}')" aria-pressed="{{ (string) $brandId === (string) $brand->id ? 'true' : 'false' }}">{{ $brand->name }}</button>
            @endforeach
        </div>
    @else
        <label for="brand-switcher" class="hidden sm:block mr-2 text-xs font-medium text-gray-500 dark:text-gray-400">Brand</label>
        <select
            id="brand-switcher"
            wire:model.live="brandId"
            class="rounded-lg border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 text-sm py-1.5 pl-3 pr-8 focus:border-indigo-500 focus:ring-indigo-500"
        >
            @if ($canSeeAll)
                <option value="">All brands</option>
            @endif
            @foreach ($brands as $brand)
                <option value="{{ $brand->id }}">{{ $brand->name }}</option>
            @endforeach
        </select>
    @endif
</div>