{% extends "@Flexy/FrontBundle/Themes/Mutaweef/templates/layout.html.twig"  %}


{% block stylesheets %}
	{{parent()}}
	<style>

		.card {
			width: 380px;
			border: none;
			height: 280px;
		}

		.ratings {
			margin-right: 10px;
		}

		.ratings i {

			color: #cecece;
			font-size: 32px;
		}

		.rating-color {
			color: #fbc634 !important;
		}

		.review-count {
			font-weight: 400;
			margin-bottom: 2px;
			font-size: 24px !important;
		}

		.small-ratings i {
			color: #cecece;
		}

		.review-stat {
			font-weight: 300;
			font-size: 18px;
			margin-bottom: 2px;
		}

		.col-sm.card-hebergement {
			border: 1px solid #80808026;
			padding-top: 5px;
			/*padding-bottom: 5px;*/
			border-radius: 12px;
		}
		.image-hebergement {
			border-radius: 7px;
		}
		.small-title h6 {
			font-size: 10px;
			color: #808080a6;
			margin: 0;
		}
		span.heart {
			float: right;
		}
		hr.hr-card {
			width: 10%;
			margin-top: 10px;
			float: left;
			margin-bottom: 3px;
		}
		p.text-card-hebergement {
			color: #808080bf;
			font-size: 10px;
			float: left;
			margin-right: 6%;
			margin-bottom: 4px;
		}
		h5.title {
			font-size: 14px;
			margin-bottom: 2px;
			color: black;
		}
		h6.rate {
			margin-top: 22px;
			font-size: 10px;
			position: relative;
			right: 10%;
			color: #000000db;
			float: left;
		}
		i.fas.fa-star {
			color: gold;
		}
		.col-4.col-image-hebergement {
			padding-left: 5px;
			padding-right: 5px;
			padding-bottom: 4px;
		}

		h6.price {
			font-weight: bold;
		}
		h6.price p {
			font-weight: normal;
		}
		h6.price,
		h6.price p {
			float: right;
			color: #11707E;
		}
		.price-night {
			position: relative;
			top: 15%;
		}
		@media screen and(max-width: 760px) {
			.image-hebergement {
				height: 130px;
				border-radius: 7px;
			}
		}


		.singleAgent {
			background: white;
			padding: 15px 5px;
			box-shadow: 0 1px 8px #ddd;
			border-radius: 20px;
		}


		.filter-list-guides {
			background: white;
			border-radius: 20px;
			padding: 15px;
			min-height: 600px;
			width: 100%;
			box-shadow: 0 1px 8px #ddd;
			margin-bottom: 20px;
		}

		.filter-list-guides label {
			font-size: 11px;
			font-weight: 300;
		}
		.filter-list-guides.date label {
			color: white;
		}


		.filter-list-guides.date {
			background: rgb(3, 85, 96);
			background: linear-gradient(180deg, rgba(3,85,96,1) 0%, rgba(0,115,131,1) 100%);
			min-height: 150px;
			color: white;
		}
	</style>


{% endblock %}

{% block body %}

	<div class="container mt-5" style="max-width:960px;">
		<div class="row">
			<div class="col-4">
        
				<div class="filter-list-guides date">
        {{form_start(formFilter)}}
        
					<h6>Date Umrah</h6>
					{{form_row(formFilter.dateUmrah)}}

				</div>



				  <div class="filter-list-guides">

          
            {{form_end(formFilter)}}
            {{form_rest(formFilter)}}
						

          <button type="submit" class="btn">Filter</button>
					</div>

					
          
				</div>
        

				
			

			<div class="col-8">
				{% for singleAgent in agents %}

					<a href="{{path("singleAgent",{id:singleAgent.id})}}" >
					<div class="row singleAgent mb-2">
						<div class="col-4"><img class="img-fluid image-hebergement" src="/uploads/{{settings.get.assetFolderName}}/{{asset(singleAgent.photoIdentity)}}"/></div>
						<div class="col-5">
							<h6>{{singleAgent.firstName}}
								{{singleAgent.lastName}}</h6>

							<small>Particulier
							</small>
							<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition
							</p>
						</div>
						<div class="col-3">Prochaine disponibilité
							<span class="heart">
								<i class="far fa-heart"></i>
							</span>
							<span>
								<b>14h00</b>
							</span>
							<hr class="hr-card">
							<h6 class="rate">5.0
								<i class="fas fa-star"></i>
							</h6>

						</div>

					</div>
					</a>
				{% endfor %}
			</div>


		</div>
	</div>

{% endblock body %}