{% extends 'base.html' %}

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

{% block content %}
<div class="container-fluid px-4 py-3" style="max-width: 1000px;">
    <nav aria-label="breadcrumb" class="mb-3">
        <ol class="breadcrumb breadcrumb-sm mb-0">
            <li class="breadcrumb-item"><a href="{% url 'products:variantgroup-list' %}">Группы вариантов</a></li>
            <li class="breadcrumb-item active">{{ variant_group.name }}</li>
        </ol>
    </nav>

    <div class="row g-3">
        <!-- Информация -->
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-3">
                    <h5 class="card-title">{{ variant_group.name }}</h5>
                    <p class="card-text text-muted small">{{ variant_group.description }}</p>
                    <hr>

                    <!-- Информация о наличии -->
                    <div class="mb-3">
                        <small class="text-muted d-block mb-2"><strong>Статус:</strong></small>
                        <div>
                            {% if variant_group.in_stock %}
                                <span class="badge bg-success"><i class="bi bi-check-circle"></i> В наличии</span>
                            {% else %}
                                <span class="badge bg-danger"><i class="bi bi-x-circle"></i> Нет в наличии</span>
                            {% endif %}
                        </div>
                    </div>

                    <!-- Цена варианта -->
                    <div class="mb-3">
                        <small class="text-muted d-block mb-2"><strong>Цена:</strong></small>
                        <div>
                            {% if variant_group.price %}
                                <span class="h5 text-success">{{ variant_group.price }} руб.</span>
                            {% else %}
                                <span class="text-muted">-</span>
                            {% endif %}
                        </div>
                    </div>

                    <hr>
                    <small class="text-muted d-block">
                        Создано: {{ variant_group.created_at|date:"d.m.Y H:i" }}<br>
                        Обновлено: {{ variant_group.updated_at|date:"d.m.Y H:i" }}
                    </small>
                </div>
            </div>
        </div>

        <!-- Товары -->
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-3">
                    <h5 class="card-title mb-3">Товары в группе ({{ items.count }})</h5>

                    {% if items %}
                    <div class="table-responsive">
                        <table class="table table-sm table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 50px;">№</th>
                                    <th>Товар</th>
                                    <th style="width: 120px;">Артикул</th>
                                    <th style="width: 100px;">Цена</th>
                                    <th style="width: 100px;">В наличии</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in items %}
                                <tr>
                                    <td class="fw-bold">{{ item.priority }}</td>
                                    <td>{{ item.product.name }}</td>
                                    <td><small class="text-muted">{{ item.product.sku }}</small></td>
                                    <td><strong>{{ item.product.actual_price }} руб.</strong></td>
                                    <td>
                                        {% if item.product.in_stock %}
                                            <span class="badge bg-success"><i class="bi bi-check-circle"></i> Да</span>
                                        {% else %}
                                            <span class="badge bg-danger"><i class="bi bi-x-circle"></i> Нет</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <p class="text-muted text-center py-4">Нет товаров в группе</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Кнопки действий -->
    <div class="mt-4 d-flex gap-2 justify-content-start">
        <a href="{% url 'products:variantgroup-update' variant_group.pk %}" class="btn btn-warning btn-sm">
            <i class="bi bi-pencil me-1"></i>Редактировать
        </a>
        <a href="{% url 'products:variantgroup-delete' variant_group.pk %}" class="btn btn-danger btn-sm">
            <i class="bi bi-trash me-1"></i>Удалить
        </a>
        <a href="{% url 'products:variantgroup-list' %}" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-arrow-left me-1"></i>Назад
        </a>
    </div>
</div>
{% endblock %}
