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

{% block title %}Группы вариантов{% endblock %}

{% block content %}
<div class="container-fluid px-4 py-3">
    <nav aria-label="breadcrumb" class="mb-3">
        <ol class="breadcrumb breadcrumb-sm mb-0">
            <li class="breadcrumb-item active">Группы вариантов</li>
        </ol>
    </nav>

    <!-- Кнопка создания -->
    <div class="mb-3 d-flex justify-content-between align-items-center">
        <h4 class="mb-0">Группы вариантов</h4>
        <a href="{% url 'products:variantgroup-create' %}" class="btn btn-success btn-sm">
            <i class="bi bi-plus-circle me-1"></i>Создать группу
        </a>
    </div>

    <!-- Поиск -->
    <div class="card border-0 shadow-sm mb-3">
        <div class="card-body p-3">
            <form method="get" class="row g-2">
                <div class="col-md-8">
                    <input type="text" name="search" class="form-control form-control-sm"
                           placeholder="Поиск по названию..." value="{{ search_query }}">
                </div>
                <div class="col-md-4">
                    <button type="submit" class="btn btn-outline-primary btn-sm w-100">
                        <i class="bi bi-search"></i> Поиск
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Таблица -->
    <div class="card border-0 shadow-sm">
        <div class="table-responsive">
            <table class="table table-hover table-sm mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Название</th>
                        <th>Описание</th>
                        <th style="width: 100px;">Товаров</th>
                        <th style="width: 100px;">В наличии</th>
                        <th style="width: 100px;">Цена</th>
                        <th style="width: 150px;">Дата обновления</th>
                        <th style="width: 150px;">Действия</th>
                    </tr>
                </thead>
                <tbody>
                    {% for group in variant_groups %}
                    <tr>
                        <td class="fw-semibold">{{ group.name }}</td>
                        <td>
                            <small class="text-muted">
                                {{ group.description|truncatewords:10 }}
                            </small>
                        </td>
                        <td class="text-center">
                            <span class="badge bg-info">{{ group.items_count }}</span>
                        </td>
                        <td class="text-center">
                            {% if 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 %}
                        </td>
                        <td class="text-center">
                            {% if group.price %}
                                <strong>{{ group.price }}</strong> руб.
                            {% else %}
                                <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td><small class="text-muted">{{ group.updated_at|date:"d.m.Y H:i" }}</small></td>
                        <td>
                            <a href="{% url 'products:variantgroup-detail' group.pk %}"
                               class="btn btn-sm btn-outline-primary" title="Просмотр">
                                <i class="bi bi-eye"></i>
                            </a>
                            <a href="{% url 'products:variantgroup-update' group.pk %}"
                               class="btn btn-sm btn-outline-warning" title="Редактировать">
                                <i class="bi bi-pencil"></i>
                            </a>
                            <a href="{% url 'products:variantgroup-delete' group.pk %}"
                               class="btn btn-sm btn-outline-danger" title="Удалить">
                                <i class="bi bi-trash"></i>
                            </a>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="5" class="text-center text-muted py-4">
                            Нет групп вариантов. <a href="{% url 'products:variantgroup-create' %}">Создать первую</a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Пагинация -->
    {% if is_paginated %}
    <nav class="mt-4" aria-label="Pagination">
        <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page=1{% if search_query %}&search={{ search_query }}{% endif %}">Первая</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}">Предыдущая</a>
            </li>
            {% endif %}

            <li class="page-item active">
                <span class="page-link">{{ page_obj.number }} из {{ page_obj.paginator.num_pages }}</span>
            </li>

            {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}">Следующая</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if search_query %}&search={{ search_query }}{% endif %}">Последняя</a>
            </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
</div>
{% endblock %}
