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

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

    <section class="actions-and-sale-company-section">
        <h1 class="actions-and-sale-company-section__title">Акции и скидки</h1>

        <div class="actions-and-sale-company-section__promo-grid">
            <a href="" class="promo-banner promo-banner--1">
                <span class="promo-banner__title">Доставка курьером или самовывоз</span>
                <span class="promo-banner__label">
                    <span>Подробнее</span>
                    <svg><use xlink:href="/sprite.svg#angle-right"></use></svg>
                </span>
            </a>
            <a href="" class="promo-banner promo-banner--2">
                <span class="promo-banner__title">Сезонные скидки на аккумуляторы</span>
                <span class="promo-banner__label">до 50%</span>
            </a>
            <a href="" class="promo-banner promo-banner--3">
                <span class="promo-banner__title">Фирменная гарантия от CarAkb</span>
                <span class="promo-banner__label">
                    <span>Подробнее</span>
                    <svg><use xlink:href="/sprite.svg#angle-right"></use></svg>
                </span>
            </a>
            <a href="" class="promo-banner promo-banner--4">
                <span class="promo-banner__title">Trade-in с экономией до 2500 руб</span>
                <span class="promo-banner__label">до 50%</span>
            </a>
        </div>

        <div class="actions-and-sale-company-section__products-container">
            <span class="actions-and-sale-company-section__products-container__title">Товары со скидкой</span>

            <div class="actions-and-sale-company-section__products">
                {% for item in range(1, 3) %}
                    {% for item in range(1, 4) %}
                        <div class="product-item">
                            <div class="product-item__photo-wrapper">
                                <img src="/images/products/p-{{ loop.index }}.png" alt="" srcset="/images/products/p-{{ loop.index }}@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">
                                        <svg><use xlink:href="/sprite.svg#control-heart"></use></svg>
                                    </button>
                                    <button class="product-item__control-label">
                                        <svg><use xlink:href="/sprite.svg#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>
                                    <span class="product-item__add-to-cart-btn__sale">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>
                    {% endfor %}
                {% endfor %}
            </div>

            <div class="items-pagination-container actions-and-sale-company-section__products-pagination">
                <button class="items-pagination-load-more-btn">Показать ещё</button>
                <div class="items-pagination-nav">
                    <button class="items-pagination-nav-btn">
                        <svg><use xlink:href="/sprite.svg#angle-left"></use></svg>
                    </button>
                    <div class="items-pagination-nav-list">
                        <a href="" class="items-pagination-nav-item">1</a>
                        <a href="" class="items-pagination-nav-item active">2</a>
                        <a href="" class="items-pagination-nav-item">3</a>
                        <a href="" class="items-pagination-nav-item">...</a>
                        <a href="" class="items-pagination-nav-item">10</a>
                    </div>
                    <button class="items-pagination-nav-btn">
                        <svg><use xlink:href="/sprite.svg#angle-right"></use></svg>
                    </button>
                </div>
            </div>
        </div>
    </section>

    {% include "components/email-subscribe-section.twig" %}

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

    {% include "components/selection-help-section.twig" with {
        "selectionHelpTitle": "Остались вопросы?"
    } %}
{% endblock %}