{% extends 'base.html' %}

{% block title %}Список техники | Fleet Manager{% endblock %}

{% block content %}
<div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3">
    <div>
        <h2 class="mb-1">Парк техники</h2>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{% url 'index' %}" class="text-decoration-none">Дашборд</a></li>
                <li class="breadcrumb-item active" aria-current="page">Техника</li>
            </ol>
        </nav>
    </div>
    <a href="{% url 'fleet_add' %}" class="btn btn-primary">
        <i class="bi bi-plus-lg me-2"></i>Добавить технику
    </a>
</div>

<!-- Filters -->
<div class="card shadow-sm mb-4">
    <div class="card-body">
        <form method="get" class="row g-3">
            <div class="col-md-5">
                <div class="input-group">
                    <span class="input-group-text bg-white border-end-0"><i class="bi bi-search text-muted"></i></span>
                    <input type="text" name="search" class="form-control border-start-0" placeholder="Поиск по названию или номеру..." value="{{ request.GET.search }}">
                </div>
            </div>
            <div class="col-md-4">
                <select name="status" class="form-select" onchange="this.form.submit()">
                    <option value="">Все статусы</option>
                    <option value="active" {% if request.GET.status == 'active' %}selected{% endif %}>В работе</option>
                    <option value="idle" {% if request.GET.status == 'idle' %}selected{% endif %}>Простаивает</option>
                    <option value="broken" {% if request.GET.status == 'broken' %}selected{% endif %}>Сломана</option>
                    <option value="repair" {% if request.GET.status == 'repair' %}selected{% endif %}>В ремонте</option>
                    <option value="waiting_parts" {% if request.GET.status == 'waiting_parts' %}selected{% endif %}>Ждёт деталь</option>
                </select>
            </div>
            <div class="col-md-3">
                <button type="submit" class="btn btn-outline-secondary w-100">Применить</button>
            </div>
        </form>
    </div>
</div>

<div class="row g-4">
    {% for unit in units %}
    <div class="col-12 col-md-6 col-xl-4">
        <div class="card h-100 shadow-sm border-0">
            <div class="row g-0 h-100">
                <div class="col-4">
                    {% if unit.photo %}
                        <img src="{{ unit.photo.url }}" class="img-fluid rounded-start h-100 object-fit-cover" alt="{{ unit.name }}" style="min-height: 160px;">
                    {% else %}
                        <div class="bg-light rounded-start h-100 d-flex align-items-center justify-content-center border-end" style="min-height: 160px;">
                            <i class="bi bi-truck text-muted display-6"></i>
                        </div>
                    {% endif %}
                </div>
                <div class="col-8">
                    <div class="card-body d-flex flex-column h-100">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <span class="badge bg-{{ unit.get_status_color }} bg-opacity-10 text-{{ unit.get_status_color }} border border-{{ unit.get_status_color }}">
                                {{ unit.get_status_display }}
                            </span>
                            <span class="text-muted small">#{{ unit.pk }}</span>
                        </div>
                        <h5 class="card-title mb-1">
                            <a href="{{ unit.get_absolute_url }}" class="text-decoration-none text-slate-900">{{ unit.name }}</a>
                        </h5>
                        <p class="card-text text-muted small mb-3">
                            {{ unit.model_name }} | {{ unit.plate_number|default:unit.vin }}
                        </p>
                        <div class="mt-auto d-flex justify-content-between align-items-center">
                            <div class="small text-muted">
                                <i class="bi bi-calendar3 me-1"></i>{{ unit.year }}
                            </div>
                            <a href="{{ unit.get_absolute_url }}" class="btn btn-sm btn-outline-primary">Подробнее</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% empty %}
    <div class="col-12 text-center py-5">
        <div class="mb-3">
            <i class="bi bi-inbox text-muted display-1"></i>
        </div>
        <h4 class="text-muted">Техника не найдена</h4>
        <p class="text-muted">Попробуйте изменить параметры поиска или добавить новую единицу.</p>
        <a href="{% url 'fleet_add' %}" class="btn btn-primary mt-2">Добавить технику</a>
    </div>
    {% endfor %}
</div>

<!-- Pagination -->
{% if is_paginated %}
<nav class="mt-5">
    <ul class="pagination justify-content-center">
        {% if page_obj.has_previous %}
            <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">Назад</a></li>
        {% endif %}
        
        {% for i in paginator.page_range %}
            <li class="page-item {% if page_obj.number == i %}active{% endif %}">
                <a class="page-link" href="?page={{ i }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">{{ i }}</a>
            </li>
        {% endfor %}
        
        {% if page_obj.has_next %}
            <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">Вперед</a></li>
        {% endif %}
    </ul>
</nav>
{% endif %}
{% endblock %}
