{% 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>
        <div>
            {% for button in action_buttons %}
                <a href="{{ button.url }}" class="btn {{ button.class }} btn-sm">
                    <i class="bi bi-{{ button.icon }} me-1"></i>{{ button.text }}
                </a>
            {% endfor %}
        </div>
    </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-6">
                    <input type="text" name="search" class="form-control form-control-sm"
                           placeholder="Поиск по названию, артикулу, описанию..." 
                           value="{{ filters.current.search }}">
                </div>
                <div class="col-md-3">
                    <select name="status" class="form-select form-select-sm">
                        <option value="">Все статусы</option>
                        <option value="active" {% if filters.current.status == 'active' %}selected{% endif %}>Активные</option>
                        <option value="archived" {% if filters.current.status == 'archived' %}selected{% endif %}>Архивные</option>
                        <option value="discontinued" {% if filters.current.status == 'discontinued' %}selected{% endif %}>Снятые</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <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: 120px;">Статус</th>
                        <th style="width: 100px;">Вариантов</th>
                        <th style="width: 120px;">Атрибутов</th>
                        <th style="width: 150px;">Дата создания</th>
                        <th style="width: 180px;">Действия</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in configurable_kits %}
                    <tr>
                        <td class="fw-semibold">
                            <a href="{% url 'products:configurableproduct-detail' item.pk %}" class="text-decoration-none">
                                {{ item.name }}
                            </a>
                        </td>
                        <td>
                            <small class="text-muted">{{ item.sku|default:"-" }}</small>
                        </td>
                        <td>
                            {% if item.status == 'active' %}
                                <span class="badge bg-success">Активный</span>
                            {% elif item.status == 'archived' %}
                                <span class="badge bg-warning">Архивный</span>
                            {% else %}
                                <span class="badge bg-secondary">Снятый</span>
                            {% endif %}
                        </td>
                        <td class="text-center">
                            <span class="badge bg-info">{{ item.options.count }}</span>
                        </td>
                        <td class="text-center">
                            <span class="badge bg-secondary">{{ item.parent_attributes.count }}</span>
                        </td>
                        <td><small class="text-muted">{{ item.created_at|date:"d.m.Y H:i" }}</small></td>
                        <td>
                            <a href="{% url 'products:configurableproduct-detail' item.pk %}"
                               class="btn btn-sm btn-outline-primary" title="Просмотр">
                                <i class="bi bi-eye"></i>
                            </a>
                            <a href="{% url 'products:configurableproduct-update' item.pk %}"
                               class="btn btn-sm btn-outline-warning" title="Редактировать">
                                <i class="bi bi-pencil"></i>
                            </a>
                            <a href="{% url 'products:configurableproduct-delete' item.pk %}"
                               class="btn btn-sm btn-outline-danger" title="Удалить">
                                <i class="bi bi-trash"></i>
                            </a>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="7" class="text-center text-muted py-4">
                            Нет вариативных товаров. <a href="{% url 'products:configurableproduct-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 filters.current.search %}&search={{ filters.current.search }}{% endif %}{% if filters.current.status %}&status={{ filters.current.status }}{% endif %}">Первая</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if filters.current.search %}&search={{ filters.current.search }}{% endif %}{% if filters.current.status %}&status={{ filters.current.status }}{% 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 filters.current.search %}&search={{ filters.current.search }}{% endif %}{% if filters.current.status %}&status={{ filters.current.status }}{% endif %}">Следующая</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if filters.current.search %}&search={{ filters.current.search }}{% endif %}{% if filters.current.status %}&status={{ filters.current.status }}{% endif %}">Последняя</a>
            </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
</div>
{% endblock %}
