{% extends 'layouts/base.html.twig' %}
{% block body %}


	<!-- ======= Property Single ======= -->
	<section class="property-single nav-arrow-b">
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-lg-8">
					<div id="property-single-carousel" class="swiper">
						<div class="swiper-wrapper">
							{% for photo in property.photos %}
								<div class="carousel-item-b swiper-slide">
									<img class="img-fluid" src="{{ path('app_property_readphoto', {'path' : photo.filepath }) }}">
								</div>
							{% endfor %}
						</div>
					</div>
					<div class="property-single-carousel-pagination carousel-pagination"></div>
				</div>
			</div>

			<div class="row">
				<div class="col-sm-12">

					<div class="row justify-content-between">
						<div class="col-md-5 col-lg-4">
							<div class="property-price d-flex justify-content-center foo">
								<div class="card-header-c d-flex">
									<div class="card-box-ico">
										<span class="bi bi-cash">F</span>
									</div>
									<div class="card-title-c align-self-center">
										<h5 class="title-c">{{ property.sold|number_format(0, '.', ' ') }}</h5>
									</div>
								</div>
							</div>
							<div class="property-summary">
								<div class="row">
									<div class="col-sm-12">
										<div class="title-box-d section-t4">
											<h3 class="title-d">Récapitulatif</h3>
										</div>
									</div>
								</div>
								<div class="summary-list">
									<ul class="list">
										<li class="d-flex justify-content-between">
											<strong>Bien n° :</strong>
											<span>{{ property.id }}</span>
										</li>
										<li class="d-flex justify-content-between">
											<strong>Localisation :</strong>
											<span>{{ cities[property.city] }}</span>
										</li>
										<li class="d-flex justify-content-between">
											<strong>Type de bien :</strong>
											<span>
												{{ types[property.type] }}
											</span>
										</li>
										<li class="d-flex justify-content-between">
											<strong>Status :</strong>
											<span>{{ statuses[property.status] }}</span>
										</li>
										<li class="d-flex justify-content-between">
											<strong>Surface :</strong>
											<span>{{ property.surface }}&nbsp;m<sup>2</sup>
											</span>
										</li>
										<li class="d-flex justify-content-between">
											<strong>Chambres :</strong>
											<span>{{ property.rooms }}</span>
										</li>
										<li class="d-flex justify-content-between">
											<strong>Salles de bain :</strong>
											<span>{{ property.bathrooms }}</span>
										</li>
										<li class="d-flex justify-content-between">
											<strong>Places de parking :</strong>
											<span>{{ property.parking }}</span>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="col-md-7 col-lg-7 section-md-t3">
							<div class="row">
								<div class="col-sm-12">
									<div class="title-box-d">
										<h3 class="title-d">
											Description
											<a class="btn btn-light fs-3 bi bi-pencil" href="{{ path('app_property_edit',{'id':property.id} ) }}"></a>
										</h3>
									</div>
								</div>
							</div>
							<div class="property-description">
								<p class="description color-text-a">
									{{ property.description }}
								</p>
							</div>
							<div class="row section-t3">
								<div class="col-sm-12">
									<div class="title-box-d">
										<h3 class="title-d">Prestations</h3>
									</div>
								</div>
							</div>
							<div class="amenities-list color-text-a">
								<ul class="list-a no-margin">
									{% for key, value in property.prestation %}
										<li>{{ value }}</li>
									{% endfor %}
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-10 offset-md-1">
					<ul class="nav nav-pills-a nav-pills mb-3 section-t3" id="pills-tab" role="tablist">
						<li class="nav-item">
							<a class="nav-link active" id="pills-video-tab" data-bs-toggle="pill" href="#pills-video" role="tab" aria-controls="pills-video" aria-selected="true">Vidéo</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" id="pills-plans-tab" data-bs-toggle="pill" href="#pills-plans" role="tab" aria-controls="pills-plans" aria-selected="false">Plan</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" id="pills-map-tab" data-bs-toggle="pill" href="#pills-map" role="tab" aria-controls="pills-map" aria-selected="false">Carte</a>
						</li>
					</ul>
					<div class="tab-content" id="pills-tabContent">
						{% if property.video %}
							<div class="tab-pane fade show active" id="pills-video" role="tabpanel" aria-labelledby="pills-video-tab">
								<iframe src="{{ property.video }}" width="100%" height="460" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
							</div>
						{% endif %}
						{% if property.plan %}
							<div class="tab-pane fade" id="pills-plans" role="tabpanel" aria-labelledby="pills-plans-tab">
								<img src="{{ asset('assets/img/' ~ property.plan) }}" alt="" class="img-fluid">
							</div>
						{% endif %}
						{% if property.carte %}
							<div class="tab-pane fade" id="pills-map" role="tabpanel" aria-labelledby="pills-map-tab">
								<iframe src="{{ property.carte }}" width="100%" height="460" frameborder="0" style="border:0" allowfullscreen></iframe>
							</div>
						{% endif %}
					</div>
				</div>
				<div class="col-md-12">
					<div class="row section-t3">
						<div class="col-sm-12">
							<div class="title-box-d">
								<h3 class="title-d">Contact Agent</h3>
							</div>
						</div>
					</div>
					<div class="row">
						{% if property.agence %}
							<div class="col-md-6 col-lg-4">
								<img src="{{ path('app_property_readphoto', {'path' : property.agence.photo }) }}" alt="" class="img-fluid">
							</div>
						{% else %}
							<div class="col-md-6 col-lg-4">
								<img src="{{ path('app_property_readphoto', {'path' : '/var/files/agence/agent-1.jpg' }) }}" alt="" class="img-fluid">
							</div>
						{% endif %}
						<div class="col-md-6 col-lg-4">
							{% if property.agence %}
								<div class="property-agent">
									<h4 class="title-agent">
										{{ property.agence.name }}
									</h4>
									<p class="color-text-a">
										{{ property.agence.message }}
									</p>
									<ul class="list-unstyled">
										<li class="d-flex justify-content-between">
											<strong>Phone :</strong>
											<span class="color-text-a">{{ property.agence.phone }}</span>
										</li>
										<li class="d-flex justify-content-between">
											<strong>Mobile :</strong>
											<span class="color-text-a">{{ property.agence.mobile }}</span>
										</li>
										<li class="d-flex justify-content-between">
											<strong>Email :</strong>
											<span class="color-text-a">{{ property.agence.email }}</span>
										</li>
									</ul>
									<div class="socials-a">
										<ul class="list-inline">
											<li class="list-inline-item">
												<a href="{{ property.agence.facebook }}">
													<i class="bi bi-facebook fs-2" aria-hidden="true"></i>
												</a>
											</li>
										</ul>
									</div>
								</div>
							{% else %}
								<div class="property-agent">
									<h4 class="title-agent">
										Kerenes Immo
									</h4>
									<p class="color-text-a">
										XXXXXXXXXXXX
									</p>
									<ul class="list-unstyled">
										<li class="d-flex justify-content-between">
											<strong>Phone :</strong>
											<span class="color-text-a">04 474 7447</span>
										</li>
										<li class="d-flex justify-content-between">
											<strong>Mobile :</strong>
											<span class="color-text-a"></span>
										</li>
										<li class="d-flex justify-content-between">
											<strong>Email :</strong>
											<span class="color-text-a">contact@kerenes-digital.com</span>
										</li>
									</ul>
									<div class="socials-a">
										<ul class="list-inline">
											<li class="list-inline-item">
												<a href="#">
													<i class="bi bi-facebook fs-2" aria-hidden="true"></i>
												</a>
											</li>
										</ul>
									</div>
								</div>

							{% endif %}
						</div>
						<div class="col-md-12 col-lg-4">
							<div class="property-contact">
								{{ form_start(form) }}
								<div class="row">
									<div class="col-md-12 mb-1">
										<div class="form-group">
											{{ form_widget(form.name) }}
										</div>
									</div>
									<div class="col-md-12 mb-1">
										<div class="form-group">
											{{ form_widget(form.email) }}
										</div>
									</div>
									<div class="col-md-12 mb-1">
										<div class="form-group">
											{{ form_widget(form.message) }}
										</div>
									</div>
									<div class="col-md-12 mt-3">
										<button type="submit" class="btn btn-a">Envoyer</button>
									</div>
									<div class="col-md-12 mt-3">
										<input type="hidden" name="property" value="{{ property.id }}"/>
									</div>
								</div>
								{{form_end(form) }}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- End Property Single-->

{% endblock %}