@php
    $items = collect(config('navigation'))
        ->filter(fn ($i) => $i['permission'] === null || auth()->user()->can($i['permission']));
@endphp

<aside
    class="fixed inset-y-0 left-0 z-40 flex w-64 -translate-x-full flex-col bg-ink text-white transition-transform lg:translate-x-0"
    :class="{ 'translate-x-0': nav }"
    aria-label="Main navigation">

    {{-- Branch switcher: the one bold element. Branch code sits on a rear-plate chip. --}}
    <div class="border-b border-ink-line p-4" x-data="{ open: false }">
        <p class="text-xs text-white/60">Working in</p>

        <button type="button" class="mt-1 flex w-full items-center gap-3 rounded-md p-1 text-left hover:bg-ink-soft"
                @click="open = !open" :aria-expanded="open" aria-haspopup="listbox"
                @disabled($switchableBranches->count() < 2 && ! auth()->user()->canAccessAllBranches())>
            <span class="rounded-sm border-2 border-black bg-plate px-2 py-0.5 text-sm font-bold tracking-widest text-black">
                {{ $currentBranch?->code ?? 'ALL' }}
            </span>
            <span class="truncate text-sm font-medium">{{ $currentBranch?->name ?? 'All branches' }}</span>
        </button>

        <form method="POST" action="{{ route('branch.switch') }}" x-show="open" x-cloak @click.outside="open = false"
              class="mt-2 rounded-md bg-ink-soft p-1" role="listbox">
            @csrf
            @can('branches.view_all')
                <button name="branch" value="all" class="block w-full rounded px-3 py-2 text-left text-sm hover:bg-ink-line">All branches</button>
            @endcan
            @foreach ($switchableBranches as $branch)
                <button name="branch" value="{{ $branch->id }}" role="option" aria-selected="{{ $currentBranch?->id === $branch->id ? 'true' : 'false' }}"
                        class="block w-full rounded px-3 py-2 text-left text-sm hover:bg-ink-line">
                    {{ $branch->name }}
                </button>
            @endforeach
        </form>
    </div>

    <nav class="flex-1 overflow-y-auto p-3">
        <ul class="space-y-1">
            @foreach ($items as $item)
                @php($exists = Route::has($item['route']))
                <li>
                    @if ($exists)
                        <a href="{{ route($item['route']) }}"
                           @class([
                               'flex items-center justify-between rounded-md px-3 py-2 text-sm font-medium',
                               'bg-ink-line text-white' => request()->routeIs($item['route']) || request()->routeIs(Str::before($item['route'], '.').'.*'),
                               'text-white/75 hover:bg-ink-soft hover:text-white' => ! (request()->routeIs($item['route']) || request()->routeIs(Str::before($item['route'], '.').'.*')),
                           ])
                           @if (request()->routeIs($item['route'])) aria-current="page" @endif>
                            {{ $item['label'] }}
                        </a>
                    @else
                        <span class="flex items-center justify-between rounded-md px-3 py-2 text-sm text-white/40" aria-disabled="true">
                            {{ $item['label'] }}
                            <span class="text-xs">Soon</span>
                        </span>
                    @endif
                </li>
            @endforeach
        </ul>
    </nav>

    <div class="border-t border-ink-line p-4 text-xs text-white/50">
        {{ config('dms.company_name') }}
    </div>
</aside>