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

{% block title %}
    {% if properties is defined and properties[0] is defined and properties[0].category is defined and properties[0].category.name is defined %}
        {{ properties[0].category.name }}
    {% else %}
        Catégorie vide
    {% endif %}
    {{ parent() }}
{% endblock %}

{% block body %}
<link rel="stylesheet" href="{{ asset('css/swip.css') }}">
<style>
.row{
margin-left:0;
margin-right:0;
	}
</style>
{% if properties is not empty %}
<div id="modals">
        {% for property in properties %}
            {{ include('modal/show.html.twig', { 'property': property }) }}
        {% endfor %}
    </div>

<h1 class="text-center m-5">{{ properties[0].category.name }}</h1>
{{ properties[0].category.describ }}
<div class="row">
    {% for property in properties %}
        <div class="col-md-4 mb-4 rounded-pill">
            <div class="card p-4 shadow " style="height:660px;">
                {% if property.images|length > 0 %}
                    <img style="width: 100%; height: 400px; object-fit: cover;" src="{{ asset('images/properties/' ~ property.images[0].imagename) }}" alt="{{ property.title }}">
                {% else %}
                    <img src="{{ asset('images/no-image.png') }}" style="width: 100%; height: 400px; object-fit: cover;" alt="No image available">
                {% endif %}
                <div class="card-body">
                    <h2 class="card-title">{{ property.title }}</h2>
                    <h5 class="card-text text-danger">{{ property.housingType.name }} - {{ property.category.name }}
                        {% if property.category.name matches '/location/i' and property.subType is not empty %}
                            - {{ property.subType.name }}
                        {% endif %}
                    </h5>
                    {% if property.category.name matches '/location/i' and property.subType is not empty %}
                        <h2 class="card-text" id="price">{{ property.rent }} &euro;/mois</h2>
                    {% else %}
                        <h2 class="card-text" id="price">{{ property.price|number_format }} &euro;</h2>
                    {% endif %}
                    <div class="d-flex">
                    		<div class="d-flex flex-row align-items-center">
                        		<button id="favori-button-{{ property.id }}" class="favori-button"   onclick="toggleFavori({{ property.id }})" data-property-id="{{ property.id }}"></button>
                        		<h6 class="fs-6 ml-2 position-relative" id="favori_numb" >{{ property.favoritNumber }}</h6>
                        		
				</div>
                        	<button id="voir"type="button" class="btn open-modal-btn mt-4 text-white px-4 py-2 rounded" data-toggle="modal" data-target="#exampleModal-{{ property.id }}">Voir</button>
                    	</div>
                </div>
            </div>
        </div>


















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

<div style="display:flex; flex-direction:row; align-items: center;justify-content: center;">
<img src="{{ asset('images/croix_icon_rouge.png') }}" alt="icon de la croix rouge" width="110" height="110" class="d-inline-block align-text-top">
<div style="display:flex; flex-direction: column">
	<h2 style="color:#ce2248">Cette catégorie est vide pour le moment</h2>
	<h4 style="font-weight: 100;">Revenez un autre moment.</h4>
</div>
</div>
{% endif %}

<script>
$(function () {
            $('[data-toggle="tooltip"]').tooltip({
                delay: { "show": 500, "hide": 100 },
                customClass: 'custom-tooltip'
            });
        });

window.favoriUpdateUrl = '{{ path('app_favori_update') }}';

</script>
        
    <script src="{{ asset('js/favorit.js') }}"></script>

{% endblock %}