<header class="main-header" data-controller="layout/header">
    <div class="main-header__top-bar">
        <div class="main-header__top-bar-content">
            <nav class="main-header__top-bar-nav">
                <ul>
                    <li class="main-header__lang-switch main-header__top-bar-item" data-role="lang-switch">
                        <a class="main-header__lang-switch-toggle open-lang" data-action="toggle-lang-drop">
                            {{ Localization::getActiveLanguage()['native_name'] }}
                            @include('frontend.svg.icon-chevron-down')
                        </a>
                        <div class="main-header__lang-switch-drop">
                            <ul>
                                @foreach(Localization::getSupportedLanguages() as $language)
                                    <li class="{{ ($language->id == Localization::getActiveLocale() ? 'active' : '') }}">
                                        <a href="{{ lang_url(isset($langUris[$language->id]) ? $langUris[$language->id] : '/', $language->id)}}" class="languageItem{{ ($language->id == Localization::getActiveLocale() ? ' active' : '') }}">
                                            {{ $language->native_name }}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </li>
                    @if($topMenu)
                        @foreach($topMenu->menuItems as $menuItem)
                            <li class="main-header__top-bar-item">
                                <a
                                    class="main-header__top-bar-link"
                                    href="{{ $menuItem->url }}"
                                    {!! $menuItem->target ? "target='{$menuItem->target}'" : '' !!}
                                >
                                    {{ $menuItem->title }}
                                </a>
                            </li>
                        @endforeach
                    @endif
                </ul>
            </nav>
        </div>
    </div>
    <div class="main-header__bottom-bar">
        <div class="main-header__container">
            <div class="main-header__logo-mask">
                <a class="main-header__logo" href="{{lang_url('/')}}">
                    <span class="main-header__logo-desktop">@include('frontend.svg.logo-spg-v2')</span>
                    <span class="main-header__logo-mobile">@include('frontend.svg.logo-spg-v2')</span>
                </a>
            </div>
            @include('frontend.components.navigation')
            @include('frontend.components.tablet_navigation')
            @include('frontend.components.mobile_navigation')
        </div>
    </div>
    @include('frontend.components.menu-drawer')
    <div class="main-header__scroll-indicator" data-role="scrcoll-indicator"><span></span></div>
</header>
@include('frontend.includes.breadcrumbs')
