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

{% block title %}{{ voiture.marque.nom }} {{ voiture.modele }}{% endblock %}

{% block body %}
    <div class="container my-5">
        <a href="{{ path('app_vente') }}" class="btn btn-secondary mb-3">← Retour à la liste</a>

        <div class="row">
            <div class="col-lg-6 mb-4">
                {# Image de couverture #}
                <img src="{{ voiture.urlImage }}"
                     class="img-fluid rounded shadow mb-4 w-100"
                     alt="{{ voiture.marque.nom }} {{ voiture.modele }}"
                     style="max-height: 400px; object-fit: cover;">

                {# Galerie d'images #}
                {% if voiture.images|length > 0 %}
                    <h4 class="mb-3">Galerie photos</h4>
                    <div class="row g-2">
                        {% for image in voiture.images %}
                            <div class="col-4">
                                <img src="{{ image.nomFichier }}"
                                     class="img-fluid rounded shadow-sm"
                                     alt="Photo {{ loop.index }}"
                                     style="height: 120px; width: 100%; object-fit: cover;">
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>

            <div class="col-lg-6">
                <h1 class="mb-2">{{ voiture.marque.nom }} {{ voiture.modele }}</h1>
                <h2 class="text-primary mb-4">{{ voiture.prix|number_format(2, ',', ' ') }} €</h2>

                <div class="card shadow-sm mb-4">
                    <div class="card-body">
                        <h5 class="card-title">Caractéristiques</h5>
                        <table class="table table-striped">
                            <tbody>
                            <tr>
                                <th style="width: 50%;">Kilométrage</th>
                                <td>{{ voiture.kilometrage|number_format(0, ',', ' ') }} km</td>
                            </tr>
                            {% if voiture.anneeCirculation %}
                                <tr>
                                    <th>Année</th>
                                    <td>{{ voiture.anneeCirculation }}</td>
                                </tr>
                            {% endif %}
                            {% if voiture.carburant %}
                                <tr>
                                    <th>Carburant</th>
                                    <td>{{ voiture.carburant }}</td>
                                </tr>
                            {% endif %}
                            {% if voiture.transmission %}
                                <tr>
                                    <th>Transmission</th>
                                    <td>{{ voiture.transmission }}</td>
                                </tr>
                            {% endif %}
                            {% if voiture.puissance %}
                                <tr>
                                    <th>Puissance</th>
                                    <td>{{ voiture.puissance }} CV</td>
                                </tr>
                            {% endif %}
                            {% if voiture.cylindree %}
                                <tr>
                                    <th>Cylindrée</th>
                                    <td>{{ voiture.cylindree }}</td>
                                </tr>
                            {% endif %}
                            {% if voiture.nombreProprietaires %}
                                <tr>
                                    <th>Propriétaires</th>
                                    <td>{{ voiture.nombreProprietaires }}</td>
                                </tr>
                            {% endif %}
                            </tbody>
                        </table>
                    </div>
                </div>

                {% if voiture.description %}
                    <div class="card shadow-sm mb-4">
                        <div class="card-body">
                            <h5 class="card-title">Description</h5>
                            <p class="card-text">{{ voiture.description }}</p>
                        </div>
                    </div>
                {% endif %}

                {% if voiture.options %}
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <h5 class="card-title">Options</h5>
                            <p class="card-text">{{ voiture.options }}</p>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}