{% 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="header-contacts-mobile-container">
    <button class="header-contacts-mobile-address-btn" data-addresses-dropdown>
        <span class="header-contacts-mobile-address-btn__label">Адреса</span>
        <svg class="header-contacts-mobile-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="header-contacts-mobile-contacts">
        <a href="" class="header-contacts-mobile-phone-link">8 (495) 118 43 17</a>

        <div class="header-contacts-mobile-socials">
            {% for social in ["telegram", "whatsapp"] %}
                <a href="" target="_blank" class="header-contacts-mobile-social-link">
                    <svg class="header-contacts-mobile-social-link__icon"><use xlink:href="/sprite.svg#{{ social }}"></use></svg>
                </a>
            {% endfor %}
        </div>
    </div>
</div>