{{-- resources/views/wiki/partials/header.blade.php --}}
<header class="wk-top">
    @php
        $isGuidesPage = request()->is('wiki/pages/guides*');
        $isDatabasePage = !$isGuidesPage;
        $wkLocales = \App\Http\Middleware\SetLocale::LOCALES;
        $wkLocale = app()->getLocale();
        $wkFlags = ['en' => 'gb', 'es' => 'es', 'pt' => 'br', 'fr' => 'fr', 'de' => 'de', 'tr' => 'tr', 'pl' => 'pl', 'zh' => 'cn', 'ko' => 'kr'];
    @endphp
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flag-icons@7.2.3/css/flag-icons.min.css">


    <div class="wk-top__inner">
        <a class="wk-logo" href="https://vortex-gaming.net" aria-label="Vortex Games website">
            <img class="wk-logo__img" src="{{ asset('images/WebLogo.png') }}" alt="Vortex Sky X Wiki">
        </a>

        <nav class="wk-nav" aria-label="Primary">
            <div class="wk-navitem wk-navitem--db">
                <a class="wk-navlink{{ $isDatabasePage ? ' wk-navlink--active' : '' }}" href="/wiki/pages/home">{{ __('Database') }}</a>

                <div class="wk-db" role="menu" aria-label="{{ __('Database menu') }}">
                    <div class="wk-db__cols wk-db__cols--one">
                        <div class="wk-db__col">
                            <div class="wk-db__title">{{ __('Game Version') }}</div>

                            @foreach($databaseMenu as $game)
                                <div class="wk-db__row wk-db__row--lvl1">
                                    <a class="wk-db__link" href="{{ $game['href'] }}">
                                        {{ __($game['label']) }}
                                    </a>

                                    @if(!empty($game['children']))
                                        <span class="wk-db__arrow">›</span>

                                        <div class="wk-db__fly wk-db__fly--lvl2">
                                            <div class="wk-db__flyTitle">{{ __($game['label']) }}</div>

                                            @foreach($game['children'] as $sec)
                                                <div class="wk-db__row wk-db__row--lvl2">
                                                    <a class="wk-db__flyLink" href="{{ $sec['href'] }}">
                                                        {{ __($sec['label']) }}
                                                    </a>

                                                    @if(!empty($sec['children']))
                                                        <span class="wk-db__arrow">›</span>

                                                        <div class="wk-db__fly wk-db__fly--lvl3">
                                                            <div class="wk-db__flyTitle">{{ __($sec['label']) }}</div>
                                                            @foreach($sec['children'] as $cat)
                                                                <a class="wk-db__flyLink" href="{{ $cat['href'] }}">
                                                                    {{ __($cat['label']) }}
                                                                </a>
                                                            @endforeach
                                                        </div>
                                                    @endif
                                                </div>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                            @endforeach

                        </div>
                    </div>
                </div>
            </div>

            <a class="wk-navlink{{ $isGuidesPage ? ' wk-navlink--active' : '' }}" href="/wiki/pages/guides">{{ __('Guides') }}</a>
        </nav>

        <form class="wk-search" action="/wiki/search" method="get">
            <input type="search" name="q" value="{{ request('q', '') }}" placeholder="{{ __('Search the database...') }}" aria-label="{{ __('Search') }}">
            <button type="submit" class="wk-search__btn" aria-label="{{ __('Search') }}">
                <svg class="wk-search__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                    <circle cx="11" cy="11" r="6" fill="none" stroke="currentColor" stroke-width="2"></circle>
                    <path d="M16 16L21 21" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
                </svg>
            </button>
        </form>

        <div class="wk-lang">
            <button type="button" class="wk-lang__btn" aria-label="Language"><span class="fi fi-{{ $wkFlags[$wkLocale] ?? 'gb' }}"></span> {{ strtoupper($wkLocale) }}</button>
            <div class="wk-lang__menu" role="menu">
                @foreach($wkLocales as $code => $label)
                    <a class="wk-lang__item{{ $wkLocale === $code ? ' is-active' : '' }}" href="/lang/{{ $code }}"><span class="fi fi-{{ $wkFlags[$code] ?? '' }}"></span> {{ $label }}</a>
                @endforeach
            </div>
        </div>
    </div>
    <style>
        .wk-lang{position:relative;margin-left:12px;}
        .wk-lang__btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;border-radius:8px;padding:7px 11px;cursor:pointer;font-size:13px;line-height:1;}
        .wk-lang__btn:hover{background:rgba(255,255,255,.12);}
        .wk-lang__menu{position:absolute;right:0;top:100%;margin-top:6px;background:#10131c;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:6px;display:none;min-width:150px;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.4);}
        /* Invisible bridge across the 6px gap so the menu doesn't drop while the mouse moves down to the options. */
        .wk-lang__menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px;}
        .wk-lang:hover .wk-lang__menu,.wk-lang:focus-within .wk-lang__menu{display:block;}
        .wk-lang__item{display:block;padding:7px 11px;border-radius:6px;color:#cfd6e6;text-decoration:none;font-size:13px;white-space:nowrap;}
        .wk-lang__item:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none;}
        .wk-lang__item.is-active{color:#fff;background:rgba(255,255,255,.07);}
        .wk-lang .fi{margin-right:7px;border-radius:2px;vertical-align:-2px;box-shadow:0 0 0 1px rgba(255,255,255,.12);}
        .wk-lang__btn .fi{margin-right:5px;}
    </style>
</header>