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

{% block title %}Статусы заказов{% endblock %}

{% block content %}
<style>
    .compact-table {
        font-size: 0.85rem;
    }
    .compact-table th,
    .compact-table td {
        padding: 0.4rem 0.5rem;
        vertical-align: middle;
    }
    .compact-table .btn-sm {
        padding: 0.2rem 0.5rem;
        font-size: 0.75rem;
        min-width: 32px;
    }
    .compact-table .badge {
        font-size: 0.75rem;
        padding: 0.35rem 0.6rem;
        white-space: nowrap;
    }
    .compact-table code {
        font-size: 0.75rem;
    }
</style>
<div class="container-fluid mt-3">
    <div class="d-flex justify-content-between align-items-center mb-2">
        <div>
            <h1 class="h5 mb-0">Статусы</h1>
            <div class="text-muted" style="font-size: 0.75rem;">{{ statuses|length }} статусов</div>
        </div>
        <a href="{% url 'orders:status_create' %}" class="btn btn-primary btn-sm">
            <i class="bi bi-plus-lg"></i> Создать
        </a>
    </div>

    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endif %}

    <div class="table-responsive">
        <table class="table table-hover table-sm compact-table">
            <thead class="table-light">
                <tr>
                    <th style="width: 50px;">№</th>
                    <th style="width: 30px;"></th>
                    <th>Название</th>
                    <th class="d-none d-md-table-cell" style="width: 100px;">Код</th>
                    <th class="d-none d-lg-table-cell" style="width: 100px;">Тип</th>
                    <th class="d-none d-md-table-cell" style="width: 130px;">Итог</th>
                    <th class="d-none d-xl-table-cell">Описание</th>
                    <th style="width: 70px;">Заказы</th>
                    <th style="width: 200px;">Действия</th>
                </tr>
            </thead>
            <tbody>
                {% for status in statuses %}
                    <tr>
                        <td class="text-muted">{{ status.order }}</td>
                        <td>
                            <span class="d-inline-block rounded-circle" style="width:14px;height:14px;background-color:{{ status.color }};border:1px solid rgba(0,0,0,.2);"></span>
                        </td>
                        <td>
                            <span class="fw-semibold">{{ status.name }}</span>
                            {% if status.label %}
                                <span class="text-muted ms-1" style="font-size:0.75rem;">({{ status.label }})</span>
                            {% endif %}
                        </td>
                        <td class="d-none d-md-table-cell"><code>{{ status.code }}</code></td>
                        <td class="d-none d-lg-table-cell">
                            {% if status.is_system %}
                                <span class="badge bg-info">Системный</span>
                            {% else %}
                                <span class="badge bg-success">Пользовательский</span>
                            {% endif %}
                        </td>
                        <td class="d-none d-md-table-cell">
                            {% if status.is_positive_end %}
                                <span class="badge bg-success">✓ Положительный</span>
                            {% elif status.is_negative_end %}
                                <span class="badge bg-danger">✗ Отрицательный</span>
                            {% else %}
                                <span class="badge bg-secondary">Промежуточный</span>
                            {% endif %}
                        </td>
                        <td class="d-none d-xl-table-cell" style="font-size:0.75rem;">
                            {% if status.description %}
                                {{ status.description|truncatechars:60 }}
                            {% else %}
                                <span class="text-muted">—</span>
                            {% endif %}
                        </td>
                        <td class="text-center">
                            {% if status.orders_count > 0 %}
                                <span class="badge bg-light text-dark">{{ status.orders_count }}</span>
                            {% else %}
                                <span class="text-muted">0</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="d-flex gap-1">
                                <a href="{% url 'orders:status_edit' status.pk %}" class="btn btn-outline-primary btn-sm" title="Редактировать">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                {% if not status.is_system and status.orders_count == 0 %}
                                    <a href="{% url 'orders:status_delete' status.pk %}" class="btn btn-outline-danger btn-sm" title="Удалить">
                                        <i class="bi bi-trash"></i>
                                    </a>
                                {% else %}
                                    <button class="btn btn-outline-secondary btn-sm" disabled title="{% if status.is_system %}Системный статус{% else %}В статусе есть заказы{% endif %}">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="9" class="text-center text-muted py-3">
                            <i class="bi bi-inbox me-2"></i> Статусы не найдены
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}
