{% extends 'base.html.twig' %}

{% set search_channel = 'cars' %}

{% block title %}Liste des Véhicules - RentAuto{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-1">
                        <i class="fas fa-car text-primary me-2"></i>Véhicules
                    </h1>
                    <p class="text-muted small mb-0">Gérez votre flotte de véhicules</p>
                </div>
                <a href="{{ path('app_car_new') }}" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i>Ajouter un véhicule
                </a>
            </div>
        </div>
    </div>

    <!-- Filters Card -->
    <div class="row mb-3">
        <div class="col-12">
            <div class="card shadow-sm"
                data-controller="filters"
                data-filters-channel-value="cars"
                data-action="input->filters#onInput change->filters#onInput"
                data-filters-open-value="false">
                <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
                    <h5 class="mb-0">
                        <i class="fas fa-filter text-muted me-2"></i>Filtres de recherche
                    </h5>
                    <button type="button"
                            class="btn btn-sm btn-outline-secondary"
                            data-action="filters#toggle"
                            data-filters-target="toggle"
                            aria-expanded="false"
                            aria-controls="cars-filters-content">
                        <span>Afficher/Masquer</span>
                        <i data-filters-target="chevron" class="fas fa-chevron-down ms-1"></i>
                    </button>
                </div>
                <div id="cars-filters-content" class="card-body d-none" data-filters-target="content">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label for="registrationNumber" class="form-label fw-semibold">
                                <i class="fas fa-hashtag text-muted me-1"></i>Immatriculation
                            </label>
                            <input id="registrationNumber" name="registrationNumber" type="text"
                                   placeholder="Ex: AB-123-CD" class="form-control" />
                        </div>
                        <div class="col-md-4">
                            <label for="brand" class="form-label fw-semibold">
                                <i class="fas fa-copyright text-muted me-1"></i>Marque
                            </label>
                            <input id="brand" name="brand" type="text"
                                   placeholder="Ex: Renault" class="form-control" />
                        </div>
                        <div class="col-md-4">
                            <label for="model" class="form-label fw-semibold">
                                <i class="fas fa-car-side text-muted me-1"></i>Modèle
                            </label>
                            <input id="model" name="model" type="text"
                                   placeholder="Ex: Clio" class="form-control" />
                        </div>
                        <div class="col-md-3">
                            <label for="status" class="form-label fw-semibold">
                                <i class="fas fa-circle text-muted me-1"></i>Statut
                            </label>
                            <select id="status" name="status" class="form-select">
                                <option value="">Tous les statuts</option>
                                <option value="Disponible">✓ Disponible</option>
                                <option value="Réservée">⏱ Réservée</option>
                                <option value="Louée">🚗 Louée</option>
                                <option value="Maintenance">🔧 Maintenance</option>
                                <option value="Retirée">❌ Retirée</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="fuelType" class="form-label fw-semibold">
                                <i class="fas fa-gas-pump text-muted me-1"></i>Carburant
                            </label>
                            <select id="fuelType" name="fuelType" class="form-select">
                                <option value="">Tous</option>
                                <option value="Essence">Essence</option>
                                <option value="Diesel">Diesel</option>
                                <option value="Hybride">Hybride</option>
                                <option value="Électrique">Électrique</option>
                                <option value="GPL">GPL</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="transmission" class="form-label fw-semibold">
                                <i class="fas fa-cog text-muted me-1"></i>Transmission
                            </label>
                            <select id="transmission" name="transmission" class="form-select">
                                <option value="">Toutes</option>
                                <option value="manuelle">Manuelle</option>
                                <option value="automatique">Automatique</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="category" class="form-label fw-semibold">
                                <i class="fas fa-layer-group text-muted me-1"></i>Catégorie
                            </label>
                            <select id="category" name="category" class="form-select">
                                <option value="">Toutes</option>
                                <option value="Économie">Économie</option>
                                <option value="Compacte">Compacte</option>
                                <option value="Intermédiaire">Intermédiaire</option>
                                <option value="SUV">SUV</option>
                                <option value="Van/Monospace">Van/Monospace</option>
                                <option value="Luxe">Luxe</option>
                            </select>
                        </div>
                    </div>
                    <div class="mt-4 pt-3 border-top">
                        <button type="button" class="btn btn-secondary" data-action="filters#clear">
                            <i class="fas fa-redo me-2"></i>Réinitialiser les filtres
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Results Card -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm"
                data-controller="cars-table"
                data-cars-table-endpoint-value="/api/cars"
                data-cars-table-channel-value="cars"
                data-cars-table-placeholder-value="Aucun véhicule">
                <div class="card-body p-0">
                    <!-- Table content will be loaded here by Stimulus controller -->
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}