{% comment %}
Рекурсивный узел дерева категорий.
При клике раскрывается и показывает товары/комплекты текстом.
{% endcomment %}
<div class="category-node" data-category-id="{{ node.category.pk }}">
    <div class="category-header">
        {% if node.children or node.category.products.exists or node.category.kits.exists %}
            <i class="bi bi-chevron-down category-toggle"></i>
        {% else %}
            <i class="bi bi-dot text-muted"></i>
        {% endif %}
        <i class="bi bi-folder{% if node.children %}-fill text-warning{% else %}2 text-secondary{% endif %}"></i>
        <span class="flex-grow-1 category-name" data-category-id="{{ node.category.pk }}">{{ node.category.name }}</span>
        {% with products_count=node.category.products.count kits_count=node.category.kits.count %}
        {% if products_count or kits_count %}
            <span class="badge bg-light text-dark border" style="font-size: 0.7rem;">{{ products_count|add:kits_count }}</span>
        {% endif %}
        {% endwith %}
        <i class="bi bi-plus-circle category-add-child-btn" data-parent-id="{{ node.category.pk }}" title="Добавить подкатегорию"></i>
        <i class="bi bi-pencil category-rename-btn" data-category-id="{{ node.category.pk }}" title="Переименовать"></i>
    </div>

    {% if node.children %}
    <div class="category-children d-none">
        {% for child in node.children %}
            {% include 'products/catalog_tree_node.html' with node=child %}
        {% endfor %}
    </div>
    {% endif %}

    {% if node.category.products.exists or node.category.kits.exists %}
    <div class="category-items d-none">
        {% for product in node.category.products.all %}
        <div class="category-item">
            <span class="badge bg-secondary item-badge">Т</span>
            <a href="{% url 'products:product-detail' product.pk %}">{{ product.name }}</a>
        </div>
        {% endfor %}
        {% for kit in node.category.kits.all %}
        <div class="category-item">
            <span class="badge bg-info item-badge">К</span>
            <a href="{% url 'products:productkit-detail' kit.pk %}">{{ kit.name }}</a>
        </div>
        {% endfor %}
    </div>
    {% endif %}
</div>
