@php
    $linkBase = 'nav-link px-2 fw-medium';
    // La navbar tiene fondo verde fijo (#0A3D2C) en cualquier tema. En dark, Vuexy remapea el
    // color "light" a un gris oscuro y btn-outline-light se ve oscuro. Forzamos blanco con
    // variables --bs-btn-* inline para que el botón sea consistente en light y dark.
    $navBtnStyle = '--bs-btn-color:#fff;--bs-btn-border-color:rgba(255,255,255,.65);'
        . '--bs-btn-hover-bg:#fff;--bs-btn-hover-color:#0A3D2C;--bs-btn-hover-border-color:#fff;'
        . '--bs-btn-active-bg:#fff;--bs-btn-active-color:#0A3D2C;--bs-btn-active-border-color:#fff;';
@endphp
<nav class="navbar navbar-expand-md navbar-dark" style="background-color: #0A3D2C;">
    <div class="container-xxl">
        <a class="navbar-brand d-flex align-items-center" href="{{ route('home.index') }}">
            <img src="{{ \App\Support\Media\MainDivisionLogo::url(\App\Support\Media\MainDivisionLogo::WHITE) }}" alt="Logo" style="height: 38px; width: auto;">
        </a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#formNavbar"
            aria-controls="formNavbar" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="formNavbar">
            <ul class="navbar-nav ms-auto align-items-md-center gap-1">
                <li class="nav-item">
                    <a class="{{ $linkBase }} {{ request()->routeIs('home.index') ? 'active text-white' : '' }}"
                        href="{{ route('home.index') }}">{{ __('Home') }}</a>
                </li>
                <li class="nav-item">
                    <a class="{{ $linkBase }} {{ request()->routeIs('sale-tickets.create') ? 'active text-white' : '' }}"
                        href="{{ route('sale-tickets.create') }}">{{ __('Sale form') }}</a>
                </li>
                <li class="nav-item">
                    <a class="{{ $linkBase }} {{ request()->routeIs('purchase-tickets.create') ? 'active text-white' : '' }}"
                        href="{{ route('purchase-tickets.create') }}">{{ __('Purchase form') }}</a>
                </li>
                <li class="nav-item">
                    @auth
                        <a class="btn btn-sm btn-outline-light d-inline-flex align-items-center" href="{{ route('dashboard') }}"
                            style="{{ $navBtnStyle }}">
                            <i class="ti tabler-layout-dashboard me-1"></i>{{ __('My dashboard') }}
                        </a>
                    @else
                        <a class="btn btn-sm btn-outline-light d-inline-flex align-items-center" href="{{ route('login') }}"
                            style="{{ $navBtnStyle }}">
                            <i class="ti tabler-login me-1"></i>{{ __('Login') }}
                        </a>
                    @endauth
                </li>

                {{-- Cambio de idioma (mismo dropdown del guest, en Bootstrap 5) --}}
                @php($currentLang = currentLanguage())
                @php($division = currentDivision())
                @if ($currentLang && $division)
                    <li class="nav-item dropdown">
                        <a class="{{ $linkBase }} dropdown-toggle d-flex align-items-center gap-2" href="#"
                            id="formLangDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            @if ($currentLang->flag_image)
                                <img src="{{ $currentLang->flag_image }}" alt=""
                                    style="width: 20px; height: 14px; object-fit: cover;" class="rounded-1">
                            @endif
                            <span>{{ __('nationality.' . $currentLang->language) }}</span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="formLangDropdown">
                            @foreach ($division->languages as $language)
                                <li>
                                    <a class="dropdown-item d-flex align-items-center gap-2 {{ $currentLang->language_code === $language->language_code ? 'active' : '' }}"
                                        href="{{ url('locale/' . $language->language_code) }}">
                                        @if ($language->flag_image)
                                            <img src="{{ $language->flag_image }}" alt=""
                                                style="width: 20px; height: 14px; object-fit: cover;" class="rounded-1">
                                        @endif
                                        <span>{{ __('nationality.' . $language->language) }}</span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </li>
                @endif
            </ul>
        </div>
    </div>
</nav>