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

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

    <div class="product-card-head-desktop">
        <h1 class="product-card-head-desktop__title">Аккумулятор Varta Silver Dynamic C6 52Ач 520А 552 401 052, обратная полярность</h1>

        <div class="product-card-head-desktop__inf">
            <span class="product-card-head-desktop__inf__default-text">Арт. 362842</span>
            <div class="product-card-head-desktop__inf__rating">
                <div class="stars-rate stars-rate--small" style="--rate: 5"></div>
                <span>4,9</span>
            </div>
            <a href="" class="product-card-head-desktop__inf__default-text">125 отзывов</a>
            <button class="product-card-head-desktop__inf__btn">
                <svg><use xlink:href="/sprite.svg#control-signal"></use></svg>
                <span>Сравнить</span>
            </button>
            <button class="product-card-head-desktop__inf__btn">
                <svg><use xlink:href="/sprite.svg#control-heart"></use></svg>
                <span>В избранное</span>
            </button>
            <div class="product-card-head-desktop__inf__fill"></div>
            <button class="product-card-head-desktop__inf__btn" data-dropdown-tippy>
                <svg><use xlink:href="/sprite.svg#share"></use></svg>
                <span>Поделиться</span>
                <template data-dropdown-template-tippy>
                    <div class="shared-dropdown">
                        <a href="" class="shared-dropdown-link">
                            <svg><use xlink:href="/sprite.svg#shared-tg"></use></svg>
                        </a>
                        <a href="" class="shared-dropdown-link">
                            <svg><use xlink:href="/sprite.svg#shared-whatsapp"></use></svg>
                        </a>
                        <a href="" class="shared-dropdown-link">
                            <svg><use xlink:href="/sprite.svg#shared-vk"></use></svg>
                        </a>
                        <a href="" class="shared-dropdown-link">
                            <svg><use xlink:href="/sprite.svg#shared-ok"></use></svg>
                        </a>
                        <a 
                            href="https://test.ru/path" 
                            class="shared-dropdown-link" 
                            style="color: #737373" 
                            x-data="{
                                copyToClipboard() {
                                    navigator.clipboard.writeText(this.$el.href).then(() => {
                                        alert('Ссылка скопирована')
                                    }).catch(err => {
                                        alert('Не удалось скопировать ссылку')
                                    });
                                }
                            }"
                            @click.prevent="copyToClipboard()"
                        >
                            <svg><use xlink:href="/sprite.svg#copy"></use></svg>
                        </a>
                    </div>
                </template>
            </button>
        </div>
    </div>

    <div class="product-card-grid">
        {# Фото #}
        <div class="product-card-grid__photo">
            <div class="product-card-grid__photo__slider" data-product-card-photo-slider>
                <div class="swiper-slider">
                    <div class="swiper-wrapper">
                        {% for item in range(1, 6) %}
                            <div class="swiper-slide product-card-grid__photo__slide">
                                <img src="/images/product-card/1.png" alt="" srcset="/images/product-card/1@2x.png 2x">
                            </div>
                        {% endfor %}
                    </div>
                    <div class="swiper-pagination custom-swiper-pagination"></div>
                    <button class="product-card-grid__photo__slide-prev">
                        <svg><use xlink:href="/sprite.svg#angle-left"></use></svg>
                    </button>
                    <button class="product-card-grid__photo__slide-next">
                        <svg><use xlink:href="/sprite.svg#angle-right"></use></svg>
                    </button>
                </div>

                <div class="product-card-grid__photo__labels">
                    <div class="product-card-grid__photo__label">Хит продаж</div>
                    <div class="product-card-grid__photo__label product-card-grid__photo__label--accent-bg">Установка бесплатно</div>
                </div>
            </div>

            <div class="product-card-head-mobile">
                <h1 class="product-card-head-mobile__title">Аккумулятор Varta Silver Dynamic C6 52Ач 520А 552 401 052, обр. полярность</h1>

                <div class="product-card-head-mobile__inf">
                    <div class="product-card-head-mobile__inf__text-with-icon">
                        <svg><use xlink:href="/sprite.svg#battery-md"></use></svg>
                        <span>75Ач</span>
                    </div>
                    <span class="product-card-head-mobile__inf__default-text">Обр. полярность</span>
                    <span class="product-card-head-mobile__inf__default-text">250х175х225 мм</span>
                    <span class="product-card-head-mobile__inf__default-text">Арт. 362842</span>
                    <div class="product-card-head-mobile__inf__rating">
                        <div class="stars-rate" style="--rate: 5"></div>
                        <span>4,9</span>
                    </div>
                    <a href="" class="product-card-head-mobile__inf__default-text">125 отзывов</a>
                    <button class="product-card-head-mobile__inf__text-with-icon">
                        <svg><use xlink:href="/sprite.svg#control-signal"></use></svg>
                        <span>Сравнить</span>
                    </button>
                    <button class="product-card-head-mobile__inf__text-with-icon">
                        <svg><use xlink:href="/sprite.svg#control-heart"></use></svg>
                        <span>В избранное</span>
                    </button>
                </div>
            </div>
        </div>

        {# Расчеты #}
        <div class="product-card-grid__estimation">
            <div class="product-card-grid__estimation-block product-card-grid__estimation-block--gap10" x-data="{ discount: false }">
                <label class="input-tumbler">
                    <input type="checkbox" x-model="discount">
                    <div class="input-tumbler__box"></div>
                    <p class="input-tumbler__text">Обмен на старый аккумулятор</p>
                </label>
                <div class="product-card-grid__estimation-block__price">
                    <span class="product-card-grid__estimation-block__price-current">6 400 ₽</span>
                    <span class="product-card-grid__estimation-block__price-discount" x-show="discount">-500₽</span>
                    <span class="product-card-grid__estimation-block__price-sale">6 900 ₽</span>
                </div>
                <div class="product-card-grid__estimation-block__status">
                    <span>Нет в наличии</span>
                </div>
                <button class="product-card-grid__estimation-block__checkout-btn product-card-grid__estimation-block__checkout-btn--secondary" data-modal-btn="65d6edd8-15c2-4d16-a300-fa74f6b8b712">
                    Уточнить у менеджера
                    <template data-modal-idx="65d6edd8-15c2-4d16-a300-fa74f6b8b712">
                        {% include "components/modals/help-akb.twig" %}
                    </template>
                </button>
                <p class="product-card-grid__estimation-block__checkout-desc">*Скидка при при условии сдачи старого аккумулятора аналогичной ёмкости</p>
                <button class="product-card-grid__estimation-block__offer-btn" data-modal-btn="20b7283b-6550-4c7a-8410-c64d55366a50">
                    <b>Нашли дешевле?</b>
                    <span>Сделаем скидку</span>
                    <div class="product-card-grid__estimation-block__offer-btn__icon">
                        <svg><use xlink:href="/sprite.svg#angle-right"></use></svg>
                    </div>
                    <template data-modal-idx="20b7283b-6550-4c7a-8410-c64d55366a50">
                        {% include "components/modals/bid-discount.twig" %}
                    </template>
                </button>
                <button class="product-card-grid__estimation-block__offer-btn product-card-grid__estimation-block__offer-btn--processing">
                    <div class="product-card-grid__estimation-block__offer-btn__main">
                        <b>Скидка запрошена</b>
                        <span>Пришлём ответ на почту</span>
                    </div>
                    <svg class="product-card-grid__estimation-block__offer-btn__icon"><use xlink:href="/sprite.svg#circle-check"></use></svg>
                </button>
            </div>
            <div class="product-card-grid__estimation-block product-card-grid__estimation-block--gap14">
                <ul class="product-card-grid__estimation-block__delivery-list">
                    <li class="product-card-grid__estimation-block__delivery-item">
                        <div class="product-card-grid__estimation-block__delivery-item__icon">
                            <svg><use xlink:href="/sprite.svg#delivered"></use></svg>
                        </div>
                        <div class="product-card-grid__estimation-block__delivery-item__main">
                            <span>Доставим курьером</span>
                            <p>Завтра – 300 ₽ (500 ₽ за МКАД)*</p>
                        </div>
                    </li>
                    <li class="product-card-grid__estimation-block__delivery-item">
                        <div class="product-card-grid__estimation-block__delivery-item__icon">
                            <svg><use xlink:href="/sprite.svg#package"></use></svg>
                        </div>
                        <div class="product-card-grid__estimation-block__delivery-item__main">
                            <span>Самовывоз из магазина</span>
                            <p>Сегодня – бесплатно*</p>
                        </div>
                    </li>
                </ul>
                <p class="product-card-grid__estimation-block__delivery-desc">*При условии подтверждения от менеджера</p>
            </div>
        </div>

        {# Характеристики #}
        <div class="product-card-grid__characteristics">
            <div class="product-card-grid__characteristics__content">
                <span class="product-card-grid__characteristics__title">Характеристики</span>
                <ul class="product-card-grid__characteristics__list">
                    <li class="product-card-grid__characteristics__item"><span>Габариты (мм)</span><span>242х175х190</span></li>
                    <li class="product-card-grid__characteristics__item"><span>Тип корпуса</span><span>31L/R азиатский</span></li>
                    <li class="product-card-grid__characteristics__item"><span>Гарантия</span><span>48 мес</span></li>
                    <li class="product-card-grid__characteristics__item"><span>Ёмкость</span><span>65</span></li>
                    <li class="product-card-grid__characteristics__item"><span>Полярность</span><span>Обратная</span></li>
                    <li class="product-card-grid__characteristics__item"><span>Страна</span><span>Тайланд</span></li>
                    <li class="product-card-grid__characteristics__item"><span>Производитель</span><span>Delkor</span></li>
                    <li class="product-card-grid__characteristics__item"><span>Габариты (мм)</span><span>242х175х190 мм</span></li>
                </ul>
            </div>

            <div class="product-card-grid__characteristics__labels">
                <button class="product-card-grid__characteristics__label">
                    <div class="product-card-grid__characteristics__label__img">
                        <img src="/images/product-card/icons/1.png" alt="" srcset="/images/product-card/icons/1@2x.png 2x">
                    </div>
                    <div class="product-card-grid__characteristics__label__main">
                        <b>Аккумуляторы Varta</b>
                        <span>Бренд</span>
                    </div>
                </button>
                <button class="product-card-grid__characteristics__label">
                    <div class="product-card-grid__characteristics__label__img">
                        <img src="/images/product-card/icons/2.png" alt="" srcset="/images/product-card/icons/2@2x.png 2x">
                    </div>
                    <div class="product-card-grid__characteristics__label__main">
                        <b>Аккумуляторы 52 Ah</b>
                        <span>Подборка</span>
                    </div>
                </button>
            </div>
        </div>
    </div>

    <div class="product-card-tabs-wrapper" x-data="{ tabIndex: 1 }">
        <div class="product-card-tabs-slider" data-product-card-tabs-slider>
            <div class="swiper-slider">
                <div class="swiper-wrapper">
                    {% for item in ["Описание и характеристики", "Отзывы", "Вопросы", "Гарантия", "Доставка и оплата", "Совместимость"] %}
                        <div class="swiper-slide product-card-tab-slide" :class="{ active: tabIndex === {{ loop.index }} }" @click="tabIndex = {{ loop.index }}">{{ item }}</div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="product-card-tab-desc-container">
            <span class="product-card-tab-desc-container__title">Описание и характеристики</span>
            <div class="product-card-tab-desc-container__text">
                <p>Аккумуляторная батарея модельного ряда Silver Dynamiс отличается улучшенными энергетическими показателями.</p>
                <p>Применение отлично зарекомендовавшего себя сплава, легированного серебром, гарантирует повышенный срок службы батареи.</p>
                <p>Модельный ряд Silver Dynamic разработан для автомобилей с мощными моторами и большой энергооснащенностью. Рекордно высокий стартерный ток и дополнительная емкость (в сравнении с другими аккумуляторами аналогичных типоразмеров) обеспечивают уверенный пуск двигателя в экстремальных климатических условиях.</p>
                <p>Рекомендуются также для пуска дизельных двигателей и эксплуатации в экстремальных температурных условиях.</p>
            </div>
            <div class="product-card-tab-desc-container__grid">
                <ul class="product-card-tab-desc-container__list">
                    <li><span>Емкость</span><a href="">52</a></li>
                    <li><span>Полярность</span><a href="">Обратная</a></li>
                    <li><span>Пусковой ток</span><span>520</span></li>
                    <li><span>Бренд</span><a href="">Varta</a></li>
                    <li><span>Габариты (мм)</span><span>207х175х175</span></li>
                    <li><span>Страна</span><a href="">Чехия</a></li>
                </ul>
                <ul class="product-card-tab-desc-container__list">
                    <li><span>Тип корпуса</span><span>L1 европейский</span></li>
                    <li><span>Технология</span><span>Ca/Ca</span></li>
                    <li><span>Тип токовывода</span><span>Стандартные клеммы</span></li>
                    <li><span>Гарантия</span><span>24 месяца</span></li>
                    <li><span>Доставка</span><span>Сегодня</span></li>
                    <li><span>Серия</span><span>SILVER DYNAMIC</span></li>
                </ul>
            </div>
        </div>
    </div>

    {% include "components/products-slider-section.twig" with { 
        productsSliderTitle: "Аналоги"
    } %}

    {% include "components/promo-slider-section.twig" %}

    {% include "components/products-slider-section.twig" with { 
        productsSliderTitle: "Сопутствующие товары",
        productsSliderMoreHide: true
    } %}

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

    <ul class="company-pluses-section company-pluses-section--content">
        <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/products-slider-section.twig" with { 
        productsSliderTitle: "Вы недавно смотрели",
        productsSliderMoreHide: true
    } %}
{% endblock %}