{% extends "base_generic.html" %}

{% block title %}<title>Товары и услуги</title>{% endblock %}

{% block content %}
<style>
    .products {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

    .product {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 30px 30px;
        gap: 15px;
        box-shadow: #dadada 3px 3px 3px ;
    }
    .desc {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .productLink {
        color: black;
        text-decoration: none;
    }
</style>

    <div class="desc">
        <h1>Товары и услуги</h1>
    </div>
    <div class="products">
        {% for product in products %}
        <div class="product">
            <p>{{product.name}}</p>
            <p>{{product.desc}}</p>
            <p><img class="img" src="/media/{{ product.photo }}"></p>
            <p><a class="productLink" href="{% url 'services-detail' product.id %}">Перейти на страницу товара/услуги</a></p>
        </div>
    {% endfor %}
    </div>
{% endblock %}