templates/building/index.html.twig line 1
{% extends 'base.html.twig' %}{% block title %}Fiche{% endblock %}{% block body %}<style>.image-size {width: 100%;height: auto;object-fit: cover;}.icon {background-color: #ffcc00;padding: 10px;z-index: 0;border-radius: 60px;height: min-content;width: min-content;}#map {height: 400px;width: 95%;filter: blur(5px);transition: filter 0.3s ease-in-out;}.bar {padding: 5px;padding-left: 50%;border-radius: 60px;font-weight: 700;padding-right: 50%;}.GES-bar-A {background-color: #a3dbfc;}.GES-bar-B {background-color: #8ab5d2;}.GES-bar-C {background-color: #7692b1;}.GES-bar-D {background-color: #5e708d;}.GES-bar-E {background-color: #4d5272;}.GES-bar-F {background-color: #393550;}.GES-bar-G {background-color: #291b35;}.GES-bar-V {background-color:rgb(214, 210, 216);color: white;}.DPE-bar-A {background-color: #4caf50;}.DPE-bar-B {background-color: #8bc34a;}.DPE-bar-C {background-color: #ffeb3b;}.DPE-bar-D {background-color: #ffc107;}.DPE-bar-E {background-color: #ff5722;}.DPE-bar-F {background-color: #f44336;}.DPE-bar-G {background-color: #b71c1c;}.DPE-bar-V {background-color:rgb(214, 210, 216);color: white;}.slick-prev, .slick-next {background-color: transparent;border-radius: 0;padding: 5;}.slick-prev:before {content: '←';font-size: 30px;color: black;margin-right: 15px;}.slick-next:before {content: '→';font-size: 30px;color: black;}.slick-carousel .slick-slide img {width: 100%;height: 500px;object-fit: cover;display: block;margin: 0 auto;}#zoomContainer {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-size: cover;background-position: center;background-repeat: no-repeat;z-index: 9999;display: none;justify-content: center;align-items: center;background-color: rgba(0, 0, 0, 0.8);}.close-button {position: absolute;top: 0px;right: 175px;background: transparent;border: none;font-size: 4rem;font-weight: bold;color: white;cursor: pointer;z-index: 10000;}.close-button:hover {color: red;}</style><script src="https://unpkg.com/flowbite@1.4.0/dist/flowbite.js"></script><div id='firstDiv' class=""><hr class="hidden md:block my-6 border-gray-300"><div class="relative flex items-center justify-between w-full px-4"><div class="md:w-fit"><a href="{{ app.request.headers.get('referer') ?: path('home') }}"class="bg-gray-300 text-nowrap hover:bg-gray-400 focus:ring-4 focus:outline-none focus:ring-gray-300 text-black w-full font-medium rounded-md text-sm px-3 py-2.5"><i class="fa-solid fa-arrow-left text-black"></i><span>{{ 'button.back'|trans }}</span></a></div><div class="md:w-fit">{% if allow %}<a href="{{ path('building_edit',{id : building.id}) }}" class="bg-[#FFFFFF] md:bg-[#ffcc00] md:font-medium items-center flex rounded-full md:rounded-md text-sm p-2 md:p-3"><i class="fa-solid fa-pencil text-black" aria-hidden="true"></i><span class="hidden md:block ml-2">{{ 'button.modif'|trans }}</span></a>{% endif %}</div></div><div class="md:hidden dropdown z-[100000] absolute top-2 right-2 content-center"><button class="dropdown-toggle d-block d-sm-none" type="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fa-solid fa-flag"></i></button><ul style='text-align: -webkit-center; --bs-dropdown-min-width: 3rem !important;' class=" dropdown-menu content-center">{% if app.request.attributes.get('_route') is not null %}<li class=''><a class="w-[20px] h-[20px] dropdown-item bg-[url({{ asset('images/site/en.svg') }})] bg-auto bg-no-repeat bg-center" href="{{ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')|merge({'_locale': 'en'})) }}">{# 🇬🇧 #}</a></li><li class="mt-[2px]"><a class="w-[20px] h-[20px] dropdown-item bg-[url({{ asset('images/site/fr.svg') }})] bg-auto bg-no-repeat bg-center" href="{{ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')|merge({'_locale': 'fr'})) }}">{# 🇫🇷 #}</a></li>{% endif %}</ul></div><hr class="hidden md:block my-6 border-gray-300">{% if building.hasReservation %}<p style="background-color:rgb(147, 173, 218); color: #0064ff; padding: 10px; display: inline-block; border-radius: 8px; margin-bottom: 10px;">{{ 'building.listingOnHold'|trans }}</p>{% endif %}{# Image Mobile #}<div class="slideshow-container"><div class="slideshow block md:hidden">{% if building.buildingDocuments %}<div id="default-carousel" class="relative z-0" data-carousel="static">{# Carousel wrapper #}<div class="overflow-hidden relative h-[14rem] md:h-[10rem] lg:h-[14rem]"><!-- Item 1 -->{% for bd in building.buildingDocuments %}<a class="building-link "><div onclick="zoomImage('{{ bd.imageFile }}')" class=" max-h-[300px] bg-[url({{ asset('images/files/' ~ bd.imageFile) }})] bg-cover bg-no-repeat bg-center hidden duration-700 ease-in-out {% if loop.first %}active{% endif %} " data-carousel-item></div></a>{% endfor %}</div>{# Slider indicators #}<div class="flex absolute border-black bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2">{% for document in building.buildingDocuments %}<button type="button" style="border: 1px grey solid;" class="w-3 h-3 rounded-full border-black" aria-current="false" aria-label="Slide {{building.id}}" data-carousel-slide-to= "{{building.id}}"></button>{% endfor %}</div>{# Slider controls #}{% if building.buildingDocuments|length > 1 %}<button type="button" class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-prev><span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-none"><svg class="w-5 h-5 text-white sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg><span class="hidden">Previous</span></span></button><button type="button" class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-next><span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-none"><svg class="w-5 h-5 text-white sm:w-6 sm:h-6 " fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg><span class="hidden">Next</span></span></button>{% endif %}</div>{% endif %}</div></div>{# end #}<div class='container '><div class="flex justify-between items-center"><div ><h2 class="text-2xl font-bold md:text-nowrap">{{ building.title}}</h2><h2 class="text-2xl font-bold md:text-nowrap">{{ building.cityEntity.city}}, {{ building.cityEntity.country}}</h2></div><div class="flex items-center"><a class="flex items-center justify-center p-3 cursor-pointer rounded-lg">{% if liked %}<h2 class="hidden md:block">{{ 'accueil.retirerfav'|trans }}</h2><i class="text-[#ffcc00] fa-solid fa-heart md:pl-3 fa-2x like-button" data-image-id="{{ building.id }}"></i>{% else %}<h2 class="hidden md:block">{{ 'accueil.addfav'|trans }}</h2><i class="text-[#ffcc00] fa-regular fa-heart md:pl-3 fa-2x like-button" data-image-id="{{ building.id }}"></i>{% endif %}</a><a class="flex items-center justify-center p-3 cursor-pointer rounded-lg" onclick="toggleSharePopup()"><h2 class="hidden md:block">{{ 'accueil.share'|trans }}</h2><img src="{{ asset('/images/partager-jaune.png') }}" alt="Partager" class="md:pl-3 w-10 h-8"></a></div></div><div class="relative mt-6 hidden md:block"><button type="button" class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none slick-custom-prev"><span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-none"><svg class="w-5 h-5 text-white sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg><span class="hidden">Previous</span></span></button><div class="slick-carousel">{% if building.buildingDocuments %}{% if building.complexProperty %}{% for document in building.buildingDocuments %}{% if document.name starts with 'imagesComplexe' %}<div><img onclick="zoomImage('{{ document.imageFile }}')" src="{{ asset('/images/files/') }}{{ document.imageFile }}" alt=""></div>{% endif %}{% endfor %}{% else %}{% for document in building.buildingDocuments %}{% if document.name == "base" %}<div><img onclick="zoomImage('{{ document.imageFile }}')" class="rounded-tl-lg image-size" src="{{ asset('/images/files/') }}{{ document.imageFile }}" alt=""></div>{% endif %}{% endfor %}{% for document in building.buildingDocuments %}{% if document.name != "base" and document.name in ["file0","file1","file2", "file3", "file4", "file5", "file6", "file7", "file8"] %}<div><img onclick="zoomImage('{{ document.imageFile }}')" class="sm:h-28 md:h-36 lg:h-56 sm:w-36 md:w-56 lg:w-80" src="{{ asset('/images/files/') }}{{ document.imageFile }}" alt=""></div>{% endif %}{% endfor %}{% endif %}{% endif %}</div><button type="button" class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none slick-custom-next"><span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-none"><svg class="w-5 h-5 text-white sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg><span class="hidden">Next</span></span></button></div><br><div id="fileShow" class="hidden grid grid-cols-4 gap-4">{% if building.buildingDocuments|length > 4 %}{% for i in 5..8 %}{% for document in building.buildingDocuments %}{% if ("file" ~ i) == document.name %}<div class="hidden md:block "><img class="sm:h-28 md:h-36 lg:h-56 sm:w-36 md:w-56 lg:w-80 " src="{{ asset('/images/files/') }}{{ document.imageFile }}" alt=""></div>{% endif %}{% endfor %}{% endfor %}{% else %}<div class="md-5"><hr class="my-6 border-gray-300"><h2 class="text-2xl font-bold"> {{ 'building.noImage'|trans }}</h2><hr class="my-6 border-gray-300"></div>{% endif %}</div></div>{% if building.complexProperty %}<h2 class="hidden md:block text-2xl font-bold md:text-nowrap">{{ building.type|trans|capitalize }}, {{buildingsInComplex|length}} {{buildingsInComplex|length > 1 ? 'accueil.rooms'|trans : 'accueil.rooms'|trans }}</h2>{% else %}<h2 class="hidden md:block text-2xl font-bold md:text-nowrap">{{ building.type|trans|capitalize }}</h2>{% endif %}{% if building.complexProperty %}<h2 class="hidden md:block text-2xl font-bold md:text-nowrap">{{ 'accueil.loyer'|trans }} {{lowestRent /100}} euros</h2>{% else %}<h2 class="hidden md:block text-2xl font-bold md:text-nowrap">{{ 'accueil.loyer'|trans }} {{ building.rent /100 }} euros</h2>{% endif %}<div class="md:mt-10"><div class="md:grid md:grid-cols-4 md:gap-4 items-start"><div class="col-span-3"><div class="flex flex-col mb-6"><div class="mt-3 md:text-center"><h3 class=" md:hidden text-lg text-gray-500">{{ building.cityEntity.city ~ ", " ~ building.cityEntity.country }}</h3>{# <h3 class="hidden md:block text-lg text-gray-500">{{ 'accueil.add'|trans }}{{ building.createdAt|date('d/m/y H:i') }}</h3> #}</div></div><hr class="my-6 border-gray-300"><h1 class="text-2xl font-bold">{{ 'accueil.description'|trans }}</h1><div style="width: 95%" class="my-6"><p id="description" class="text-sm line-clamp-[5]">{{ building.description|nl2br }}</p> <br>{% if building.description|length > 800 %}<button id="showMoreDescription"class="underline font-bold cursor-pointer"data-more="{{ 'building.savoirplus'|trans }}"data-less="{{ 'building.savoirmoins'|trans }}">{{ 'building.savoirplus'|trans }}</button>{% endif %}<div class="mt-6">{% for document in building.buildingDocuments %}{% if document.name == "houseRules" %}<h1 class="mb-3 text-2xl font-bold">{{ 'building.houseRules'|trans }}</h1>{% if document.imageFile|split('.')[1] == "pdf" %}<a class="" target="_blank" href="{{ asset('/images/files/' ~ document.imageFile) }}"><img class="img-fluid mx-auto justify-center" style="max-width: 50px; max-height: 50px"src="{{ asset('/images/site/pdf.png') }}" alt=""></a>{% else %}<a class="" target="_blank" href="{{ asset('/images/files/' ~ document.imageFile) }}"><img class="w-25 rounded" src="{{ asset('images/files/') }}{{ document.imageFile }}" alt=""></a>{% endif %}{% endif %}{% endfor %}</div></div><hr class="my-6 border-gray-300">{# {% if building.buildingEquipment is not empty %}<div class="my-10"><h1 class="text-2xl font-bold">{{ 'accueil.equipement'|trans }}</h1><div class="grid grid-cols-2 gap-2 my-6 text-sm">{% for equipment in building.buildingEquipment %}<div class="flex items-center"><div><i class="mr-2 p-2 fa-solid fa-arrow-right text-black z-30 justify-center items-center h-full icon focus:outline-none"></i></div><div><span>{{ equipment.name|trans }}</span></div></div>{% endfor %}</div></div>{% endif %} #}{% if building.interior is not empty %}<div class="my-10"><h1 class="text-2xl font-bold">{{ 'accueil.equipementInterior'|trans }}</h1><div class="grid grid-cols-2 gap-2 my-6 text-sm">{% for equipment in building.interior %}<div class="flex items-center"><div><i class="mr-2 p-2 fa-solid fa-arrow-right text-black z-30 justify-center items-center h-full icon focus:outline-none"></i></div><div><span>{{equipment|trans }}</span></div></div>{% endfor %}</div></div>{% endif %}{% if building.exterior is not empty %}<div class="my-10"><h1 class="text-2xl font-bold">{{ 'accueil.equipementExterior'|trans }}</h1><div class="grid grid-cols-2 gap-2 my-6 text-sm">{% for equipment in building.exterior %}<div class="flex items-center"><div><i class="mr-2 p-2 fa-solid fa-arrow-right text-black z-30 justify-center items-center h-full icon focus:outline-none"></i></div><div><span>{{ equipment|trans }}</span></div></div>{% endfor %}</div></div>{% endif %}<hr class=" md:hidden my-6 border-gray-300"><div class=" md:hidden my-10"><div class="grid grid-cols-2 gap-2 text-sm"><div class="justify-center items-center h-full content-center"><h3 class="text-2xl mb-2 text-base"><b>{{ building.rent / 100 }}€ </b>{{ 'accueil.parmois'|trans }}</h3><span class="text-sm">({{ 'building.dont'|trans }}{{ building.expenses / 100 }}{{ 'building.charges'|trans }})</span>{% if building.dateStartAt is not null %}<p class="mt-6 ">{{'building.dispo'|trans}}<span id="dateStartAt">{{ building.dateStartAt|date('d/m/Y') }}</span></p>{% else %}<p>{{'building.nodispo'|trans}}</p>{% endif %}{% if building.isAidEligible %}<div class="mt-6 "><span class="font-bold text-xs leading-[1] ">{{ 'building.cafeligible'|trans }}</span></div>{% endif %}</div><div class="justify-center items-center h-full content-center">{% if app.user %}{% if "ROLE_TENANT" in app.user.roles %}{% if app.user.isRegistrationFinalized %}{% if building.isActive %}<div class="d-flex justify-content-center flex flex-wrap justify-between items-center"><a href="{{ path('edit-user', {id: app.user.id}) }}{{ building is defined and building|length > 0 ? '?buildingId=' ~ building.id : '' }}" style="background-color: #ffcc00; align-self: center; padding-right: 10px;" type="button" class="text-black w-full font-medium rounded-md text-sm pr-5 pl-2.5 md:pr-5 pl-2 py-2 text-center mb-3 md:mb-0 md:mr-3"><i class="fa-solid fa-file text-white"></i><span class="inline">{{ 'building.deposerdemande'|trans }}</span></a></div>{% else %}<div class="d-flex justify-content-center flex flex-wrap justify-between items-center"><a style="background-color:rgb(149 148 144); align-self: center; padding-right: 10px; cursor: default;" type="button" class="text-black w-full font-medium rounded-md text-sm pr-5 pl-2.5 md:pr-5 pl-2 py-2 text-center mb-3 md:mb-0 md:mr-3"><i class="fa-solid fa-xmark text-white"></i><span class="inline">{{ 'building.nondispo'|trans }}</span></a></div>{% endif %}<div class="mt-6">{# <a href="{{ path('building_reporting',{id : building.id}) }}" class="text-gray-400 w-full font-medium rounded-md text-sm text-center"><p class="inline-block"><img src="{{ asset('/images/icons/Signaler.png') }}" height="30px" width="30px" class="fa-sharp fa-solid fa-door-open p-1 rounded-lg"/><span class="underline">{{ 'accueil.signalernannonce'|trans }}</span></p></a> #}</div>{% else %}<div class="d-flex justify-content-center flex flex-wrap justify-between items-center"><a href="{{ path('edit-user', {id: app.user.id}) }}?buildingId={{ building.id }}" class="bg-[#ffcc00] d-flex justify-content-center inline-block text-black w-full font-medium rounded-md text-md px-3 py-2 text-center mb-3"><span class="inline">{{ 'building.deposerdemande'|trans }}</span></a></div>{% endif %}{% endif %}{% else %}<div class="d-flex justify-content-center flex flex-wrap justify-between items-center"><button onclick="window.location.href='{{ path('app_login_site') }}?before=' + encodeURIComponent(window.location.href)" class="bg-[#ffcc00] d-flex justify-content-center inline-block text-black w-full font-medium rounded-md text-md sm:px-5 sm:py-3 px-3 py-2 text-center mb-3 md:mb-0 md:mr-3"><span class="inline">{{ 'building.deposerdemande'|trans }}</span></button></div>{% endif %}<a href="{{ path('building_reporting',{id : building.id}) }}" class=" text-gray-400 w-full font-medium rounded-md text-sm text-center"><p><span class="underline">{{ 'accueil.signalernannonce'|trans }}</span></p></a></div></div></div>{# <hr class="my-6 border-gray-300"><p class="container my-10"><img class="h-12" src="{{ asset('/images/site/garantme.png') }}" alt=""></p><p>{{ 'accueil.garantme1'|trans }}<br>{{ 'accueil.garantme2'|trans }}<br> <br><div class="mt-6"><button type="button" onclick="changeState()" class="text-gray-800 font-bold w-full underline font-medium rounded-md text-sm py-2.5 text-center mr-3 md:mr-0"><span>{{ 'accueil.more'|trans }}</span></button></div><div id="garant-me-text" class="hidden"><span class="font-bold">{{ 'accueil.aquoicasert'|trans }}</span><br><ul><li>{{ 'accueil.gracea'|trans }}<br></li><li>{{ 'accueil.gracea2'|trans }}<br></li></ul><br><span class="font-bold">{{ 'accueil.commentfaire'|trans }}</span><br>{{ 'accueil.inscription'|trans }}<br><br><span class="font-bold">{{ 'accueil.howmuch'|trans }}</span><br><br>{{ 'accueil.explication1'|trans }}<br><br>{{ 'accueil.explication2'|trans }}<br><br>{{ 'accueil.explication3'|trans }}<br><br></div></p>#}<div id="zoomContainer" style="display: none;"><img id="zoomImg" src"" class="" alt="ImageZoom" style="max-width: 100%; max-height: 100%;"><button onclick="closeZoomImage()" id="closeButton" class="close-button">×</button></div>{% if building.complexProperty %}<p class="text-2xl m-2"><strong>{{ buildingsInComplex|length > 1? 'accueil.rooms'|trans: 'accueil.room'|trans}}</strong></p><div style="width: 95%" class="relative border border-gray-300 hover:border-blue-500 shadow-2xl rounded p-6"><div class="grid grid-cols-1 sm:grid-cols-2 gap-4">{% for loopIndex, building in buildingsInComplex %}{% if loopIndex % 4 == 0 and loopIndex != 0 %}</div><div class="grid grid-cols-1 sm:grid-cols-2 gap-4">{% endif %}<div class="w-full text-center">{% if building.buildingDocuments is not empty %}{% set filteredDocuments = building.buildingDocuments|filter(document => document.name starts with 'file') %}{% if filteredDocuments is not empty %}<div id="carousel-{{ building.id }}" class="relative z-0 w-full" data-carousel="static"><div class="overflow-hidden relative h-[20rem] md:h-[10rem] lg:h-[20rem] flex mt-10">{% for document in filteredDocuments %}{% if document.imageFile %}<div onclick="zoomImage('{{ document.imageFile }}')" class="rounded-xl max-h-[800px] bg-[url({{ asset('images/files/' ~ document.imageFile) }})] bg-cover bg-no-repeat bg-center w-full duration-700 ease-in-out {% if loop.first %}active{% endif %}" data-carousel-item></div>{% endif %}{% endfor %}</div><button type="button" class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-prev><span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-none"><svg class="w-5 h-5 text-white sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg><span class="hidden">Previous</span></span></button><button type="button" class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-next><span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-none"><svg class="w-5 h-5 text-white sm:w-6 sm:h-6 " fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg><span class="hidden">Next</span></span></button><div class="flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2">{% for document in filteredDocuments %}{% if document.imageFile %}<button type="button" style="border: 1px grey solid;" class="w-3 h-3 rounded-full border-black" aria-current="false" aria-label="Slide {{ building.id }}" data-carousel-slide-to="{{ loop.index0 }}"></button>{% endif %}{% endfor %}</div></div>{% else %}<p>No images</p>{% endif %}{% else %}<p>No documents available for this building.</p>{% endif %}<div class="mb-4"><p class="text-2xl m-2"><strong>{{ 'accueil.room'|trans }} {{ loop.index }}</strong></p><p><strong>{{ 'accueil.superfi'|trans }}</strong> {{ building.surfaceBedroom }} m²</p><p><strong>{{ 'accueil.loyermen'|trans }}</strong> {{ building.rent / 100 }} euros</p><p><strong>{{ 'accueil.privbath'|trans }}</strong> {{ building.privateBathroom ? 'Oui'|trans : 'Non'|trans }}</p><p><strong>{{ 'accueil.bed'|trans }}</strong> {{ building.typeBed }}</p><p>{% if building.isActive %}<strong>{{ 'accueil.startloc'|trans }}</strong> {{ building.dateStartAt|date('d/m/Y') }}{% else %} {% endif %}</p></div>{% if app.user %}{% if "ROLE_TENANT" in app.user.roles %}{% if app.user.isRegistrationFinalized %}{% if building.isActive %}<div class="d-flex justify-content-center flex flex-wrap justify-between items-center m-3.1"><a href="{{ path('edit-user', {id: app.user.id}) }}{{ building is defined and building|length > 0 ? '?buildingId=' ~ building.id : '' }}" style="background-color: #ffcc00; align-self: center; padding-right: 10px; " type="button" class="text-black w-full font-medium rounded-md text-sm pr-5 pl-2.5 md:pr-5 pl-2 py-2 text-center mb-3 md:mb-0 md:mr-3"><span class="inline">{{ 'building.deposerdemandeChambre'|trans }}</span></a></div>{% else %}<div class="d-flex justify-content-center flex flex-wrap justify-between items-center mt-4"><a style="background-color:rgb(149 148 144); align-self: center; padding-right: 10px;" type="button" class="text-black w-full font-medium rounded-md text-sm pr-5 pl-2.5 md:pr-5 pl-2 py-2 text-center mb-3 md:mb-0 md:mr-3"><i class="fa-solid fa-xmark text-white"></i><span class="inline">{{ 'building.nondispo'|trans }}</span></a></div>{% endif %}{% else %}<div class="d-flex justify-content-center flex flex-wrap justify-between items-center m-3.1"><a href="{{ path('edit-user', {id: app.user.id}) }}?buildingId={{ building.id }}" class="bg-[#ffcc00] d-flex justify-content-center inline-block text-black w-full font-medium rounded-md text-md px-3 py-2 text-center mb-3"><span class="inline">{{ 'building.deposerdemande'|trans }}</span></a></div>{% endif %}{% endif %}{% else %}<div class="d-flex justify-content-center flex flex-wrap justify-between items-center m-3.1"><button onclick="window.location.href='{{ path('app_login_site') }}?before=' + encodeURIComponent(window.location.href)" class="bg-[#ffcc00] d-flex justify-content-center inline-block text-black w-full font-medium rounded-md text-md sm:px-5 sm:py-3 px-3 py-2 text-center mb-3 md:mb-0 md:mr-3"><span class="inline">{{ 'building.deposerdemande'|trans }}</span></button></div>{% endif %}</div>{% endfor %}</div>{% if buildingsInComplex|length % 4 != 0 %}<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"></div>{% endif %}</div>{% endif %}{% if building and not building.hideAddress == true %}<div class="my-10"><h1 class="text-2xl font-bold">{{ 'accueil.whereis'|trans }}</h1><h3 class="text-sm text-gray-500 mt-2">{{ building.streetNumber }} {{ building.street }} {{ building.cityEntity.city }} {{ building.cityEntity.postalCode }},{{ building.cityEntity.country }}</h3><input placeholder="{{ 'building.inputAddressDistance'|trans({}, 'messages') }}" type="text" id="addressDistanceInput" name="addressDistanceInput" style="padding: 10px; width: 95%; border: 1px solid #ccc; border-radius: 5px; margin-top: 10px"><div id="addressDistance" style="display: none; margin-top: 15px"></div><div class=" relative flex mx-auto text-center justify-center mt-5" style="width: 95%">{% if building.lat !=null or building.lng !=null %}<button id="mapGoogle" onclick="showMap()" type="button" class="absolute z-[1000000000] text-white top-[48%] bg-gray-900 w-[200] hover:bg-gray-800 font-medium rounded-full text-sm px-4 py-2.5 text-center mr-3 md:mr-0"><i class="fa-solid fa-map-pin"></i>{{ 'accueil.affichercarte'|trans }}</button><div id="map"></div>{% else %}<button type="button" class=" z-[1000000000] absolute text-white top-1/3 bg-gray-900 hover:bg-gray-800 font-medium rounded-full text-sm p-2 text-center"><i class="fa-solid fa-map-pin"></i>{{ 'accueil.mapNotFound'|trans }}</button>{% endif %}</div></div>{% endif %}</div><div class="hidden md:block col-span-4 sm:col-span-1 shadow-2xl rounded p-6 h-auto w-full"><span class="text-2xl font-bold">{{ 'accueil.detail'|trans }}</span><div class="flex flex-col justify-between"><div class="mt-2"><span><strong>{{ 'accueil.ref'|trans }}:</strong> {{building.RefBuilding}}</span></div><div class="mt-2"><span><strong>{{ 'accueil.city'|trans }}:</strong> {{ building.cityEntity.city}}, {{ building.cityEntity.country}}</span></div>{# {% if building.complexProperty %}<div class="mt-2"><span><strong>{{ "Chambre n°" }}{{ building.bedroomNumber}}</strong></span></div>{% endif %} #}{% if building.complexProperty %}<div class="mt-2"><span><strong>{{ 'accueil.loyer'|trans }}</strong> {{lowestRent /100}}€</span></div><div class="mt-2"><span><strong>{{ 'accueil.charge'|trans }}</strong> </br> <span>{{ building.expenses / 100 }}€</span></span></div>{% else %}<div><div class="mt-2"><h3 class="text-2xl text-base"><b>{{ building.rent / 100 }}€ </b>{{ 'accueil.parmois'|trans }}</h3><span class="text-sm">({{ 'building.dont'|trans }}{{ building.expenses / 100 }}{{ 'building.charges'|trans }})</span></div>{# {% if building.expenses != null %}<div><div class="grid grid-cols-2 gap-2 my-6">{% if building.expensesDescription is not empty %}<span class="text-sm">{{ 'building.comprennent'|trans }}</span><br>{% for expense in building.expensesDescription|split(',') %}<div class="flex items-center"><div><i class="mr-2 p-2 fa-solid fa-arrow-right text-black z-30 justify-center items-center h-full icon focus:outline-none"></i></div><div><span>{{ expense|trans }}</span></div></div>{% endfor %}{% endif %}</div></div>{% endif %} #}</div>{% endif %}<div class="mt-2"><span><strong>{{ 'admin.surface'|trans }}:</strong> {{building.surface}} m²</span></div>{% if building.isFurniture %}<div class="mt-2"><span><strong>{{ 'building.FurnishedAccommodation'|trans }}</strong></span></div>{% endif %}{% if building.isFloor %}<div class="mt-2"><span><strong>{{ 'building.floor'|trans }}</strong> {{ building.floor}}</span></div>{% else %}<div class="mt-2"><span><strong>{{ 'building.notFloor'|trans }}</strong></span></div>{% endif %}{% if building.complexProperty %}{% if building.privateBathroom %}<div class="mt-2"><span><strong>{{ 'building.privateBathroom'|trans }}</strong></span></div>{% else %}<div class="mt-2"><span><strong>{{ 'building.notPrivateBathroom'|trans }}</strong></span></div>{% endif %}{% else %}{% if building.bathrooms >0 %}<div class="mt-2"><span><strong>{{ building.bathrooms }} {{ 'building.sdb'|trans }}</strong></span></div>{% endif %}{% endif %}{% if building.complexProperty %}<div class="mt-2"><span><strong>{{'building.dispo'|trans}} </strong> </br> <span> {% if earlyLocation %}{{'building.dateStartAt'|trans}} {{ earlyLocation|date('d/m/Y') }}{% endif %}</span></span></div>{% else %}{% if building.dateStartAt is not null %}<div class="mt-2"><span><strong>{{'building.dispo'|trans}}</strong> {{ building.dateStartAt|date('d/m/Y') }}</span></div>{% else %}<p>{{'building.nodispo'|trans}}</p>{% endif %}{% endif %}{% if building.isAidEligible %}<div class="mt-2"><span><strong>{{ 'building.cafeligible'|trans }}</strong></span></div>{% endif %}{% if building.charges is not empty %}<div class="my-5"><h1 class="text-2xl font-bold">{{ 'accueil.Fees'|trans }}</h1><div class="grid grid-cols-2 gap-2 my-2 text-sm">{% for fees in building.charges %}<div class="flex items-center"><div><span><i class="fa-solid fa-check"></i> {{ fees|trans }}</span></div></div>{% endfor %}</div></div>{% endif %}{% if building.houseRules is not empty %}<div class="my-5"><h1 class="text-2xl font-bold">{{ 'accueil.houseRules'|trans }}</h1><div class="grid grid-cols-2 gap-2 my-2 text-sm">{% for rule in building.houseRules %}<div class="flex items-center"><div><span><i class="fa-solid fa-check"></i> {{ rule|trans }}</span></div></div>{% endfor %}</div></div>{% endif %}<div class="mt-6">{% if app.user %}{% if "ROLE_TENANT" in app.user.roles %}{% if app.user.isRegistrationFinalized %}{% if not building.complexProperty %}{% if building.isActive %}<div class="d-flex justify-content-center flex flex-wrap justify-between items-center"><a href="{{ path('edit-user', {id: app.user.id}) }}{{ building is defined and building|length > 0 ? '?buildingId=' ~ building.id : '' }}" style="background-color: #ffcc00; align-self: center; padding-right: 10px;" type="button" class="text-black w-full font-medium rounded-md text-sm pr-5 pl-2.5 md:pr-5 pl-2 py-2 text-center mb-3 md:mb-0 md:mr-3"><i class="fa-solid fa-file text-white"></i><span class="hidden md:inline">{{ 'building.deposerdemande'|trans }}</span></a></div>{% else %}<div class="d-flex justify-content-center flex flex-wrap justify-between items-center"><a style="background-color:rgb(149 148 144); align-self: center; padding-right: 10px;" type="button" class="text-black w-full font-medium rounded-md text-sm pr-5 pl-2.5 md:pr-5 pl-2 py-2 text-center mb-3 md:mb-0 md:mr-3"><i class="fa-solid fa-xmark text-white"></i><span class="hidden md:inline">{{ 'building.nondispo'|trans }}</span></a></div>{% endif %}{% endif %}{# <div class="mt-6"><a href="{{ path('building_reporting',{id : building.id}) }}" class="text-gray-400 w-full font-medium rounded-md text-sm text-center"><p class="hidden sm:inline-block"><img src="{{ asset('/images/icons/Signaler.png') }}" height="30px" width="30px" class="fa-sharp fa-solid fa-door-open p-1 rounded-lg"/><span class="underline">{{ 'accueil.signalernannonce'|trans }}</span></p></a></div> #}{% else %}{% if not building.complexProperty %}<div class="d-flex justify-content-center flex flex-wrap justify-between items-center"><a href="{{ path('edit-user', {id: app.user.id}) }}?buildingId={{ building.id }}" class="bg-[#ffcc00] d-flex justify-content-center inline-block text-black w-full font-medium rounded-md text-md sm:px-5 sm:py-3 px-3 py-2 text-center mb-3 md:mb-0 md:mr-3"><span class="hidden md:inline">{{ 'building.deposerdemande'|trans }}</span></a></div>{% endif %}{% endif %}{% endif %}{% else %}<div class="d-flex justify-content-center flex flex-wrap justify-between items-center"><button onclick="window.location.href='{{ path('app_login_site') }}?before=' + encodeURIComponent(window.location.href)" class="bg-[#ffcc00] d-flex justify-content-center inline-block text-black w-full font-medium rounded-md text-md sm:px-5 sm:py-3 px-3 py-2 text-center mb-3 md:mb-0 md:mr-3"><span class="hidden md:inline">{{ 'building.deposerdemande'|trans }}</span></button></div>{% endif %}<br><div class="mt-6 mb-5">{% if building.DEP != null %}<div class="mt-6"><h1 class="text-2xl font-bold">DPE ({{'building.dpe'|trans}})</h1><br><div class='grid grid-cols-8 gap-1 text-center align-middle'>{% if building.DEP == 'A' %}<span id="dpe" class=" DPE-bar-A text-2xl font-bold rounded-l-lg">A</span><span id="dpe" class=" DPE-bar-B text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-C text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-D text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-E text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-F text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-G text-2xl font-bold rounded-r-lg mt-2.5 h-2"></span>{% elseif building.DEP == 'B' %}<span id="dpe" class=" DPE-bar-A text-2xl font-bold rounded-l-lg mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-B text-2xl font-bold ">B</span><span id="dpe" class=" DPE-bar-C text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-D text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-E text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-F text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-G text-2xl font-bold rounded-r-lg mt-2.5 h-2"></span>{% elseif building.DEP == 'C' %}<span id="dpe" class=" DPE-bar-A text-2xl font-bold rounded-l-lg mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-B text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-C text-2xl font-bold">C</span><span id="dpe" class=" DPE-bar-D text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-E text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-F text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-G text-2xl font-bold rounded-r-lg mt-2.5 h-2"></span>{% elseif building.DEP == 'D' %}<span id="dpe" class=" DPE-bar-A text-2xl font-bold rounded-l-lg mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-B text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-C text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-D text-2xl font-bold">D</span><span id="dpe" class=" DPE-bar-E text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-F text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-G text-2xl font-bold rounded-r-lg mt-2.5 h-2"></span>{% elseif building.DEP == 'E' %}<span id="dpe" class=" DPE-bar-A text-2xl font-bold rounded-l-lg mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-B text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-C text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-D text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-E text-2xl font-bold">E</span><span id="dpe" class=" DPE-bar-F text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-G text-2xl font-bold rounded-r-lg mt-2.5 h-2"></span>{% elseif building.DEP == 'F' %}<span id="dpe" class=" DPE-bar-A text-2xl font-bold rounded-l-lg mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-B text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-C text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-D text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-E text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-F text-2xl font-bold">F</span><span id="dpe" class=" DPE-bar-G text-2xl font-bold rounded-r-lg mt-2.5 h-2"></span>{% elseif building.DEP == 'G' %}<span id="dpe" class=" DPE-bar-A text-2xl font-bold rounded-l-lg mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-B text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-C text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-D text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-E text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-F text-2xl font-bold mt-2.5 h-2"></span><span id="dpe" class=" DPE-bar-G text-2xl font-bold rounded-r-lg">G</span>{% endif %}</div>{% if building.DEP == 'Vierge' %}<div class='text-center align-middle'><span id="dpe" class="DPE-bar-V text-[20px] text-white rounded-r-lg p-2">Vierge</span></div>{% endif %}</div>{% endif %}{% if building.GES != null %}<div class="mt-6"><h1 class="text-2xl font-bold">GES ({{'building.ges'|trans}})</h1><br><div class='grid grid-cols-8 gap-1 text-center align-middle'>{% if building.GES == 'A' %}<span id="ges" class=" GES-bar-A text-2xl font-bold rounded-l-lg">A</span><span id="ges" class=" GES-bar-B text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-C text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-D text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-E text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-F text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-G text-2xl font-bold rounded-r-lg mt-2.5 h-2"></span>{% elseif building.GES == 'B' %}<span id="ges" class=" GES-bar-A text-2xl font-bold rounded-l-lg mt-2.5 h-2"></span><span id="ges" class=" GES-bar-B text-2xl font-bold ">B</span><span id="ges" class=" GES-bar-C text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-D text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-E text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-F text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-G text-2xl font-bold rounded-r-lg mt-2.5 h-2"></span>{% elseif building.GES == 'C' %}<span id="ges" class=" GES-bar-A text-2xl font-bold rounded-l-lg mt-2.5 h-2"></span><span id="ges" class=" GES-bar-B text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-C text-2xl font-bold">C</span><span id="ges" class=" GES-bar-D text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-E text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-F text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-G text-2xl font-bold rounded-r-lg mt-2.5 h-2"></span>{% elseif building.GES == 'D' %}<span id="ges" class=" GES-bar-A text-2xl font-bold rounded-l-lg mt-2.5 h-2"></span><span id="ges" class=" GES-bar-B text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-C text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-D text-2xl font-bold">D</span><span id="ges" class=" GES-bar-E text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-F text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-G text-2xl font-bold rounded-r-lg mt-2.5 h-2"></span>{% elseif building.GES == 'E' %}<span id="ges" class=" GES-bar-A text-2xl font-bold rounded-l-lg mt-2.5 h-2"></span><span id="ges" class=" GES-bar-B text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-C text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-D text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-E text-2xl font-bold">E</span><span id="ges" class=" GES-bar-F text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-G text-2xl font-bold rounded-r-lg mt-2.5 h-2"></span>{% elseif building.GES == 'F' %}<span id="ges" class=" GES-bar-A text-2xl font-bold rounded-l-lg mt-2.5 h-2"></span><span id="ges" class=" GES-bar-B text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-C text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-D text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-E text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-F text-2xl font-bold">F</span><span id="ges" class=" GES-bar-G text-2xl font-bold rounded-r-lg mt-2.5 h-2"></span>{% elseif building.GES == 'G' %}<span id="ges" class=" GES-bar-A text-2xl font-bold rounded-l-lg mt-2.5 h-2"></span><span id="ges" class=" GES-bar-B text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-C text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-D text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-E text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-F text-2xl font-bold mt-2.5 h-2"></span><span id="ges" class=" GES-bar-G text-2xl font-bold rounded-r-lg">G</span>{% endif %}</div>{% if building.GES == 'Vierge' %}<div class='text-center align-middle'><span id="ges" class="GES-bar-V text-[20px] text-white rounded-r-lg p-2">Vierge</span></div>{% endif %}</div>{% endif %}{# {% if not building.complexProperty %}<div style="text-align: center; margin-top: 30px;"><button type="submit" id="submitButton" style="background-color: #fbcb04; color: black; font-weight: bold; padding: 12px 25px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px;">Réserver ce logement</button></div>{% endif %} #}</div><a href="{{ path('building_reporting',{id : building.id}) }}" class=" hidden md:block text-gray-400 w-full font-medium rounded-md text-sm text-center"><p class="flex justify-center items-center h-full"><span class="underline">{{ 'accueil.signalernannonce'|trans }}</span></p></a></div></div></div></div>{% if similarProperties %}<p class="text-2xl m-2"><strong>{{ 'accueil.log'|trans }}</strong></p><div style="width: 95%" class="relative border border-gray-300 hover:border-blue-500 shadow-2xl rounded p-6"><div class="grid grid-cols-1 sm:grid-cols-3 gap-4">{% for loopIndex, building in similarProperties %}{% if loopIndex % 43 == 0 and loopIndex != 0 %}</div><div class="grid grid-cols-1 sm:grid-cols-2 gap-4">{% endif %}<div class="w-full text-center">{% if building.buildingDocuments is not empty %}{% set filteredDocuments = building.buildingDocuments|filter(document => document.name starts with 'file') %}{% if filteredDocuments is not empty %}<div id="carousel-{{ building.id }}" class="relative z-0 w-full" data-carousel="static"><div class="overflow-hidden relative h-[20rem] md:h-[10rem] lg:h-[20rem] flex mt-10">{% for document in filteredDocuments %}{% if document.imageFile %}<div onclick="zoomImage('{{ document.imageFile }}')" class="rounded-xl max-h-[800px] bg-[url({{ asset('images/files/' ~ document.imageFile) }})] bg-cover bg-no-repeat bg-center w-full duration-700 ease-in-out {% if loop.first %}active{% endif %}" data-carousel-item></div>{% endif %}{% endfor %}</div><button type="button" class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-prev><span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-none"><svg class="w-5 h-5 text-white sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg><span class="hidden">Previous</span></span></button><button type="button" class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-next><span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-none"><svg class="w-5 h-5 text-white sm:w-6 sm:h-6 " fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg><span class="hidden">Next</span></span></button><div class="flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2">{% for document in filteredDocuments %}{% if document.imageFile %}<button type="button" style="border: 1px grey solid;" class="w-3 h-3 rounded-full border-black" aria-current="false" aria-label="Slide {{ building.id }}" data-carousel-slide-to="{{ loop.index0 }}"></button>{% endif %}{% endfor %}</div></div>{% else %}<p>No images</p>{% endif %}{% else %}<p>No documents available for this building.</p>{% endif %}<p class="text-2xl m-2 break-words whitespace-normal">{% if building.title %}<strong>{{ building.title }}</strong>{% else %} {% endif %}</p><p><strong>{{ 'accueil.city'|trans }} :</strong> {{ building.cityEntity.city }}</p><p><strong>{{ 'accueil.superfi'|trans }}</strong> {{ building.surface }} m²</p><p><strong>{{ 'accueil.loyermen'|trans }}</strong> {{ building.rent / 100 }} euros</p<p>{% if building.isActive %}<strong>{{ 'accueil.startloc'|trans }}</strong> {{ building.dateStartAt|date('d/m/Y') }}{% else %} {% endif %}</p>{% if app.user %}{% if "ROLE_TENANT" in app.user.roles %}{% if app.user.isRegistrationFinalized %}{% if building.isActive %}<div class="d-flex justify-content-center flex flex-wrap justify-between items-center m-4"><a href="{{ path('detail_building', {id : building.id}) }}" style="background-color: #ffcc00; align-self: center; padding-right: 10px; " type="button" class="text-black w-full font-medium rounded-md text-sm pr-5 pl-2.5 md:pr-5 pl-2 py-2 text-center mb-3 md:mb-0 md:mr-3"><span class="inline">{{ 'accueil.plus'|trans }}</span></a></div>{% else %}<div class="d-flex justify-content-center flex flex-wrap justify-between items-center m-4"><a style="background-color:rgb(149 148 144); align-self: center; padding-right: 10px;" type="button" class="text-black w-full font-medium rounded-md text-sm pr-5 pl-2.5 md:pr-5 pl-2 py-2 text-center mb-3 md:mb-0 md:mr-3"><i class="fa-solid fa-xmark text-white"></i><span class="inline">{{ 'building.nondispo'|trans }}</span></a></div>{% endif %}{% else %}<div class="d-flex justify-content-center flex flex-wrap justify-between items-center m-4"><a href="{{ path('edit-user', {id: app.user.id}) }}?buildingId={{ building.id }}" class="bg-[#ffcc00] d-flex justify-content-center inline-block text-black w-full font-medium rounded-md text-md px-3 py-2 text-center mb-3"><span class="inline">{{ 'building.deposerdemande'|trans }}</span></a></div>{% endif %}{% endif %}{% else %}<div class="d-flex justify-content-center flex flex-wrap justify-between items-center m-4"><button onclick="window.location.href='{{ path('app_login_site') }}?before=' + encodeURIComponent(window.location.href)" class="bg-[#ffcc00] d-flex justify-content-center inline-block text-black w-full font-medium rounded-md text-md sm:px-5 sm:py-3 px-3 py-2 text-center mb-3 md:mb-0 md:mr-3"><span class="inline">{{ 'building.deposerdemande'|trans }}</span></button></div>{% endif %}</div>{% endfor %}</div>{% if buildingsInComplex|length % 3 != 0 %}<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"></div>{% endif %}</div>{% endif %}</div></div></div></div><div id="sharePopup" class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center hidden"><div class="bg-white p-6 rounded-lg shadow-lg"><h2 class="text-xl font-bold mb-4">Partager ce logement via :</h2><div class="flex flex-col items-center space-y-4"><a href="mailto:?subject=Regardez ce logement&body=Voici un logement qui pourrait vous intéresser : {{ app.request.uri }}" target="_blank" class="p-2"><img src="{{ asset('/images/email.png') }}" alt="Mail" class="w-8 h-8"></a><a href="https://www.facebook.com/sharer/sharer.php?u={{ app.request.uri|url_encode }}" target="_blank" class="p-2"><img src="{{ asset('/images/facebook.png') }}" alt="Facebook" class="w-8 h-8"></a><a href="https://wa.me/?text=Voici un logement qui pourrait vous intéresser : {{ app.request.uri|url_encode }}" target="_blank" class="p-2"><img src="{{ asset('/images/whatsapp.jfif') }}" alt="WhatsApp" class="w-8 h-8"></a><button onclick="copyToClipboard('{{ app.request.uri }}')" class="p-2"><img src="{{ asset('/images/link.png') }}" alt="Copy" class="w-8 h-8"></button></div><div class="flex justify-center mt-4"><button onclick="toggleSharePopup()" class="bg-gray-300 hover:bg-gray-400 text-black font-medium rounded-md text-sm px-4 py-2">Fermer</button></div></div></div>{% set googleMapsApiKey = app.request.server.get('GOOGLEMAP_KEY') %}<script>const googleMapsApiKey = "{{ googleMapsApiKey }}";var iconMap = "{{ asset('/images/icons/Bons Plans.png') }}";</script>{% block scripts %}<script async src="{{ 'https://maps.googleapis.com/maps/api/js' ~ '?key=' ~ googleMapsApiKey ~ '&callback=initMap&v=beta&libraries=places,geometry,marker' }}"></script><script>function initMap() {var input = document.getElementById('addressDistanceInput');var options = {types: ['geocode'],componentRestrictions: { country: 'fr' }};var autocomplete = new google.maps.places.Autocomplete(input, options);var currentMarker = null;var currentCircle = null;google.maps.event.addListener(autocomplete, 'place_changed', function() {var place = autocomplete.getPlace();if (!place.geometry) {console.log("Aucun détail géographique trouvé pour cette adresse.");return;}var latitude = place.geometry.location.lat();var longitude = place.geometry.location.lng();if (currentMarker) currentMarker.setMap(null);if (currentCircle) currentCircle.setMap(null);var iconMap = {url: "{{ asset('/images/icons/ecole.png') }}",scaledSize: new google.maps.Size(40, 40),anchor: new google.maps.Point(20, 40)};currentMarker = new google.maps.Marker({position: { lat: latitude, lng: longitude },map: map,title: "Adresse distance",icon: iconMap,});console.log(currentMarker)currentCircle = new google.maps.Circle({strokeColor: "#FFFF00",strokeOpacity: 0.8,strokeWeight: 2,fillColor: "#FFFF00",fillOpacity: 0.35,map: map,center: {lat: {{ building.lat|json_encode|raw }}, lng: {{ building.lng|json_encode|raw }}},radius: 2500,zoom: 50,});var initialPosition = new google.maps.LatLng({{ building.lat|json_encode|raw }}, {{ building.lng|json_encode|raw }});var newPosition = new google.maps.LatLng(latitude, longitude);var distance = google.maps.geometry.spherical.computeDistanceBetween(initialPosition, newPosition);distance = Math.round(distance /1000);var temps = (distance/80)*60;temps = Math.round(temps);var addressDistanceField = document.querySelector('#addressDistance');addressDistanceField.style.display = 'block';addressDistanceField.innerHTML = `<p>{{ 'building.logement1'|trans }} ${distance} {{ 'building.logement2'|trans }} ${temps} {{ 'building.logement3'|trans }}</p><p>{{ 'building.logement4'|trans }}</p>`;map.setCenter(new google.maps.LatLng(latitude, longitude));});if ({{ building.lat|json_encode|raw }} == null || {{ building.lng|json_encode|raw }} == null) {return 0;}const map = new google.maps.Map(document.getElementById("map"), { mapId:"b47cb966043d1a05", center: {lat: {{ building.lat|json_encode|raw }}, lng: {{ building.lng|json_encode|raw }}}, zoom: 14, });const parser = new DOMParser();// A marker with a custom inline SVG.const pinSvgString = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="34px" viewBox="0 0 30 40" version="1.1"><defs><filter id="alpha" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"><feColorMatrix type="matrix" in="SourceGraphic" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/></filter><mask id="mask0"><g filter="url(#alpha)"><rect x="0" y="0" width="30" height="40" style="fill:rgb(0%,0%,0%);fill-opacity:0.996078;stroke:none;"/></g></mask><clipPath id="clip1"><rect x="0" y="0" width="30" height="40"/></clipPath><g id="surface5" clip-path="url(#clip1)"><path style=" stroke:none;fill-rule:evenodd;fill:rgb(99.607843%,80.392157%,0%);fill-opacity:1;" d="M 14.472656 0.429688 C 18.484375 0.265625 21.949219 1.511719 24.871094 4.164062 C 28.933594 7.972656 30.359375 12.582031 29.152344 17.984375 C 28.730469 19.613281 28.15625 21.183594 27.425781 22.703125 C 26.023438 25.640625 24.378906 28.429688 22.492188 31.066406 C 20.523438 33.816406 18.417969 36.464844 16.179688 39.019531 C 15.96875 39.238281 15.730469 39.414062 15.457031 39.550781 C 15.1875 39.574219 14.917969 39.574219 14.648438 39.550781 C 14.339844 39.378906 14.066406 39.167969 13.820312 38.914062 C 11.074219 35.8125 8.558594 32.539062 6.273438 29.105469 C 4.929688 27.042969 3.71875 24.894531 2.644531 22.667969 C 1.714844 20.746094 1.066406 18.738281 0.703125 16.644531 C 0.132812 12.804688 1.015625 9.328125 3.347656 6.214844 C 6.113281 2.582031 9.820312 0.65625 14.472656 0.429688 Z M 14.472656 0.429688 "/></g></defs><g id="surface1"><use xlink:href="#surface5" mask="url(#mask0)"/><path style=" stroke:none;fill-rule:evenodd;fill:rgb(7.45098%,7.843137%,8.627451%);fill-opacity:1;" d="M 14.257812 7.695312 C 15.882812 7.558594 17.457031 7.757812 18.984375 8.296875 C 20.640625 8.976562 21.609375 10.1875 21.890625 11.925781 C 22.273438 14.070312 21.621094 15.84375 19.933594 17.246094 C 19.6875 17.445312 19.429688 17.628906 19.160156 17.796875 C 18.753906 18.105469 18.699219 18.46875 19 18.882812 C 20.109375 20.59375 21.199219 22.316406 22.28125 24.042969 C 22.476562 24.546875 22.351562 24.957031 21.910156 25.265625 C 21.496094 25.585938 21.023438 25.746094 20.5 25.75 C 20.308594 25.6875 20.148438 25.578125 20.023438 25.421875 C 18.710938 23.203125 17.417969 20.980469 16.144531 18.742188 C 16.097656 18.542969 16.132812 18.359375 16.25 18.191406 C 16.613281 17.933594 16.984375 17.6875 17.363281 17.453125 C 18.5625 16.527344 19.171875 15.316406 19.195312 13.820312 C 19.253906 12.777344 18.953125 11.847656 18.296875 11.03125 C 17.738281 10.5 17.074219 10.148438 16.304688 9.984375 C 15.792969 9.886719 15.273438 9.816406 14.753906 9.777344 C 14.714844 9.300781 14.605469 8.835938 14.417969 8.382812 C 14.335938 8.246094 14.253906 8.105469 14.171875 7.96875 C 14.136719 7.855469 14.167969 7.765625 14.257812 7.695312 Z M 14.257812 7.695312 "/><path style=" stroke:none;fill-rule:evenodd;fill:rgb(7.45098%,7.843137%,8.627451%);fill-opacity:1;" d="M 11.617188 7.726562 C 12.667969 7.652344 13.367188 8.101562 13.714844 9.070312 C 13.890625 9.921875 13.628906 10.605469 12.921875 11.117188 C 11.960938 11.558594 11.179688 11.359375 10.574219 10.515625 C 10.011719 9.496094 10.195312 8.644531 11.121094 7.953125 C 11.285156 7.867188 11.449219 7.792969 11.617188 7.726562 Z M 11.617188 7.726562 "/><path style=" stroke:none;fill-rule:evenodd;fill:rgb(7.45098%,7.843137%,8.627451%);fill-opacity:1;" d="M 11.582031 12.132812 C 12.0625 12.101562 12.53125 12.152344 12.992188 12.289062 C 13.125 12.359375 13.210938 12.46875 13.253906 12.617188 C 13.265625 13.429688 13.277344 14.246094 13.289062 15.058594 C 13.320312 15.238281 13.417969 15.359375 13.589844 15.421875 C 14.53125 15.421875 15.472656 15.445312 16.410156 15.492188 C 16.589844 15.550781 16.65625 15.671875 16.605469 15.851562 C 16.511719 16.046875 16.375 16.214844 16.199219 16.351562 C 15.34375 16.9375 14.390625 17.246094 13.34375 17.28125 C 12.695312 17.304688 12.050781 17.304688 11.402344 17.28125 C 11.003906 17.261719 10.761719 17.058594 10.679688 16.679688 C 10.65625 15.324219 10.65625 13.96875 10.679688 12.617188 C 10.730469 12.5 10.808594 12.402344 10.910156 12.324219 C 11.128906 12.234375 11.351562 12.167969 11.582031 12.132812 Z M 11.582031 12.132812 "/><path style=" stroke:none;fill-rule:evenodd;fill:rgb(7.45098%,7.843137%,8.627451%);fill-opacity:1;" d="M 8.441406 13.167969 C 8.796875 13.160156 9.148438 13.167969 9.5 13.183594 C 9.621094 13.222656 9.710938 13.296875 9.765625 13.40625 C 9.789062 14.589844 9.789062 15.773438 9.765625 16.953125 C 9.71875 17.101562 9.621094 17.1875 9.464844 17.210938 C 9.085938 17.242188 8.710938 17.230469 8.335938 17.175781 C 8.027344 17.046875 7.835938 16.824219 7.753906 16.507812 C 7.730469 15.609375 7.730469 14.714844 7.753906 13.820312 C 7.886719 13.5 8.117188 13.285156 8.441406 13.167969 Z M 8.441406 13.167969 "/><path style=" stroke:none;fill-rule:evenodd;fill:rgb(7.45098%,7.843137%,8.627451%);fill-opacity:1;" d="M 11.441406 18.191406 C 11.816406 18.1875 12.191406 18.191406 12.566406 18.210938 C 12.894531 18.234375 13.125 18.390625 13.253906 18.675781 C 13.277344 20.5 13.277344 22.324219 13.253906 24.148438 C 13.21875 24.523438 13.046875 24.828125 12.742188 25.058594 C 12.265625 25.433594 11.726562 25.667969 11.121094 25.765625 C 10.886719 25.761719 10.742188 25.644531 10.679688 25.421875 C 10.65625 23.195312 10.65625 20.96875 10.679688 18.742188 C 10.71875 18.601562 10.792969 18.480469 10.910156 18.382812 C 11.082031 18.296875 11.257812 18.234375 11.441406 18.191406 Z M 11.441406 18.191406 "/></g></svg>`const pinSvgElement = parser.parseFromString(pinSvgString, "image/svg+xml").documentElement;const AdvancedMarkerElement = new google.maps.marker.AdvancedMarkerView({ position: {lat: {{ building.lat|json_encode|raw }}, lng: {{ building.lng|json_encode|raw }}}, map, content: pinSvgElement, title:({{ building.id|json_encode|raw }}).toString(), });}window.initMap = initMap;function showMap() {document.getElementById('map').style.filter = "none";document.getElementById('mapGoogle').style.display = "none";}</script>{% endblock %}{% endblock %}{% block javascripts %}<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script><script type="text/javascript">$(document).ready(function() {const $carousel = $('.slick-carousel');$carousel.slick({slidesToShow: 1,slidesToScroll: 1,autoplay: false,arrows: false,dots: true,responsive: [{breakpoint: 1024,settings: { slidesToShow: 1 }},{breakpoint: 768,settings: { slidesToShow: 1 }}]});$('.slick-custom-prev').on('click', function () {$carousel.slick('slickPrev');});$('.slick-custom-next').on('click', function () {$carousel.slick('slickNext');});});</script><script>function resize() {const fd= document.getElementById("firstDiv");if(screen.width<768){fd.parentElement.classList.remove("container","px-4","py-8");fd.parentElement.parentElement.classList.remove('m-auto');}else{fd.parentElement.classList.add("container","px-4","py-8");fd.parentElement.parentElement.classList.add('m-auto');}}$(document).ready(function () {resize()//const bfs = document.getElementById("buttonFileShow");//const fs = document.getElementById("fileShow");//bfs.addEventListener("click", function () {//fs.classList.toggle("hidden")//});const btn = document.getElementById("showMoreDescription");const desc = document.getElementById("description");btn.addEventListener("click", function () {desc.classList.toggle("line-clamp-[5]");const showText = btn.getAttribute("data-more");const hideText = btn.getAttribute("data-less");btn.textContent = desc.classList.contains("line-clamp-[5]") ? showText : hideText;});});window.onresize = resize;</script><script>function zoomImage(imageUrl){const zoomImageContainer = document.getElementById("zoomContainer")const zoomImage = document.getElementById("zoomImg")zoomImage.src = `{{ asset('images/files/') }}${imageUrl}`;zoomImageContainer.style.display = "flex";zoomImage.style.minWidth = "65%";}function closeZoomImage(){const zoomImageContainer = document.getElementById("zoomContainer")zoomImageContainer.style.display = "none";}</script><script>$(document).ready(function() {$('.like-button').click(function() {const imageId = $(this).data('image-id');$(this).toggleClass('fa-solid');$(this).toggleClass('fa-regular');// Send AJAX request to like the image$.ajax({type: 'POST',url: '{{ path('liked_building_action', {'id': 'IMAGE_ID'}) }}'.replace('IMAGE_ID', imageId),success: function(response) {if(!response['success']){window.location.href = '{{ path('app_login') }}';}}.bind(this),error: function() {// Handle AJAX error}});});});</script><script>function toggleSharePopup() {const sharePopup = document.getElementById('sharePopup');sharePopup.classList.toggle('hidden');}function copyToClipboard(text) {navigator.clipboard.writeText(text).then(function() {alert('Lien copié dans le presse-papiers');}, function(err) {console.error('Erreur lors de la copie du texte: ', err);});}</script>{% endblock %}