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

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

    <section class="product-comparison-section">
        <h1 class="product-comparison-section__title">Сравнение товаров</h1>
        
        <div class="product-comparison-section__control">
            <label class="input-tumbler">
                <input type="checkbox">
                <div class="input-tumbler__box"></div>
                <p class="input-tumbler__text">Показывать только отличия</p>
            </label>
            <button class="product-comparison-section__clear-btn">
                <svg><use xlink:href="/sprite.svg#delete"></use></svg>
                <span>Очистить список</span>
            </button>
        </div>

        <div class="product-comparison-section__slider" data-product-comparison-slider>
            <div class="swiper-slider">
                <div class="swiper-wrapper">
                    {% for item in range(1, 8) %}
                        <div class="swiper-slide product-comparison-section__slide">
                            <div class="product-item">
                                <div class="product-item__photo-wrapper">
                                    <img src="/images/products/p-1.png" alt="" srcset="/images/products/p-1@2x.png 2x" class="product-item__photo-img">
                                    <div class="product-item__guarantee-label">
                                        <svg><use xlink:href="/sprite.svg#security"></use></svg>
                                        <span>12 мес</span>
                                    </div>
                                    <div class="product-item__control-labels">
                                        <button class="product-item__control-label" :class="{ 'active-heart': active }" x-data="{ active: false }" @click.prevent="active = !active">
                                            <svg><use x-bind:href="'/sprite.svg#' + (active ? 'heart-fill' : 'control-heart')"></use></svg>
                                        </button>
                                        <button class="product-item__control-label" :class="{ 'active-compare': active }" x-data="{ active: false }" @click.prevent="active = !active">
                                            <svg><use x-bind:href="'/sprite.svg#' + (active ? 'signal-fill' : 'control-signal')"></use></svg>
                                        </button>
                                    </div>
                                    <button class="product-item__preview-btn" data-product-popup-button="8d473b5f-efe0-4d89-bd0e-308ce68ca514">
                                        <svg><use xlink:href="/sprite.svg#eye"></use></svg>
                                        <span>Быстрый просмотр</span>
                                    </button>
                                </div>
                                <div class="product-item__content">
                                    <div class="product-item__main">
                                        <ul class="product-item__stat">
                                            <li class="product-item__stat__rate">
                                                <svg class="product-item__stat__rate__icon"><use xlink:href="/sprite.svg#product-star"></use></svg>
                                                <span class="product-item__stat__rate__num">4,9</span>
                                            </li>
                                            <li class="product-item__stat__status product-item__stat__status--green"><span>В наличии</span></li>
                                            <li class="product-item__stat__pr">Словения</li>
                                        </ul>
                                        <a href="" class="product-item__name">Delkor 75D23L 65Ач 550А, ОП, стандартные клеммы</a>
                                        <ul class="product-item__params">
                                            <li class="product-item__param-text product-item__param-text--fill">
                                                250х175х225 мм
                                            </li>
                                            <li class="product-item__param-acc">
                                                <svg class="product-item__param-acc__icon"><use xlink:href="/sprite.svg#battery-md"></use></svg>
                                                <span class="product-item__param-acc__text">75Ач</span>
                                            </li>
                                            <li class="product-item__param-text">
                                                Обратная полярность
                                            </li>
                                        </ul>
                                    </div>
                                    <button class="product-item__add-to-cart-btn" data-product-in-cart-popup-btn="22c849f8-8208-456a-8d6e-6f91eec3686a">
                                        <svg class="product-item__add-to-cart-btn__icon"><use xlink:href="/sprite.svg#cart"></use></svg>
                                        <span class="product-item__add-to-cart-btn__text">6 400 ₽</span>
                                    </button>
                                </div>
                                <template data-product-popup="8d473b5f-efe0-4d89-bd0e-308ce68ca514">
                                    {% include "components/product-popup.twig" %}
                                </template>
                                <template data-product-in-cart-popup="22c849f8-8208-456a-8d6e-6f91eec3686a">
                                    {% include "components/product-in-cart-popup.twig" %}
                                </template>
                            </div>
                            <button class="product-comparison-section__clear-btn" data-delay-notification-remove-btn="85abff24-9a9c-4e0b-b230-2b873afc3b4f-{{loop.index}}">
                                <svg><use xlink:href="/sprite.svg#delete"></use></svg>
                                <span>Удалить</span>
                                <template data-delay-notification-remove="85abff24-9a9c-4e0b-b230-2b873afc3b4f-{{loop.index}}">
                                    <div class="delay-notification-remove">
                                        <div class="delay-notification-remove__main">
                                            <span class="delay-notification-remove__title">Товар удалён из сравнения</span>
                                            <button class="delay-notification-remove__btn">Вернуть</button>
                                        </div>
                                        <div class="delay-notification-remove__delay">
                                            <div class="delay-notification-remove__delay__line"></div>
                                        </div>
                                    </div>
                                </template>
                            </button>
                            <ul class="product-comparison-section__slide__list">
                                <li><span>Емкость</span><span>52</span></li>
                                <li><span>Полярность</span><span>Обратная</span></li>
                                <li><span>Пусковой ток</span><span>520</span></li>
                                <li><span>Бренд</span><span>Varta</span></li>
                                <li><span>Габариты (мм)</span><span>207х175х175</span></li>
                                <li><span>Страна</span><span>Чехия</span></li>
                                <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>SILVER DYNAMIC</span></li>
                            </ul>
                        </div>
                    {% endfor %}
                </div>
                <button class="slider-nav-btn slider-nav-btn--prev" data-slide-nav-btn-prev>
                    <svg class="slider-nav-btn__icon"><use xlink:href="/sprite.svg#angle-right"></use></svg>
                </button>
                <button class="slider-nav-btn slider-nav-btn--next" data-slide-nav-btn-next>
                    <svg class="slider-nav-btn__icon"><use xlink:href="/sprite.svg#angle-right"></use></svg>
                </button>
            </div>
        </div>
    </section>

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