@props(['mobile' => false])

@php
    $sections = config('system_menu.sections', []);

    $hrefFor = function (array $item): string {
        return route($item['rota'], $item['parametros'] ?? []);
    };

    $activeFor = function (array $item): bool {
        if (($item['rota'] ?? null) === 'sistema.show') {
            return request()->routeIs('sistema.show')
                && request()->route('slug') === ($item['parametros']['slug'] ?? null);
        }

        return request()->routeIs($item['rota']);
    };
@endphp

@foreach ($sections as $section)
    <div class="{{ $loop->first ? '' : 'mt-7' }}">
        <p class="px-3 text-xs font-bold uppercase tracking-wide text-slate-400 dark:text-slate-500">
            {{ $section['titulo'] }}
        </p>

        <div class="mt-2 space-y-1">
            @foreach ($section['items'] as $item)
                @if (! ($item['permissao'] ?? null) || auth()->user()?->can($item['permissao']))
                    @php($active = $activeFor($item))

                    <a href="{{ $hrefFor($item) }}"
                       @if ($mobile) x-on:click="sidebarOpen = false" @endif
                       @class([
                           'group flex items-center gap-3 rounded-lg px-3 text-sm font-medium transition',
                           'py-3' => $mobile,
                           'py-2.5' => ! $mobile,
                           'bg-primary-50 text-primary-700 dark:bg-primary-950/70 dark:text-primary-200' => $active,
                           'text-slate-600 hover:bg-slate-100 hover:text-primary-700 dark:text-slate-300 dark:hover:bg-slate-900 dark:hover:text-primary-300' => ! $active,
                       ])>
                        <span @class([
                            'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition',
                            'bg-accent-100 text-accent-700 dark:bg-slate-800 dark:text-accent-300' => $active,
                            'text-accent-700 group-hover:bg-accent-50 dark:text-accent-300 dark:group-hover:bg-slate-800' => ! $active,
                        ])>
                            <x-heroicon :name="$item['icone']" class="h-5 w-5" />
                        </span>
                        <span class="min-w-0 flex-1">
                            <span class="block truncate">{{ $item['nome'] }}</span>
                            <span class="hidden truncate text-xs font-normal text-slate-400 xl:block dark:text-slate-500">{{ $item['descricao'] }}</span>
                        </span>
                    </a>
                @endif
            @endforeach
        </div>
    </div>
@endforeach