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

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

    <section class="favorites-client-section">
        <div class="favorites-client-section__head">
            <h1 class="favorites-client-section__title">Избранное</h1>
            <button class="favorites-client-section__clear-btn">
                <svg><use xlink:href="/sprite.svg#delete"></use></svg>
                <span>Очистить список</span>
            </button>
        </div>

        <div class="favorites-client-section__grid">
            {% for item in range(1, 2) %}
                <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 active-heart">
                                <svg><use xlink:href="/sprite.svg#heart-fill"></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>
                <div class="product-item">
                    <div class="product-item__photo-wrapper">
                        <img src="/images/products/p-2.png" alt="" srcset="/images/products/p-2@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 active-heart">
                                <svg><use xlink:href="/sprite.svg#heart-fill"></use></svg>
                            </button>
                            <button class="product-item__control-label">
                                <svg><use xlink:href="/sprite.svg#control-signal"></use></svg>
                            </button>
                        </div>
                        <div class="product-item__ntf-label">Установка бесплатно</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>
                <div class="product-item">
                    <div class="product-item__photo-wrapper">
                        <img src="/images/products/p-3.png" alt="" srcset="/images/products/p-3@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 active-heart">
                                <svg><use xlink:href="/sprite.svg#heart-fill"></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--gray"><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 product-item__add-to-cart-btn--gray" data-modal-btn="c5b89100-a594-4e4c-b7e2-9e2d822ff6f6">
                            Уточнить наличие
                            <template data-modal-idx="c5b89100-a594-4e4c-b7e2-9e2d822ff6f6">
                                {% include "components/modals/help-akb.twig" %}
                            </template>
                        </button>
                    </div>
                    <template data-product-popup="8d473b5f-efe0-4d89-bd0e-308ce68ca514">
                        {% include "components/product-popup.twig" %}
                    </template>
                </div>
                <div class="product-item">
                    <div class="product-item__photo-wrapper">
                        <img src="/images/products/p-4.png" alt="" srcset="/images/products/p-4@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 active-heart">
                                <svg><use xlink:href="/sprite.svg#heart-fill"></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 %}
        </div>
    </section>

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