{% load static %}

<section class="products-section container">
    <h2 class="products-title">ПОПУЛЯРНЫЕ ТОВАРЫ</h2>
    <div class="products-grid">
        <article class="product product-1">
            <div class="product-actions">
                <button title="В избранное">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                         class="bi bi-heart" viewBox="0 0 16 16">
                        <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15"></path>
                    </svg>
                </button>
                <button title="В корзину">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                         class="bi bi-cart2" viewBox="0 0 16 16">
                        <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5M3.14 5l1.25 5h8.22l1.25-5zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0m9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0"></path>
                    </svg>
                </button>
            </div>
        </article>

        <article class="product product-2">

        </article>

        <article class="product product-3">

        </article>

        <article class="product product-4">

        </article>

        <article class="product product-5">

        </article>

        <article class="product product-6">

        </article>
    </div>
    {% comment %}
        <!-- Card 1 — tall -->
        <div class="product-card tall">
            <img class="product-card-img" src="{% static 'img/kitchen-sink.jpg' %}" alt="Кухонная мойка">

            <div class="product-info">
                <div class="p-name">Кухонная мойка</div>
                <div class="p-sub">Искусственный камень, врезная на столешницу</div>
                <div class="p-price">1600 руб</div>
            </div>
        </div>

        <!-- Card 2 -->
        <div class="product-card">
            <img class="product-card-img" src="{% static 'img/chopping-board.jpg' %}" alt="Разделочная доска"
                 style="aspect-ratio:4/3;">
            <div class="product-actions">
                <button title="В избранное">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                         stroke-width="2">
                        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                    </svg>
                </button>
                <button title="В корзину">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                         stroke-width="2">
                        <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/>
                        <line x1="3" y1="6" x2="21" y2="6"/>
                        <path d="M16 10a4 4 0 0 1-8 0"/>
                    </svg>
                </button>
            </div>
            <div class="product-info">
                <div class="p-name">Разделочная доска</div>
                <div class="p-sub">Нержавеющая сталь</div>
                <div class="p-price">50 руб</div>
            </div>
        </div>

        <!-- Card 3 — tall -->
        <div class="product-card tall">
            <img class="product-card-img" src="{% static 'img/terra-mirror.jpg' %}" alt="Зеркало Terra">
            <div class="product-actions">
                <button title="В избранное">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                         stroke-width="2">
                        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                    </svg>
                </button>
                <button title="В корзину">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                         stroke-width="2">
                        <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/>
                        <line x1="3" y1="6" x2="21" y2="6"/>
                        <path d="M16 10a4 4 0 0 1-8 0"/>
                    </svg>
                </button>
            </div>
            <div class="product-info">
                <div class="p-name">Зеркало Terra</div>
                <div class="p-sub">Холодная подсветка, фронтальная</div>
                <div class="p-price">200 руб</div>
            </div>
        </div>

        <!-- Card 4 -->
        <div class="product-card">
            <img class="product-card-img" src="{% static 'img/toilet.jpg' %}" alt="Унитаз"
                 style="aspect-ratio:4/3;">
            <div class="product-actions">
                <button title="В избранное">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                         stroke-width="2">
                        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                    </svg>
                </button>
                <button title="В корзину">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                         stroke-width="2">
                        <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/>
                        <line x1="3" y1="6" x2="21" y2="6"/>
                        <path d="M16 10a4 4 0 0 1-8 0"/>
                    </svg>
                </button>
            </div>
            <div class="product-info">
                <div class="p-name">Унитаз</div>
                <div class="p-sub">Напольный с бачком, безободковый</div>
                <div class="p-price">1600 руб</div>
            </div>
        </div>

        <!-- Card 5 (коврик) -->
        <div class="product-card">
            <img class="product-card-img" src="{% static 'img/rubber-mat.jpg' %}" alt="Коврик"
                 style="aspect-ratio:4/3;">
            <div class="product-actions">
                <button title="В избранное">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                         stroke-width="2">
                        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                    </svg>
                </button>
                <button title="В корзину">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                         stroke-width="2">
                        <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/>
                        <line x1="3" y1="6" x2="21" y2="6"/>
                        <path d="M16 10a4 4 0 0 1-8 0"/>
                    </svg>
                </button>
            </div>
            <div class="product-info">
                <div class="p-name">Коврик для посуды</div>
                <div class="p-sub">Мгновенно впитывает воду</div>
                <div class="p-price">20 руб</div>
            </div>
        </div>

        <!-- Card 6 (смеситель) -->
        <div class="product-card">
            <img class="product-card-img" src="{% static 'img/mixer.jpg' %}" alt="Смеситель"
                 style="aspect-ratio:4/3;">
            <div class="product-actions">
                <button title="В избранное">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                         stroke-width="2">
                        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                    </svg>
                </button>
                <button title="В корзину">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                         stroke-width="2">
                        <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/>
                        <line x1="3" y1="6" x2="21" y2="6"/>
                        <path d="M16 10a4 4 0 0 1-8 0"/>
                    </svg>
                </button>
            </div>
            <div class="product-info">
                <div class="p-name">Смеситель</div>
                <div class="p-sub">Однорычажный смеситель</div>
                <div class="p-price">340 руб</div>
            </div>
        </div>

    </div>{% endcomment %}

    <div class="products-footer">
        <a href="#" class="btn-primary">ПЕРЕЙТИ В КАТАЛОГ</a>
    </div>
</section>