{% extends 'base.html' %}
{% block title %} Каталог {% endblock %}

{% block styles %}
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/catalog-style.css' %}">
{% endblock %}

{% block content %}
    <h1>
        Каталог
        {% if cat_name %}
            / {{ cat_name }}
        {% endif %}
    </h1>
    <div class="catalog-container">
        <div class="catalog-categories">
            <h4 style="text-align: center">Категории</h4>
            <ul>
                <li><a href="{% url 'catalog' %}">Все категории</a></li>
                {% for c in categories %}
                    <li><a href="{% url 'catalog' %}?cat={{ c.id }}">{{ c.cat_name }}</a></li>
                {% endfor %}
            </ul>
        </div>
        {% if products %}
            <div class="catalog-products">
                {% for p in products %}
                    <a class="product" href="{% url 'product_view' p.id %}" style="text-decoration: none">
                        <img src="{{ p.get_photo_url }}" alt="photo">
                        <div>
                            <div> {{ p.prod_name }} </div>
                            <div><strong> {{ p.prod_price }} </strong>₽</div>
                        </div>
                    </a>
                {% endfor %}
            </div>
        {% else %}
            <div style="display: flex; flex-wrap: wrap; align-content: center; flex-grow: 1;">
                <h3 style="text-align: center; width: 100%">Упс, тут нет доступных товаров...</h3>
            </div>
        {% endif %}
    </div>

{% endblock %}