{% extends 'base.html' %}

{% block title %}{{ category.name }}{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="row">
        <div class="col-md-8">
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3>{{ category.name }}</h3>
                    <div>
                        {% if category.is_active %}
                            <span class="badge bg-success">Активна</span>
                        {% else %}
                            <span class="badge bg-secondary">Неактивна</span>
                        {% endif %}
                    </div>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-4"><strong>Артикул:</strong></div>
                        <div class="col-md-8"><code>{{ category.sku|default:"—" }}</code></div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-4"><strong>URL-идентификатор:</strong></div>
                        <div class="col-md-8"><code>{{ category.slug }}</code></div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-4"><strong>Родительская категория:</strong></div>
                        <div class="col-md-8">
                            {% if category.parent %}
                                <a href="{% url 'products:category-detail' category.parent.pk %}">{{ category.parent.name }}</a>
                            {% else %}
                                <span class="text-muted">Корневая категория</span>
                            {% endif %}
                        </div>
                    </div>

                    <!-- Фотографии -->
                    {% if category_photos %}
                    <div class="mt-4">
                        <h5>Фотографии ({{ photos_count }})</h5>
                        <div class="row g-2">
                            {% for photo in category_photos %}
                            <div class="col-md-3 col-sm-4 col-6">
                                <div class="card">
                                    <!-- Миниатюра 200x200 для отображения в сетке -->
                                    <img src="{{ photo.get_thumbnail_url }}" class="card-img-top" alt="Фото категории" style="height: 150px; object-fit: cover;">
                                    {% if photo.order == 0 %}
                                    <div class="card-body p-1 text-center">
                                        <span class="badge bg-success">Главное</span>
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}

                    <!-- Подкатегории -->
                    {% if children_categories %}
                    <div class="mt-4">
                        <h5>Подкатегории ({{ children_categories.count }})</h5>
                        <ul class="list-group">
                            {% for child in children_categories %}
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <a href="{% url 'products:category-detail' child.pk %}">{{ child.name }}</a>
                                <span class="badge bg-primary">{{ child.sku|default:"—" }}</span>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}

                    <!-- Товары в категории -->
                    {% if products %}
                    <div class="mt-4">
                        <h5>Товары в категории ({{ products_count }})</h5>
                        <div class="list-group">
                            {% for product in products %}
                            <a href="{% url 'products:product-detail' product.pk %}" class="list-group-item list-group-item-action">
                                {{ product.name }} <span class="text-muted">({{ product.sku }})</span>
                            </a>
                            {% endfor %}
                            {% if products_count > 20 %}
                            <div class="list-group-item text-center text-muted">
                                ... и еще {{ products_count|add:"-20" }} товар(ов)
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>

            <div class="d-flex gap-2">
                <a href="{% url 'products:category-list' %}" class="btn btn-secondary">Назад к списку</a>
                <a href="{% url 'products:category-update' category.pk %}" class="btn btn-primary">Редактировать</a>
                <a href="{% url 'products:category-delete' category.pk %}" class="btn btn-danger">Удалить</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}
