@php
    $navItems = [
        ['label' => 'Dashboard', 'route' => null, 'url' => '#', 'active' => false],
        ['label' => 'Pairings', 'route' => 'pairings.index', 'url' => route('pairings.index'), 'active' => request()->routeIs('pairings.*')],
        ['label' => 'Airports', 'route' => 'airports.index', 'url' => route('airports.index'), 'active' => request()->routeIs('airports.*')],
        ['label' => 'Schedule', 'route' => null, 'url' => '#', 'active' => false],
        ['label' => 'Bid Imports', 'route' => null, 'url' => '#', 'active' => false],
        ['label' => 'Calendar', 'route' => null, 'url' => '#', 'active' => false],
        ['label' => 'Settings', 'route' => null, 'url' => '#', 'active' => false],
    ];
@endphp

<nav class="navbar navbar-expand-lg sticky-top app-navbar">
    <div class="container-xl px-3 px-md-4">
        <a class="navbar-brand app-brand" href="{{ auth()->check() ? route('pairings.index') : route('splash') }}">
            PairingPal
        </a>

        <button class="navbar-toggler border-0 shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#appNavbar" aria-controls="appNavbar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="appNavbar">
            <ul class="navbar-nav ms-lg-3 me-auto mt-3 mt-lg-0 gap-lg-1">
                @foreach ($navItems as $item)
                    <li class="nav-item">
                        <a
                            href="{{ $item['url'] }}"
                            class="nav-link app-nav-link {{ $item['active'] ? 'active' : '' }} {{ $item['route'] ? '' : 'text-muted' }}"
                            @if (!$item['route']) aria-disabled="true" @endif
                        >
                            {{ $item['label'] }}
                        </a>
                    </li>
                @endforeach
            </ul>

            <div class="d-flex flex-column flex-lg-row align-items-lg-center gap-2 mt-3 mt-lg-0">
                @auth
                    <div class="dropdown">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            {{ auth()->user()->username ?? 'Profile' }}
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end shadow-sm border-0">
                            <li><span class="dropdown-item-text text-muted small">Profile placeholder</span></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><span class="dropdown-item-text text-muted small">Account settings soon</span></li>
                        </ul>
                    </div>

                    <form method="POST" action="{{ route('logout') }}" class="d-grid d-lg-inline">
                        @csrf
                        <button type="submit" class="btn btn-primary">Logout</button>
                    </form>
                @else
                    <a href="{{ route('login') }}" class="btn btn-outline-primary">Login</a>
                    <a href="{{ route('register') }}" class="btn btn-primary">Register</a>
                @endauth
            </div>
        </div>
    </div>
</nav>