{% 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_root_categories %}
            <div class="left-menu__category">
                {% for category in product_root_categories %}
                    <a class="left-menu__category-item"
                       href="{% url "products: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>
                {% endfor %}
            </div>
        {% endif %}
        {% if 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 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_root_categories %}
                <div class="content__category">
                    <ul class="content__category-list">
                        {% for category in product_root_categories %}
                            <li>
                                <a href="{% url "products: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 %}
                            <li><a href="#">Microsoft</a></li>
                        {% endfor %}
                    </ul>
                </div>
            {% endif %}
            {% include 'components/breadcrumbs.html' %}
            {% block right_common_content %}
            {% endblock right_common_content %}

        </div>
    </div>
{% endblock content %}