{{-- resources/views/wiki/partials/header.blade.php --}}
<header class="wk-top">
    @php
        $isGuidesPage = request()->is('wiki/pages/guides');
        $isToolsPage = request()->is('wiki/pages/tools');
        $isDatabasePage = !$isGuidesPage && !$isToolsPage;
    @endphp

    <div class="wk-top__inner">
        <a class="wk-logo" href="/wiki/pages/home" aria-label="Vortex Sky X Wiki home">
            <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>
            <a class="wk-navlink{{ $isToolsPage ? ' wk-navlink--active' : '' }}" href="/wiki/pages/tools">Tools</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>
</header>