{{>headerTop}}
<header class="header sticky top-[var(--header-top-height)] shadow-header bg-white z-[89]">
    <div class="container flex justify-between gap-5">
        <div class="flex items-center gap-8">
            <a href="/" class="flex-center py-3">
                <img src="<?=SITE_TEMPLATE_PATH?>/images/logo.svg" alt="Uztransgaz" class="logo sm:h-[3.75rem] h-12" />
            </a>
            <div class="xl:hidden lg:flex hidden items-center gap-5">
                <p class="2xl:text-base text-sm">AO "Uztransgaz"</p>
                <div class="flex items-center">
                    <button type="button" class="company-menu-btn 2xl:text-base text-sm font-normal main-dark-btn">
                        Наши компании

                        <svg class="size-3">
                            <use xlink:href="/sprites.svg#chevron" />
                        </svg>
                    </button>
                    <div
                        class="company-menu absolute bg-white top-[calc(100%-1rem)] p-4 rounded-modal shadow-card max-w-[22.5rem] z-[90]">
                        {{>changeDirectionForm}}
                    </div>
                </div>
            </div>
        </div>

        <div class="flex gap-2">
            <div class="flex items-center gap-5">
                <p class="2xl:text-base text-sm 2xl:block hidden">AO "Uztransgaz"</p>
                <div class="xl:flex hidden items-center">
                    <button type="button" class="company-menu-btn 2xl:text-base text-sm font-normal main-dark-btn">
                        Наши компании

                        <svg class="size-3">
                            <use xlink:href="/sprites.svg#chevron" />
                        </svg>
                    </button>
                    <div
                        class="company-menu absolute bg-white top-[calc(100%-1rem)] p-4 rounded-modal shadow-card max-w-[22.5rem] z-[90]">
                        {{>changeDirectionForm}}
                    </div>
                </div>
            </div>

            <ul class="xl:flex hidden header-links">
                <li>
                    <div class="header-submenu-wrapper">
                        <a href="/" class="link">Компания</a>

                        <div class="submenu">
                            <div class="container">
                                <div class="wrapper">
                                    <div class="submenu-block">
                                        <a href="/" class="title">О нас</a>
                                        <div class="submenu-links">
                                            <a href="/" class="link">История акционерного общества</a>
                                            <a href="/" class="link">Руководство</a>
                                            <a href="/" class="link">Организационная структура</a>
                                            <a href="/" class="link">Центральный аппарат</a>
                                        </div>
                                    </div>
                                    <div class="submenu-block">
                                        <a href="/" class="title">Внутренние документы</a>
                                        <div class="submenu-links">
                                            <a href="/" class="link">Стратегия развития общества</a>
                                            <a href="/" class="link">Сертификаты</a>
                                            <a href="/" class="link">Обращении</a>
                                            <a href="/" class="link">Комплаенс системы</a>
                                        </div>
                                    </div>
                                    <div class="submenu-block">
                                        <a href="/" class="title">Карьера</a>
                                        <div class="submenu-links">
                                            <a href="/" class="link">Вакансии</a>
                                        </div>
                                    </div>
                                    <div class="submenu-block">
                                        <img src="<?=SITE_TEMPLATE_PATH?>/images/submenu.png" alt="" class="submenu-img" />
                                        <p class="text">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                            tempor incididunt ut
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="/" class="link">Бизнес</a>
                </li>
                <li>
                    <a href="/" class="link">Инвесторам</a>
                </li>
                <li>
                    <a href="/" class="link">Пресс центр </a>
                </li>
                <li>
                    <a href="/" class="link">Открытые сведения</a>
                </li>
                <li>
                    <a href="/" class="link">Устойчивое развитие</a>
                </li>
                <li>
                    <a href="/" class="link">Стратегия развития</a>
                </li>
            </ul>

            <div class="flex items-center gap-2">
                {{>headerSearch}}

                <button type="button" class="header-menu-btn xl:!hidden">
                    <svg class="primary-reverse">
                        <use xlink:href="/sprites.svg#menu" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
</header>

{{>headerMenuDialog}}
<!-- {{>sideMenu}}  -->
{{>scrollToTopBtn}} {{>speakBtn}}