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

{% block title %}Vos favoris {{ parent() }} {% endblock %}

{% block body %}

<style>
    .carousel-indicators {
        right: auto; /* ou la valeur que vous souhaitez définir */
    }
</style>

<h1 class="text-center my-3">Vos favoris</h1>
<div id="favoris-container" class="container">
    <div class="row">
        {% for property in properties %}
        <div class="col-sm-4 mb-4 bordered">            
           
                    {% if property.images|length > 0 %}
                    
                         <div  style="min-height:200px;">
			   <div class="p-3">                         
                                                        
                                <img src="{{ asset('images/properties/' ~ property.images[0].imagename) }}" style="width: -webkit-fill-available; height:215px;" class="d-block w-100 animate__animated animate__fadeIn" alt="{{ 'Image ' ~ loop.index0 ~ ' de ' ~ property.title }}">
                            </div>                         
 
			          <div class="py-3 text-center"><h3>{{ property.title }}</h3></div>
                        </div>
                    
                    {% else %}

			<div>
                    <img src="{{ asset ('images/no-image.png') }}" style="width: -webkit-fill-available; height: -webkit-fill-available"  alt="No image available">
			</div>
			<div class="py-3"><h2>{{ property.title }}</h2></div>


                    {% endif %}




			<div class="d-flex flex-row justify-content-center">
                            <button class="btn m-1 rounded shadow-sm" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=http://127.0.0.1/coupdcoeurimmo/public/properties/{{ property.id }}', 'facebook-share-dialog'); return false;">
                                <i class="fa fa-facebook" arfia-label=" Partager sur Facebook" title="Partager sur Facebook"></i>
                            </button>

                            <button class="btn m-1 rounded shadow-sm" onclick="window.open('https://twitter.com/share?url=http://127.0.0.1/coupdcoeurimmo/public/properties/{{ property.id }}', 'twitter-share-dialog', 'width=626,height=436'); return false;">
                                <i class="fa fa-twitter" aria-label="Partager sur Twitter" title="Partager sur Twitter"></i>
                            </button>

                            <button class="btn m-1 favori-button rounded shadow-sm" onclick="toggleFavori({{ property.id }})" data-property-id="{{ property.id }}">
                                <i class="fa fa-heart" aria-label=" Ajouter aux favoris" title="Retirer des favoris"></i>
                            </button>

                            <!-- Bouton "Voir" -->
                            <a class="btn bg-light m-1 rounded px-5 shadow-sm" href="{{ path('app_properties_show', { 'id': property.id }) }}" aria-label="Voir {{ property.title }}">Voir</a>
                            
                        </div>



		</div>

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

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/favorit.js') }}"></script>
{% endblock %}