@props([
    'active' => 'dashboard',
])

@php
    $groups = config('sidebar.groups', []);
    $user = auth()->user();
@endphp

<aside class="fixed top-0 left-0 h-screen w-60 bg-bg-tint border-r border-line flex flex-col z-20">

    {{-- Header (fixed) --}}
    <div class="shrink-0 px-5 py-5 border-b border-line">
        <x-layout.brand :href="route('dashboard')" />
    </div>

    {{-- Content (scrollable) --}}
    <div class="flex-1 overflow-y-auto px-3 py-4 flex flex-col gap-6">
        @foreach($groups as $group)
            <nav class="flex flex-col gap-1">
                <div class="text-[10px] uppercase tracking-[0.14em] text-ink-3 font-semibold mb-1.5 px-2.5">{{ $group['label'] }}</div>
                @foreach($group['items'] as $item)
                    @php
                        $rolesAllowed = ! isset($item['roles']) || ($user && $user->hasAnyRole((array) $item['roles']));
                        if ($rolesAllowed && ! Route::has($item['route']) && config('app.debug')) {
                            throw new \RuntimeException("Sidebar config references missing route: {$item['route']}");
                        }
                    @endphp
                    @if($rolesAllowed && Route::has($item['route']))
                        <x-layout.nav-item
                            :href="route($item['route'])"
                            :icon="$item['icon']"
                            :active="$active === $item['key']"
                            :badge="$item['badge'] ?? null"
                        >
                            {{ $item['label'] }}
                        </x-layout.nav-item>
                    @endif
                @endforeach
            </nav>
        @endforeach
    </div>

    {{-- Footer (fixed) --}}
    <div class="shrink-0 px-3 py-3 border-t border-line">
        <x-layout.sidebar-user />
    </div>

</aside>