@php
    use App\Support\NavigationMenu;

    $isAdmin = (bool) session('ldap_is_admin');
    $menuGroups = NavigationMenu::groups($isAdmin);
    $bottomNav = NavigationMenu::bottomNav($isAdmin);
    $displayName = session('ldap_display_name') ?: session('ldap_username');
    $homeRoute = $isAdmin ? 'databases.index' : 'profile.show';
@endphp

<div class="app-shell__backdrop" data-nav-backdrop hidden aria-hidden="true"></div>

<aside class="app-shell__sidebar" data-app-sidebar aria-label="Main navigation">
    <div class="app-shell__sidebar-head">
        <a href="{{ route($homeRoute) }}" class="app-shell__brand" title="{{ config('app.name') }}"
           data-turbo-frame="app-content" data-nav-patterns="{{ $isAdmin ? '["databases.*"]' : '["profile.*"]' }}">
            <img src="{{ asset('icons/icon.svg') }}" alt="" class="app-shell__brand-icon" width="32" height="32">
            <span class="app-shell__brand-text">{{ config('app.name') }}</span>
        </a>
        <button type="button" class="app-shell__sidebar-toggle" data-sidebar-toggle
                aria-label="Minimize sidebar" title="Minimize sidebar">
            @include('partials.nav-icon', ['name' => 'panel-left'])
        </button>
    </div>

    <nav class="app-shell__nav">
        @foreach ($menuGroups as $group)
            @php
                $groupOpen = NavigationMenu::groupIsActive($group);
            @endphp
            <div class="app-shell__group" data-nav-group="{{ $group['id'] }}" @if($groupOpen) data-open @endif>
                <button type="button" class="app-shell__group-btn" data-nav-group-toggle
                        aria-expanded="{{ $groupOpen ? 'true' : 'false' }}">
                    <span class="app-shell__group-icon">@include('partials.nav-icon', ['name' => $group['icon']])</span>
                    <span class="app-shell__group-label">{{ $group['label'] }}</span>
                    <span class="app-shell__group-chevron">@include('partials.nav-icon', ['name' => 'chevron'])</span>
                </button>
                <div class="app-shell__group-items">
                    @foreach ($group['items'] as $item)
                        @php $active = NavigationMenu::isActive($item['patterns']); @endphp
                        <a href="{{ route($item['route']) }}"
                           class="app-shell__link @if($active) is-active @endif"
                           data-turbo-frame="{{ $item['route'] === 'api-docs.index' ? '_top' : 'app-content' }}"
                           data-nav-patterns='@json($item['patterns'])'
                           @if($active) aria-current="page" @endif>
                            <span class="app-shell__link-icon">@include('partials.nav-icon', ['name' => $item['icon']])</span>
                            <span class="app-shell__link-label">{{ $item['label'] }}</span>
                        </a>
                    @endforeach
                </div>
            </div>
        @endforeach
    </nav>

    <div class="app-shell__sidebar-foot">
        @if ($displayName)
            <div class="app-shell__user" title="{{ $displayName }}">
                <span class="app-shell__user-avatar" aria-hidden="true">{{ strtoupper(substr($displayName, 0, 1)) }}</span>
                <span class="app-shell__user-name">{{ $displayName }}</span>
            </div>
        @endif
        <form method="POST" action="{{ route('logout') }}" class="app-shell__logout-form" data-turbo="false">
            @csrf
            <button type="submit" class="app-shell__link app-shell__link--logout">
                <span class="app-shell__link-icon">@include('partials.nav-icon', ['name' => 'logout'])</span>
                <span class="app-shell__link-label">Logout</span>
            </button>
        </form>
    </div>
</aside>

<header class="app-shell__header">
    <div class="app-shell__header-start">
        <button type="button" class="app-shell__icon-btn app-shell__menu-btn" data-nav-open
                aria-label="Open menu" aria-controls="app-nav-sheet">
            @include('partials.nav-icon', ['name' => 'menu'])
        </button>
        <a href="{{ route($homeRoute) }}" class="app-shell__header-brand"
           data-turbo-frame="app-content" data-nav-patterns="{{ $isAdmin ? '["databases.*"]' : '["profile.*"]' }}">
            <img src="{{ asset('icons/icon.svg') }}" alt="" width="28" height="28">
            <span>{{ config('app.name') }}</span>
        </a>
    </div>
    <div class="app-shell__header-end">
        @include('partials.theme-toggle')
        @if ($displayName)
            <span class="app-shell__header-user">{{ $displayName }}</span>
        @endif
    </div>
</header>

<nav class="app-shell__bottom" aria-label="Quick navigation">
    @foreach ($bottomNav as $item)
        @php
            $isMenuBtn = ($item['action'] ?? '') === 'open-menu';
            $active = ! $isMenuBtn && NavigationMenu::isActive($item['patterns']);
        @endphp
        @if ($isMenuBtn)
            <button type="button"
                    class="app-shell__bottom-item @if($active) is-active @endif"
                    data-nav-open aria-label="Open full menu">
                <span class="app-shell__bottom-icon">@include('partials.nav-icon', ['name' => $item['icon']])</span>
                <span class="app-shell__bottom-label">{{ $item['label'] }}</span>
            </button>
        @else
            <a href="{{ route($item['route']) }}"
               class="app-shell__bottom-item @if($active) is-active @endif"
               data-turbo-frame="{{ $item['route'] === 'api-docs.index' ? '_top' : 'app-content' }}"
               data-nav-patterns='@json($item['patterns'])'
               @if($active) aria-current="page" @endif>
                <span class="app-shell__bottom-icon">@include('partials.nav-icon', ['name' => $item['icon']])</span>
                <span class="app-shell__bottom-label">{{ $item['label'] }}</span>
            </a>
        @endif
    @endforeach
</nav>

<div class="app-shell__sheet" id="app-nav-sheet" data-nav-sheet hidden role="dialog" aria-modal="true" aria-label="Navigation menu">
    <div class="app-shell__sheet-handle" aria-hidden="true"></div>
    <div class="app-shell__sheet-head">
        <h2 class="app-shell__sheet-title">Menu</h2>
        <button type="button" class="app-shell__icon-btn" data-nav-close aria-label="Close menu">
            @include('partials.nav-icon', ['name' => 'close'])
        </button>
    </div>
    <div class="app-shell__sheet-body">
        @foreach ($menuGroups as $group)
            <div class="app-shell__sheet-group">
                <p class="app-shell__sheet-group-title">{{ $group['label'] }}</p>
                <div class="app-shell__sheet-links">
                    @foreach ($group['items'] as $item)
                        @php $active = NavigationMenu::isActive($item['patterns']); @endphp
                        <a href="{{ route($item['route']) }}"
                           class="app-shell__sheet-link @if($active) is-active @endif"
                           data-turbo-frame="{{ $item['route'] === 'api-docs.index' ? '_top' : 'app-content' }}"
                           data-nav-patterns='@json($item['patterns'])'
                           data-nav-close>
                            <span class="app-shell__sheet-link-icon">@include('partials.nav-icon', ['name' => $item['icon']])</span>
                            <span>{{ $item['label'] }}</span>
                        </a>
                    @endforeach
                </div>
            </div>
        @endforeach

        <div class="app-shell__sheet-group">
            <p class="app-shell__sheet-group-title">Session</p>
            <div class="app-shell__sheet-links">
                <form method="POST" action="{{ route('logout') }}" data-turbo="false">
                    @csrf
                    <button type="submit" class="app-shell__sheet-link app-shell__sheet-link--button">
                        <span class="app-shell__sheet-link-icon">@include('partials.nav-icon', ['name' => 'logout'])</span>
                        <span>Logout</span>
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>