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

{% block body %}


	<!-- ======= Intro Single ======= -->
	<section class="intro-single">
		<div class="container">
			<div class="row">
				<div class="col-md-12 col-lg-8">
					<div class="title-single-box">
						<h1 class="title-single">Our Amazing Properties</h1>
						<span class="color-text-a">Grid Properties</span>
					</div>
				</div>
				<div class="col-md-12 col-lg-4">
					<nav aria-label="breadcrumb" class="breadcrumb-box d-flex justify-content-lg-end">
						<ol class="breadcrumb">
							<li class="breadcrumb-item">
								<a href="#">Accueil</a>
							</li>
							<li class="breadcrumb-item active" aria-current="page">
								Properties Grid
							</li>
						</ol>
					</nav>
				</div>
			</div>
		</div>
	</section>
	<!-- End Intro Single-->

	<!-- ======= Property Grid ======= -->
	<section class="property-grid grid">
		<div class="container">
			<div class="row">
				<div class="col-sm-12">
					<div class="grid-option">
						<form>
							<select class="custom-select">
								<option selected>All</option>
								<option value="1">New to Old</option>
								<option value="2">For Rent</option>
								<option value="3">For Sale</option>
							</select>
						</form>
					</div>
				</div>
				{% for property in properties %}

					<div class="col-md-4">
						<div class="card-box-a card-shadow">
							<div class="img-box-a">
								{% set filepath='' %}
								{% for photo in property.photos %}
									{%  set filepath = photo.filepath %}
								{% endfor %}
								{% if (filepath == '') %}
									<img class="img-fluid" src="{{ asset('assets/img/property-0.jpg') }}">
								{% else %}
									<img class="img-fluid" src="{{ path('app_property_readphoto', {'path':filepath}) }}">
								{% endif %}
							</div>
							<div class="card-overlay">
								<div class="card-overlay-a-content">
									<div class="card-header-a">
										<h2 class="card-title-a">
											<a href="#">204 Mount
												<br/>
												{{ property.title }}</a>
										</h2>
									</div>
									<div class="card-body-a">
										<div class="price-box d-flex">
											<span class="price-a">vente | XAF
												{{ property.sold|number_format(0, '.', ' ')}}</span>
										</div>
										<a href="{{ path('app_property_show', {'id': property.id}) }}" class="link-a">Cliquez ici pour les détails
											<span class="bi bi-chevron-right"></span>
										</a>
									</div>
									<div class="card-footer-a">
										<ul class="card-info d-flex justify-content-around">
											<li>
												<h4 class="card-info-title">Surface</h4>
												<span>{{ property.surface }}m
													<sup>2</sup>
												</span>
											</li>
											<li>
												<h4 class="card-info-title">Chambres</h4>
												<span>{{ property.rooms }}</span>
											</li>
											<li>
												<h4 class="card-info-title">Salles de bains</h4>
												<span>{{ property.bathrooms }}</span>
											</li>
											<li>
												<h4 class="card-info-title">Parkings</h4>
												<span>{{ property.parking }}</span>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				{% endfor %}
			</div>
			<div class="row">
				<div class="col-sm-12">
					<nav class="pagination-a">
						<div class="pagination justify-content-end">
							{% do properties.setPageRange(3) %}
							{{ knp_pagination_render(properties, 'pagination.html.twig') }}
						</div>
					</nav>
				</div>
			</div>
		</div>
	</section>
	<!-- End Property Grid Single-->
{% endblock %}