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

{% block title %}Détails de
	{{ vehicles.brand }}
{% endblock %}

{% block body %}
	<main class="container">
		<section class="row">
			<div class="col-12">
				<h1 class="text-center">{{ vehicles.brand }}</h1>
			</div>
			<div class="col-lg-4 col-md-6 col-sm-12">
				<div id="carouselExampleIndicators" class="carousel slide">
					<div class="carousel-indicators">
						{% for image in vehicles.images %}
							<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{ loop.index0 }}" {% if loop.first %} class="active" aria-current="true" {% endif %} aria-label="Slide {{ loop.index }}"></button>
						{% endfor %}
					</div>
					<div class="carousel-inner">
						{% set defaultImageUsed = false %}
						{% for image in vehicles.images %}
							<div class="carousel-item {% if loop.first %}active{% endif %} text-center">
								<img  src="{{ asset('assets/uploads/vehicle/mini/300x300-' ~ image.name ) }}" alt="{{ vehicles.brand }}" class="img-fluid rounded" id="detailCarousel">
							</div>
							{% set defaultImageUsed = true %}
						{% endfor %}
						{% if not defaultImageUsed and vehicles.image %}
							<div class="carousel-item active">
								<img  src="{{ vehicles.image }}" alt="{{ vehicles.brand }}"  class="img-fluid rounded"  id="detailCarousel">
							</div>
						{% elseif not defaultImageUsed %}
							<div class="carousel-item active">
								<img  src="{{ asset('assets/image/Garage.png') }}"  alt="Image par défaut" class="img-fluid rounded"  id="detailCarousel">
							</div>
						{% endif %}
					</div>
					<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
						<span class="carousel-control-prev-icon" aria-hidden="true"></span>
						<span class="visually-hidden">Previous</span>
					</button>
					<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
						<span class="carousel-control-next-icon" aria-hidden="true"></span>
						<span class="visually-hidden">Next</span>
					</button>
				</div>

			</div>
			<div class="col-lg-8 col-md-6 col-sm-12 text-center">
				<p>
					<h4>Marque :</h4>
					{{ vehicles.brand }}
				</p>
				<p>
					<h4>Description :</h4>
					{{  vehicles.description }}
				</p>
				<p>
					<h4>Catégorie :</h4>
					{{ vehicles.categorie.name }}
				</p>
				<p>
					<h4>Année d'immatriculation :</h4>
					{{ vehicles.year.format('d-m-Y') }}
				</p>
				<p>
					<h4>Nombre de kilomètres :</h4>
					{{ vehicles.kilometer }}
					km
				</p>
				<p>
					<h4>Prix :</h4>
					{{ vehicles.price }}
					€
				</p>

				</div>
			
			<div class="text-center">
				<a href="{{ path('app_contact_vehicle', {'id': vehicles.id}) }}" class="btn btn2 mt-3">Contact</a>

				<a href="{{ path('app_vehicle_index')}}" class="btn btn3 mt-3">Retour</a>
		</div>
		</section>
	</main>
	{{ include('_partials/_footer.html.twig', { 'business_hours': business_hours }) }}
{% endblock %}