{% extends 'base.html' %}
{% load static %}
{% load crispy_forms_tags %}

{% block content %}
    <div class="col-4 left-menu">
        {% if left_product_search_form %}
            <div class="left-menu__search">
                {% crispy left_product_search_form %}
            </div>
        {% endif %}

        {% block extra_left_menu_items %}
        {% endblock extra_left_menu_items %}

        {% if product_categories %}
            <div class="left-menu__category">
                {% for category in product_categories %}
                    <a class="left-menu__category-item"
                       href="{% url "products:product_list" category_slug=category.slug %}">
                                <span class="category-item__image">
                                    <img src="{% static category.image.url %}" alt="{{ category.name }}">
                                </span>
                        <span class="category-item__name">{{ category.name }}</span>
                    </a>
                {% endfor %}
            </div>
        {% endif %}
        {% if left_contact_us_form %}
            <div class="left-menu__contact">
                <div class="left-menu__title">
                    Не нашли нужную программу или разработчика?
                    Заполните форму и с Вами свяжется наш специалист.
                </div>
                {% if contact_us_form_message %}
                    <div class="text-{% if "success" in contact_us_form_message.tags %}success{% elif "error" in contact_us_form_message.tags %}danger{% endif %}">
                        {{ contact_us_form_message }}
                    </div>
                {% endif %}
                {% crispy left_contact_us_form %}
            </div>
        {% endif %}
    </div>
    <div class="col-lg-8 col-md-12">
        <div class="content">
            <div class="content__menu">
                <div class="row">
                    <div class="col-5 d-flex justify-content-start align-items-center">
                        <button id="content__category-btn" class="content__menu-btn">Разделы сайта</button>
                    </div>
                    {% if content_product_search_form %}
                        <div class="col-7 justify-content-center">
                            <div class="content__search">
                                {% crispy content_product_search_form %}
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
            {% if product_categories %}
                <div class="content__category">
                    <ul class="content__category-list">
                        {% if the_product_category and the_product_category.parent %}
                            <li>
                                <a href="{% url 'products:product_list' category_slug=the_product_category.parent.slug %}">
                                    {{ the_product_category.parent.name }}
                                </a>
                            </li>
                        {% endif %}
                        {% for category in product_root_categories %}
                            <li>
                                <a href="{% url "products:product_category" category_slug=category.slug %}">
                                    <span class="category-item__image">
                                        <img src="{% static category.img %}" alt="{{ category.alt }}">
                                    </span>
                                    <span class="category-item__name">{{ category.name }}</span>
                                </a>
                            </li>
                        {% empty %}
                        {% endfor %}
                    </ul>
                </div>
            {% endif %}
            {% include 'components/breadcrumbs.html' %}
            {% block right_common_content %}
            {% endblock right_common_content %}
            {% if content_contact_us_form %}
                <div class="contact">
                    <div class="content__title">
                        Не нашли нужную программу или разработчика?
                        Заполните форму и с Вами свяжется наш специалист.
                    </div>
                    {% if contact_us_form_message %}
                        <div class="text-{% if "success" in contact_us_form_message.tags %}success{% elif "error" in contact_us_form_message.tags %}danger{% endif %}">
                            {{ contact_us_form_message }}
                        </div>
                    {% endif %}
                    {% crispy content_contact_us_form %}
                </div>
            {% endif %}
        </div>
    </div>
{% endblock content %}