{% extends 'base.html' %}

{% block title %}Атрибуты товаров{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- Заголовок и кнопка создания -->
            <div class="d-flex align-items-center justify-content-between mb-3">
                <h5 class="mb-0"><i class="bi bi-sliders text-primary"></i> Атрибуты товаров</h5>
                <a href="{% url 'products:attribute-create' %}" class="btn btn-primary btn-sm">
                    <i class="bi bi-plus-lg"></i> Новый атрибут
                </a>
            </div>

            <!-- Поиск -->
            <form method="get" class="d-flex gap-2 mb-3">
                <input type="text" class="form-control form-control-sm" name="search"
                       value="{{ search_query }}" placeholder="Поиск по названию...">
                <button type="submit" class="btn btn-outline-secondary btn-sm">
                    <i class="bi bi-search"></i>
                </button>
                {% if search_query %}
                <a href="{% url 'products:attribute-list' %}" class="btn btn-outline-secondary btn-sm">
                    <i class="bi bi-x"></i>
                </a>
                {% endif %}
            </form>

            <!-- Список атрибутов -->
            {% if attributes %}
            <!-- Заголовки столбцов -->
            <div class="d-flex align-items-center py-2 px-3 bg-light border rounded-top small fw-medium text-muted">
                <div class="flex-grow-1">Название</div>
                <div class="d-flex align-items-center gap-2">
                    <span style="min-width: 70px; text-align: center;">Значения</span>
                    <span style="min-width: 60px; text-align: center;">Действия</span>
                </div>
            </div>
            <div class="list-group list-group-flush border border-top-0 rounded-bottom">
                {% for attr in attributes %}
                <div class="list-group-item d-flex align-items-center py-2 px-3">
                    <div class="flex-grow-1">
                        <a href="{% url 'products:attribute-detail' attr.pk %}" class="text-decoration-none fw-medium">
                            {{ attr.name }}
                        </a>
                        <small class="text-muted ms-2">{{ attr.slug }}</small>
                        {% if attr.description %}
                        <small class="text-muted d-block">{{ attr.description|truncatewords:10 }}</small>
                        {% endif %}
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge bg-secondary" title="Количество значений">
                            {{ attr.num_values }} знач.
                        </span>
                        <div class="btn-group btn-group-sm">
                            <a href="{% url 'products:attribute-update' attr.pk %}"
                               class="btn btn-outline-secondary btn-sm py-0 px-1" title="Изменить">
                                <i class="bi bi-pencil"></i>
                            </a>
                            <a href="{% url 'products:attribute-delete' attr.pk %}"
                               class="btn btn-outline-danger btn-sm py-0 px-1" title="Удалить">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>

            <!-- Пагинация -->
            {% if is_paginated %}
            <nav class="mt-3">
                <ul class="pagination pagination-sm justify-content-center mb-0">
                    {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}">
                            &laquo;
                        </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 %}">
                            &raquo;
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
            {% endif %}

            {% else %}
            <div class="text-center text-muted py-5">
                <i class="bi bi-sliders fs-1 opacity-25"></i>
                <p class="mb-0 mt-2">Атрибутов пока нет</p>
                <p class="small">Создайте первый атрибут, например "Длина стебля"</p>
                <a href="{% url 'products:attribute-create' %}" class="btn btn-primary btn-sm mt-2">
                    <i class="bi bi-plus-lg"></i> Создать атрибут
                </a>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}
