<header class="header">
    <div class="header-container">
        <div class="header-company-group">
            <a href="" class="header-company-logo">
                <img src="/images/logo-dark.svg" alt="">
            </a>
            <p class="header-company-desc">Семейная клиника психического здоровья и лечения зависимостей в Москве</p>
        </div>

        <div class="header-form-group">
            <input type="text" name="search" placeholder="Поиск по сайту" class="input-default input-default--with-icon input-default--with-icon-search">

            <div 
                x-data="select({
                    name: 'country',
                    placeholder: 'Выбрать язык',
                    defaultValue: 'ru',
                    options: [
                        { value: 'ru', label: 'Русский' },
                        { value: 'en', label: 'English' }
                    ]
                })"
                x-init="init()"
                class="select-wrapper"
            >
                <input type="hidden" :name="name" :value="selected?.value ?? ''">

                <button
                    type="button"
                    @click="toggle()"
                    @keydown.arrow-down.prevent="focusNext()"
                    @keydown.arrow-up.prevent="focusPrev()"
                    @keydown.enter.prevent="selectFocused()"
                    @keydown.escape="close()"
                    :aria-expanded="open"
                    class="select-default select-default--with-icon select-default--with-icon-glob"
                    :class="{ open }"
                >
                    <span x-text="selected ? selected.label : placeholder"></span>
                </button>

                <div
                    x-show="open"
                    @click.outside="close()"
                    x-transition
                    class="select-dropdown"
                >
                    <template x-for="(option, index) in options" :key="option.value">
                        <div
                            @click="select(option)"
                            @mouseenter="focusedIndex = index"
                            class="select-dropdown-item"
                            :class="{
                                {# 'focused': focusedIndex === index, #}
                                'selected': selected?.value === option.value
                            }"
                            x-text="option.label"
                        ></div>
                    </template>
                </div>
            </div>
        </div>

        <div class="header-company-contact">
            <a href="tel:+74958590497" class="header-company-contact-link">
                <sub>+7 (495)</sub>
                <span>859-04-97</span>
            </a>
            <p class="header-company-contact-desc">круглосуточно, без выходных</p>
        </div>

        <div class="header-hamburger-btn">
            <div class="header-hamburger-btn__line"></div>
        </div>
    </div>
</header>