<nav class="main-nav-mobile">
    <div class="main-nav-mobile__actions">
        <a
            href="#"
            class="main-nav-mobile__contact tm-main-menu-item"
            data-name="South Pole"
            data-contact="{{ base64_encode(json_encode(["Contact_person" => 'South Pole' ])) }}"
            data-controller="components/form-modal"
            data-popupid="contact-us-modal"
        >
            @include('frontend.svg.phone')
        </a>
        @php
            $langs = Localization::getSupportedLanguages();
        @endphp
        @if($langs->count() > 1)
            <a class="main-nav-mobile__lang main-nav-mobile__btn tm-main-menu-item" data-action="openMobileLang">
                {{ Localization::getActiveLocale() }}
            </a>
            <div class="main-nav-mobile__lang-menu" data-role="mobileLangMenu">
                <ul>
                    @foreach($langs as $language)
                        <li class="{{ ($language->id == Localization::getActiveLocale() ? 'active' : '') }}">
                            <a class="tm-main-menu-item" href="{{ lang_url(isset($langUris[$language->id]) ? $langUris[$language->id] : '/', $language->id)}}">
                                {{ $language->native_name }}
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif
        <a class="main-nav-mobile__search-btn main-nav-mobile__btn tm-main-menu-item" data-action="openMobileSearch">@include('frontend.svg.search')</a>
        <a class="main-nav-mobile__menu-btn main-nav-mobile__btn" data-action="openMobileMenu">
            <span class="menu-icon">
                <span class="menu-icon__line"></span>
                <span class="menu-icon__line"></span>
                <span class="menu-icon__line"></span>
            </span>
        </a>
    </div>
    <div class="mobile-search" data-role="mobileSearch">
        <div class="mobile-search__wrapper">
            <div class="mobile-search__title">
                @lang('frontend.search_in_spg')
            </div>
            <form method="get" action="{{ lang_url('search') }}">
                <input name="q" id="mobile-search-input" type="text" placeholder="@lang('frontend.start_typing')" data-role="mobileSearchInput"/>
                <input type="submit" class="mobile-search_go" value=""/>
            </form>
            <a class="box-close-btn" href="#" data-action="closeMobileSearch"></a>
        </div>
    </div>
    <div class="main-nav-mobile__menu-holder">
        <div class="main-nav-mobile__menu-wrapper" data-role="mobileMenuWrapper">
            <ul class="main-nav-mobile__menu">
                @include('frontend.components.mobile-menu')
            </ul>
            <div class="main-nav-mobile__sub-menus">
                @include('frontend.components.mobile-sub-menus')
            </div>
        </div>
    </div>
</nav>
