{% 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;
			}
		}


		.singleProduct {
			background: white;
			padding: 12px 0px;
			box-shadow: 0 1px 8px #ddd;
			border-radius: 8px;
            margin:14px 5px;
		}


        .singleProduct p {


            line-height: 15px;
            font-size: 12px;
            letter-spacing: 0.6px;
            margin-top:5px;

        }

         .singleProduct  .price{
            color:#076C7A;
         }

         .singleProduct img{
            border-radius:5px;
         }

         .singleProduct .rating svg{
            color:#ffba00;
            margin-left:2px;

         }


		.filter-hosts {
			border-radius: 20px;
			padding: 15px;
			width: 100%;
			margin-bottom: 80px;
		}

        .filter-hosts .btn{
            margin:0;
            padding:0 7px 0 15px;
            background:white;
            box-shadow:none;

        }

                .filter-hosts .btn svg{
        padding: 7px;
        border-radius: 20px;
        font-size: 10px;
        font-weight: bold;
            background: #076C7A;
            margin: 4px 0 0;

        }



		.filter-hosts label {
			font-size: 11px;
			font-weight: 300;
		}
		.filter-hosts.form label {
			color: white;
		}


		.filter-hosts.form {
			
            border-radius:50px;
            max-width:600px;
            margin:auto;
            
		}
        
.filter-hosts.form .input-group {
    box-shadow: 0 4px 11px #cccccc90;
    padding: 0;
    border-radius: 30px;
}
.filter-hosts.form .input-group input,.filter-hosts.form .input-group select{border:none;}
        .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control, .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select, .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}


.extra-filters {
    max-width:960px;
    margin:auto;
}
.extra-filters .btn{
    display:inline-block;
    background:white;
    color:#076C7A;
}

.extra-filters select{
   border-radius: 30px;
    box-shadow: 0 2px 8px #cccccc90;
    display: inline-block;
    font-weight: 200;
    letter-spacing: 0px;
    font-size: 10px!important;
    padding: 9px 0 9px 10px;
}

	</style>


{% endblock %}

{% block body %}

{% set thumbnailConfig = {
    "thumbnail": {
        "size": [260, 200],
        "mode": "outbound",

         },
    "background":{
            "color":"#000000",
            "size": [260, 200],
            "position": "center"
    }     
    } %}

	<div class="container mt-5">
		<div class="row">
			<div class="col-12 text-center">
                
				<div class="filter-hosts form">



                    {{form_start(formFilter)}}
                    <div class="row" >
                        <div class="input-group mb-2">
                        {% for singleField in formFilter.children %}
                            
                                {{ form_widget(singleField) }}
                            
                        {% endfor %}
                        <button type="submit" class="btn"><i class="fa-solid fa-magnifying-glass"></i></button>
                        </div>
                            
                        
                            
                    </div>
                    {{form_end(formFilter)}}
					
                    
                        
				</div>

                <div class="row extra-filters mb-5" >
                        <div class="col" >
                            <select class="form-control">
                                <option>Prix</option>
                                <option>Price</option>
                            </select>
                        </div>
                        <div class="col" >
                            <select class="form-control">
                                <option>Type d'endroit</option>
                                <option>Price</option>
                            </select>
                        </div>
                        <div class="col" >
                            <select class="form-control">
                                <option>Annulation gratuite</option>
                                <option>Price</option>
                            </select>
                        </div>
                        <div class="col" >
                            <select class="form-control">
                                <option>Chambre femme</option>
                                <option>Price</option>
                            </select>
                        </div>
                        <div class="col" >
                            <select class="form-control">
                                <option>Chambre homme</option>
                                <option>Price</option>
                            </select>
                        </div>
                        <div class="col" >
                            <select class="form-control">
                                <option>Par lit</option>
                                <option>Price</option>
                            </select>
                        </div>
                        <div class="col" >
                            <select class="form-control">
                                <option>Ramadan</option>
                                <option>Price</option>
                            </select>
                        </div>
                       
                    </div>
                
                    



				

					
          
				</div>
        

				
			

			<div class="col-12">
				<div class="row" >
                {% for singleProduct in productsOffers %}
                
                <div class="col-12 col-md-6 col-lg-6 ">
                    <a href="{{path('singleHost',{id:singleProduct.id})}}" >

        
					<div class="row singleProduct mb-2">
						<div class="col-4">
                        
                        <img  class="img-fluid image-hebergement" src="{{asset('/uploads/'~settings.get.assetFolderName~'/shop/'~singleProduct.image) | imagine_filter('my_thumb', thumbnailConfig)}}"></div>
						<div class="col-5">
							<h6>{{singleProduct.name}}
								</h6>

							<small>{{singleProduct.vendor?singleProduct.vendor : "Not defined"|trans}}
							</small>
							

                            <p>{{singleProduct.shortDescription}}
							</p>
                            <p class="rating">
                                 <b>5.0</b><i class="fa-solid fa-star"></i> <small>(221{{"reviews"|trans}})</small>
							</p>
						</div>
						<div class="col-3">
							<span class="heart" style="position:absolute;top:0;right:15px;">
								<i class="far fa-heart"></i>
							</span>
							
							
                            <span class="price" style="position:absolute;bottom:0;right:15px;">
                                <b>{{singleProduct.price}} {{settings.get.currency}} </b> / {{"night"|trans}}
							</span>
							

						</div>

					</div>

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


		</div>
	</div>

{% endblock body %}