{% set addresses = [
    {
        name: "Мытищи",
        value: "Новомытищинский пр-кт, вл 47, кор 2, 141018, Мытищи"
    },
    {
        name: "Алтуфьево",
        value: "Алтуфьевское шоссе владение 77Б, 129347"
    },
    {
        name: "Пражская",
        value: "ул. Подольских Курсантов д.3 стр.29, 117545"
    },
    {
        name: "Кузьминки",
        value: "Ташкентская 28с1 109472 Москва"
    },
    {
        name: "Кутузовская",
        value: "1-й Сетуньский проезд, 2соор1 119136 Москва"
    }
] %}

<div class="pre-header-container">
    <div class="pre-header-side pre-header-side--left">
        <button class="pre-header-address-btn" data-addresses-dropdown>
            <span class="pre-header-address-btn__label">Адреса магазинов</span>
            <svg class="pre-header-address-btn__icon"><use xlink:href="/sprite.svg#angle-bottom"></use></svg>
            <template data-addresses-dropdown-template>
                <ul class="addresses-dropdown">
                    {% for item in addresses %}
                        <li class="addresses-dropdown__item">
                            <span class="addresses-dropdown__item__title">{{ item.name }}</span>
                            <p class="addresses-dropdown__item__address">{{ item.value }}</p>
                            <div class="addresses-dropdown__item__footer">
                                <div class="addresses-dropdown__item__tag">
                                    <svg class="addresses-dropdown__item__tag__icon"><use xlink:href="/sprite.svg#clock"></use></svg>
                                    <span class="addresses-dropdown__item__tag__text">09:00 до 21:00</span>
                                </div>
                                <div class="addresses-dropdown__item__tag">
                                    <svg class="addresses-dropdown__item__tag__icon"><use xlink:href="/sprite.svg#phone"></use></svg>
                                    <span class="addresses-dropdown__item__tag__text">+7 (495) 118-43-17</span>
                                </div>
                            </div>
                        </li>
                    {% endfor %}
                </ul>
            </template>
        </button>

        <div class="pre-header-contact">
            <a href="tel:+74951184317" class="pre-header-contact__phone-link">8 (495) 118 43 17</a>
            <span class="pre-header-contact__opening-hours">Ежедневно 9:00-21:00</span>
        </div>
    </div>
    
    <div class="pre-header-side pre-header-side--right">
        <a href="" class="pre-header-social-link">
            <svg class="pre-header-social-link__icon"><use xlink:href="/sprite.svg#telegram"></use></svg>
            <span class="pre-header-social-link__label">Telegram</span>
        </a>
        <a href="" class="pre-header-social-link">
            <svg class="pre-header-social-link__icon"><use xlink:href="/sprite.svg#whatsapp"></use></svg>
            <span class="pre-header-social-link__label">Whatsapp</span>
        </a>
        <button class="pre-header-social-link" data-modal-btn="04246c73-8fed-4f75-86a2-f73fd33d7ee0">
            <svg class="pre-header-social-link__icon"><use xlink:href="/sprite.svg#phone"></use></svg>
            <span class="pre-header-social-link__label">Заказать звонок</span>
        </button>
    </div>

    <template data-modal-idx="04246c73-8fed-4f75-86a2-f73fd33d7ee0">
        {% include "modals/help-akb.twig" %}
    </template>
</div>