{% extends 'layouts/main.twig' %}

{% block main %}
    {% include "components/bread-crumbs.twig" %}

    <section class="branch-company-section">
        <h1 class="branch-company-section__title">Адреса магазинов</h1>

        <div class="company-addresses-section branch-company-section__addresses" x-data="{ mapType: '1' }">
            <div class="segmented-control company-addresses-section__segmented-control">
                <label class="segmented-control-item">
                    <input type="radio" name="map-type" value="1" x-model="mapType">
                    <div>Списком</div>
                </label>
                <label class="segmented-control-item">
                    <input type="radio" name="map-type" value="2" x-model="mapType">
                    <div>На карте</div>
                </label>
            </div>

            <div class="company-addresses-section__map-wrapper" x-show="mapType === '2'">
                <div class="company-addresses-section__map-address">
                    <img src="/images/address.png" alt="" srcset="/images/address@2x.png 2x" class="company-addresses-section__map-address__img">
                    <span class="company-addresses-section__map-address__title">Carakb Мытищи</span>
                    <p class="company-addresses-section__map-address__desc">Новомытищинский пр-кт, вл 47, кор 2, 141018, Мытищи</p>
                    <span class="company-addresses-section__map-address__time">Доступно сегодня в 15:00</span>
                    <div class="company-addresses-section__map-address__labels">
                        <div class="company-addresses-section__map-address__label">
                            <svg><use xlink:href="/sprite.svg#clock"></use></svg>
                            <span>09:00 до 21:00</span>
                        </div>
                        <div class="company-addresses-section__map-address__label">
                            <svg><use xlink:href="/sprite.svg#phone"></use></svg>
                            <span>+7 (495) 118-43-17</span>
                        </div>
                    </div>
                    <a href="" class="company-addresses-section__map-address__btn">Построить маршрут</a>
                </div>
            </div>

            <div class="company-addresses-section__branchs" x-show="mapType === '1'">
                <div class="company-addresses-section__branch-item">
                    <img src="/images/branchs/1.png" alt="" class="company-addresses-section__branch-item__img">
                    <div class="company-addresses-section__branch-item__main">
                        <span class="company-addresses-section__branch-item__title">Мытищи</span>
                        <p class="company-addresses-section__branch-item__desc">Новомытищинский пр-кт, вл 47, кор 2, 141018, Мытищи</p>
                        <div class="company-addresses-section__branch-item__labels">
                            <div class="company-addresses-section__branch-item__label-item">
                                <svg><use xlink:href="/sprite.svg#clock"></use></svg>
                                <span>09:00 до 21:00</span>
                            </div>
                            <div class="company-addresses-section__branch-item__label-item">
                                <svg><use xlink:href="/sprite.svg#phone"></use></svg>
                                <span>+7 (495) 118-43-17</span>
                            </div>
                        </div>
                        <a href="" class="company-addresses-section__branch-item__btn">Построить маршрут</a>
                    </div>
                </div>
                <div class="company-addresses-section__branch-item">
                    <img src="/images/branchs/2.jpg" alt="" class="company-addresses-section__branch-item__img">
                    <div class="company-addresses-section__branch-item__main">
                        <span class="company-addresses-section__branch-item__title">Алтуфьево</span>
                        <p class="company-addresses-section__branch-item__desc">Алтуфьевское шоссе владение 77Б, 129347</p>
                        <div class="company-addresses-section__branch-item__labels">
                            <div class="company-addresses-section__branch-item__label-item">
                                <svg><use xlink:href="/sprite.svg#clock"></use></svg>
                                <span>09:00 до 21:00</span>
                            </div>
                            <div class="company-addresses-section__branch-item__label-item">
                                <svg><use xlink:href="/sprite.svg#phone"></use></svg>
                                <span>+7 (495) 118-43-17</span>
                            </div>
                        </div>
                        <a href="" class="company-addresses-section__branch-item__btn">Построить маршрут</a>
                    </div>
                </div>
                <div class="company-addresses-section__branch-item">
                    <img src="/images/branchs/3.jpg" alt="" class="company-addresses-section__branch-item__img">
                    <div class="company-addresses-section__branch-item__main">
                        <span class="company-addresses-section__branch-item__title">Пражская</span>
                        <p class="company-addresses-section__branch-item__desc">ул. Подольских Курсантов д.3 стр.29, 117545</p>
                        <div class="company-addresses-section__branch-item__labels">
                            <div class="company-addresses-section__branch-item__label-item">
                                <svg><use xlink:href="/sprite.svg#clock"></use></svg>
                                <span>09:00 до 21:00</span>
                            </div>
                            <div class="company-addresses-section__branch-item__label-item">
                                <svg><use xlink:href="/sprite.svg#phone"></use></svg>
                                <span>+7 (495) 118-43-17</span>
                            </div>
                        </div>
                        <a href="" class="company-addresses-section__branch-item__btn">Построить маршрут</a>
                    </div>
                </div>
                <div class="company-addresses-section__branch-item">
                    <img src="/images/branchs/4.jpg" alt="" class="company-addresses-section__branch-item__img">
                    <div class="company-addresses-section__branch-item__main">
                        <span class="company-addresses-section__branch-item__title">Кузьминки</span>
                        <p class="company-addresses-section__branch-item__desc">Ташкентская 28с1 109472 Москва</p>
                        <div class="company-addresses-section__branch-item__labels">
                            <div class="company-addresses-section__branch-item__label-item">
                                <svg><use xlink:href="/sprite.svg#clock"></use></svg>
                                <span>09:00 до 21:00</span>
                            </div>
                            <div class="company-addresses-section__branch-item__label-item">
                                <svg><use xlink:href="/sprite.svg#phone"></use></svg>
                                <span>+7 (495) 118-43-17</span>
                            </div>
                        </div>
                        <a href="" class="company-addresses-section__branch-item__btn">Построить маршрут</a>
                    </div>
                </div>
                <div class="company-addresses-section__branch-item">
                    <img src="/images/branchs/5.png" alt="" class="company-addresses-section__branch-item__img">
                    <div class="company-addresses-section__branch-item__main">
                        <span class="company-addresses-section__branch-item__title">Кутузовская</span>
                        <p class="company-addresses-section__branch-item__desc">1-й Сетуньский проезд, 2соор1 119136 Москва</p>
                        <div class="company-addresses-section__branch-item__labels">
                            <div class="company-addresses-section__branch-item__label-item">
                                <svg><use xlink:href="/sprite.svg#clock"></use></svg>
                                <span>09:00 до 21:00</span>
                            </div>
                            <div class="company-addresses-section__branch-item__label-item">
                                <svg><use xlink:href="/sprite.svg#phone"></use></svg>
                                <span>+7 (495) 118-43-17</span>
                            </div>
                        </div>
                        <a href="" class="company-addresses-section__branch-item__btn">Построить маршрут</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {% include "components/selection-help-section.twig" %}

    <ul class="company-pluses-section branch-company-section__company-pluses">
        <li class="company-pluses-section__li">
            <div class="company-pluses-section__li__icon">
                <svg><use xlink:href="/sprite.svg#coins"></use></svg>
            </div>
            <div class="company-pluses-section__li__main">
                <span>Выгодные цены</span>
                <p>Официальные представители и представляем лучшие цены</p>
            </div>
        </li>
        <li class="company-pluses-section__li">
            <div class="company-pluses-section__li__icon">
                <svg><use xlink:href="/sprite.svg#mortarboard"></use></svg>
            </div>
            <div class="company-pluses-section__li__main">
                <span>Профессионализм</span>
                <p>Над вашими заказами работают квалицифированные сотрудники</p>
            </div>
        </li>
        <li class="company-pluses-section__li">
            <div class="company-pluses-section__li__icon">
                <svg><use xlink:href="/sprite.svg#delivery-box"></use></svg>
            </div>
            <div class="company-pluses-section__li__main">
                <span>Собственный склад</span>
                <p>На складе находятся все автомобильные аккумуляторы, представленные в каталоге.</p>
            </div>
        </li>
        <li class="company-pluses-section__li">
            <div class="company-pluses-section__li__icon">
                <svg><use xlink:href="/sprite.svg#security"></use></svg>
            </div>
            <div class="company-pluses-section__li__main">
                <span>Гарантия</span>
                <p>На все аккумуляторы гарантия от производителя от 1 года до 4 лет</p>
            </div>
        </li>
    </ul>

    {% include "components/actions-company-section.twig" %}

    {% include "components/customer-reviews-section.twig" %}

    {% include "components/answers-to-questions-section.twig" %}
{% endblock %}