templates/building/index.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}Fiche
  4. {% endblock %}
  6. {% block body %}
  7.     <style>
  8.         .image-size {
  9.             width: 100%;
  10.             height: auto;
  11.             object-fit: cover;
  12.         }
  13.         .icon {
  14.             background-color: #ffcc00;
  15.             padding: 10px;
  16.             z-index: 0;
  17.             border-radius: 60px;
  18.             height: min-content;
  19.             width: min-content;
  20.         }
  21.         #map {
  22.             height: 400px;
  23.             width: 95%;
  24.             filter: blur(5px);
  25.             transition: filter 0.3s ease-in-out;
  26.         }
  27.         .bar {
  28.             padding: 5px;
  29.             padding-left: 50%;
  30.             border-radius: 60px;
  31.             font-weight: 700;
  32.             padding-right: 50%;
  33.         }
  35.         .GES-bar-A {
  36.             background-color: #a3dbfc;
  37.         }
  39.         .GES-bar-B {
  40.             background-color: #8ab5d2;
  41.         }
  43.         .GES-bar-C {
  44.             background-color: #7692b1; 
  45.         }
  47.         .GES-bar-D {
  48.             background-color: #5e708d;
  49.         }
  51.         .GES-bar-E {
  52.             background-color: #4d5272;
  53.         }
  55.         .GES-bar-F {
  56.             background-color: #393550; 
  57.         }
  59.         .GES-bar-G {
  60.             background-color: #291b35; 
  61.         }
  62.         
  63.         .GES-bar-V {
  64.             background-color:rgb(214, 210, 216); 
  65.             color: white;
  66.         }
  67.         
  68.         .DPE-bar-A {
  69.             background-color: #4caf50;
  70.         }
  72.         .DPE-bar-B {
  73.             background-color: #8bc34a;
  74.         }
  76.         .DPE-bar-C {
  77.             background-color: #ffeb3b;
  78.         }
  80.         .DPE-bar-D {
  81.             background-color: #ffc107;
  82.         }
  84.         .DPE-bar-E {
  85.             background-color: #ff5722;
  86.         }
  88.         .DPE-bar-F {
  89.             background-color: #f44336;
  90.         }
  92.         .DPE-bar-G {
  93.             background-color: #b71c1c;
  94.         }
  95.         
  96.         .DPE-bar-V {
  97.             background-color:rgb(214, 210, 216); 
  98.             color: white;
  99.         }
  101.         .slick-prev, .slick-next {
  102.             background-color: transparent;
  103.             border-radius: 0;
  104.             padding: 5;
  105.         }
  107.         .slick-prev:before {
  108.             content: '←';
  109.             font-size: 30px;
  110.             color: black;
  111.             margin-right: 15px;
  112.         }
  114.         .slick-next:before {
  115.             content: '→';
  116.             font-size: 30px;
  117.             color: black;
  118.         }
  120.         .slick-carousel .slick-slide img {
  121.             width: 100%;
  122.             height: 500px;
  123.             object-fit: cover;
  124.             display: block;
  125.             margin: 0 auto;
  126.         }
  128.         #zoomContainer {
  129.             position: fixed;
  130.             top: 0;
  131.             left: 0;
  132.             width: 100vw;
  133.             height: 100vh;
  134.             background-size: cover;
  135.             background-position: center;
  136.             background-repeat: no-repeat;
  137.             z-index: 9999;
  138.             display: none;
  139.             justify-content: center;
  140.             align-items: center;
  141.             background-color: rgba(0, 0, 0, 0.8);
  142.         }
  145.         .close-button {
  146.             position: absolute;
  147.             top: 0px;
  148.             right: 175px;
  149.             background: transparent;
  150.             border: none;
  151.             font-size: 4rem;
  152.             font-weight: bold;
  153.             color: white;
  154.             cursor: pointer;
  155.             z-index: 10000;
  156.         }
  158.         .close-button:hover {
  159.             color: red;
  160.         }
  163.     </style>
  164.     <script src="https://unpkg.com/flowbite@1.4.0/dist/flowbite.js"></script>
  165.     <div id='firstDiv' class="">
  167.         <hr class="hidden md:block my-6 border-gray-300">
  168.         <div class="relative flex items-center justify-between w-full px-4">
  169.             <div class="md:w-fit">
  170.                 <a href="{{ app.request.headers.get('referer') ?: path('home') }}"
  171.                    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">
  172.                     <i class="fa-solid fa-arrow-left text-black"></i>
  173.                     <span>{{ 'button.back'|trans }}</span>
  174.                 </a>
  175.             </div>
  177.             <div class="md:w-fit">
  178.                 {% if allow %}
  179.                     <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">
  180.                         <i class="fa-solid fa-pencil text-black" aria-hidden="true"></i>
  181.                         <span class="hidden md:block ml-2">{{ 'button.modif'|trans }}</span>
  182.                     </a>
  183.                 {% endif %}
  184.             </div>
  185.         </div>
  187.         <div class="md:hidden  dropdown z-[100000] absolute top-2 right-2 content-center">
  188.             <button class="dropdown-toggle d-block d-sm-none" type="button" data-bs-toggle="dropdown" aria-expanded="false">
  189.                     <i class="fa-solid fa-flag"></i>
  190.             </button>
  192.             <ul style='text-align: -webkit-center; --bs-dropdown-min-width: 3rem !important;' class="  dropdown-menu content-center">
  193.             {% if app.request.attributes.get('_route') is not null %}
  194.                     <li class=''>
  195.                         <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'})) }}">
  196.                         {# &#x1F1EC;&#x1F1E7; #}
  197.                         </a>
  198.                     </li>
  199.                     <li  class="mt-[2px]">
  200.                         <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'})) }}">
  201.                         {# &#x1F1EB;&#x1F1F7; #}
  202.                         </a>
  203.                     </li>
  204.             {% endif %}
  205.             </ul>
  206.         </div>
  207.         <hr class="hidden md:block my-6 border-gray-300">
  208.         
  209.         {% if building.hasReservation %}
  210.             <p style="background-color:rgb(147, 173, 218); color: #0064ff; padding: 10px; display: inline-block; border-radius: 8px; margin-bottom: 10px;">
  211.                 {{ 'building.listingOnHold'|trans }}
  212.             </p>
  213.         {% endif %}
  215.         {# Image Mobile #}
  216.             <div class="slideshow-container">
  217.                 <div class="slideshow block md:hidden">
  218.                     {% if building.buildingDocuments %}
  219.                             <div id="default-carousel" class="relative z-0" data-carousel="static">
  220.                                 {# Carousel wrapper #} 
  221.                                 <div  class="overflow-hidden relative h-[14rem] md:h-[10rem] lg:h-[14rem]">
  222.                                     <!-- Item 1 -->
  223.                                     
  224.                                     {% for bd in building.buildingDocuments  %}
  225.                                             <a class="building-link ">
  226.                                                 <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>
  227.                                             </a>
  228.                                             {% if building.propertyManager.id == 127 %}
  229.                                                 <img src="{{ asset('/images/site/bandeau-pro.png') }}" alt="Bandeau pro" class="absolute bottom-2 right-2 opacity-90 !w-24 !h-10 max-w-none z-50">
  230.                                             {% endif %}
  231.                                     {% endfor %}
  232.                                 </div>
  233.                                 {# Slider indicators #} 
  234.                                 <div class="flex absolute border-black bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2">
  235.                                     {% for document in building.buildingDocuments %}
  236.                                             <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>
  237.                                     {% endfor %}
  238.                                 </div>
  239.                                 {# Slider controls #} 
  240.                                 {% if building.buildingDocuments|length > 1 %}
  241.                                         <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>
  242.                                             <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">
  243.                                                 <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>
  244.                                                 <span class="hidden">Previous</span>
  245.                                             </span>
  246.                                         </button>
  247.                                         <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>
  248.                                             <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">
  249.                                                 <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>
  250.                                                 <span class="hidden">Next</span>
  251.                                             </span>
  252.                                         </button>
  253.                                 {% endif %}
  254.                                 
  255.                             </div>
  256.                     {% endif %}
  257.                 </div>
  258.             </div>
  259.         {# end #}
  261.         <div class='container '>
  262.             <div class="flex justify-between items-center">
  263.                 <div >
  264.                     <h2 class="text-2xl font-bold">{{  building.title}}</h2>
  265.                     <h2 class="text-2xl font-bold md:text-nowrap">{{  building.cityEntity.city}}, {{  building.cityEntity.country}}</h2>
  266.                 </div>
  267.                 <div class="flex items-center">
  268.                     <a class="flex items-center justify-center p-3 cursor-pointer rounded-lg">
  269.                         {% if liked %}
  270.                             <h2 class="hidden md:block">{{ 'accueil.retirerfav'|trans }}</h2>
  271.                             <i class="text-[#ffcc00] fa-solid fa-heart md:pl-3 fa-2x like-button" data-image-id="{{ building.id }}"></i>
  272.                         {% else %}
  273.                             <h2 class="hidden md:block">{{ 'accueil.addfav'|trans }}</h2>
  274.                             <i class="text-[#ffcc00] fa-regular fa-heart md:pl-3 fa-2x like-button" data-image-id="{{ building.id }}"></i>
  275.                         {% endif %}
  276.                     </a>
  277.                     <a class="flex items-center justify-center p-3 cursor-pointer rounded-lg" onclick="toggleSharePopup()">
  278.                         <h2 class="hidden md:block">{{ 'accueil.share'|trans }}</h2>
  279.                         <img src="{{ asset('/images/partager-jaune.png') }}" alt="Partager" class="md:pl-3 w-10 h-8">
  280.                     </a>
  281.                 </div>
  282.             </div>
  283.             
  284.             <div class="relative mt-6 hidden md:block">
  285.                 <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">
  286.                     <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">
  287.                         <svg class="w-5 h-5 text-white sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  288.                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
  289.                         </svg>
  290.                         <span class="hidden">Previous</span>
  291.                     </span>
  292.                 </button>
  294.                 <div class="slick-carousel">
  295.                     {% if building.buildingDocuments %}
  296.                         {% if building.complexProperty %}
  297.                             {% for document in building.buildingDocuments %}
  298.                                 {% if document.name starts with 'imagesComplexe' %}
  299.                                     <div class="relative">
  300.                                         <img onclick="zoomImage('{{ document.imageFile }}')" src="{{ asset('/images/files/') }}{{ document.imageFile }}" alt="">
  301.                                         {% if building.propertyManager.id == 127 %}
  302.                                             <img src="{{ asset('/images/site/bandeau-pro.png') }}" alt="Bandeau pro" class="absolute bottom-2 right-2 opacity-90 !w-24 !h-10 max-w-none z-50">
  303.                                         {% endif %}
  304.                                     </div>
  305.                                 {% endif %}
  306.                             {% endfor %}
  307.                         {% else %}
  308.                             {% for document in building.buildingDocuments %}
  309.                                 {% if document.name == "base" %}
  310.                                     <div class="relative">
  311.                                         <img onclick="zoomImage('{{ document.imageFile }}')" class="rounded-tl-lg image-size" src="{{ asset('/images/files/') }}{{ document.imageFile }}" alt="">
  312.                                         {% if building.propertyManager.id == 127 %}
  313.                                             <img src="{{ asset('/images/site/bandeau-pro.png') }}" alt="Bandeau pro" class="absolute bottom-2 right-2 opacity-90 !w-24 !h-10 max-w-none z-50">
  314.                                         {% endif %}
  315.                                     </div>
  316.                                 {% endif %}
  317.                             {% endfor %}
  318.                             {% for document in building.buildingDocuments %}
  319.                                 {% if document.name != "base" and document.name in ["file0","file1","file2", "file3", "file4", "file5", "file6", "file7", "file8"] %}
  320.                                     <div class="relative">
  321.                                         <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="">
  322.                                         {% if building.propertyManager.id == 127 %}
  323.                                             <img src="{{ asset('/images/site/bandeau-pro.png') }}" alt="Bandeau pro" class="absolute bottom-2 right-2 opacity-90 !w-24 !h-10 max-w-none z-50">
  324.                                         {% endif %}
  325.                                     </div>
  326.                                 {% endif %}
  327.                             {% endfor %}
  328.                         {% endif %}
  329.                     {% endif %}
  330.                 </div>
  332.                 <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">
  333.                     <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">
  334.                         <svg class="w-5 h-5 text-white sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  335.                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
  336.                         </svg>
  337.                         <span class="hidden">Next</span>
  338.                     </span>
  339.                 </button>
  340.             </div>
  342.                 <br>
  343.                 <div id="fileShow" class="hidden grid grid-cols-4 gap-4">
  344.                     {% if building.buildingDocuments|length > 4 %}    
  345.                         {%  for  i in  5..8 %}
  346.                             {% for document in building.buildingDocuments %}
  347.                                 
  348.                                 {% if ("file" ~ i) == document.name  %}
  349.                                     <div class="hidden md:block ">
  350.                                         <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="">
  351.                                     </div>
  352.                                 {% endif %}
  353.                             {% endfor %}
  354.                             
  355.                         {% endfor %}
  356.                     {% else %}
  357.                         <div class="md-5">
  358.                             <hr class="my-6 border-gray-300">
  359.                             <h2 class="text-2xl font-bold"> {{ 'building.noImage'|trans }}</h2>
  360.                             <hr class="my-6 border-gray-300">
  361.                         </div>
  362.                     {% endif %}
  363.                 </div>
  364.             </div>
  365.             {% if building.complexProperty %}
  366.                 <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>
  367.             {% else %}
  368.                 <h2 class="hidden md:block text-2xl font-bold md:text-nowrap">{{ building.type|trans|capitalize  }}</h2>
  369.             {% endif %}
  370.             {% if building.complexProperty %}
  371.                 <h2 class="hidden md:block text-2xl font-bold md:text-nowrap">{{ 'accueil.loyer'|trans }} {{lowestRent /100}} euros</h2>
  372.             {% else %}
  373.                 <h2 class="hidden md:block text-2xl font-bold md:text-nowrap">{{ 'accueil.loyer'|trans }} {{ building.rent /100 }} euros</h2>    
  374.             {% endif %}
  375.             <div class="md:mt-10">
  376.                 <div class="md:grid md:grid-cols-4 md:gap-4 items-start">
  377.                     <div class="col-span-3">
  378.                         <div class="flex flex-col mb-6">
  380.                             <div class="mt-3 md:text-center">
  381.                                 <h3 class="  md:hidden text-lg text-gray-500">{{ building.cityEntity.city ~ ", " ~ building.cityEntity.country }}</h3>
  382.                                 {# <h3 class="hidden md:block text-lg text-gray-500">{{ 'accueil.add'|trans }}{{ building.createdAt|date('d/m/y H:i') }}</h3> #}
  383.                             </div>
  384.                             
  385.                         </div>
  386.                         <hr class="my-6 border-gray-300">
  387.                         <h1 class="text-2xl font-bold">{{ 'accueil.description'|trans }}</h1>
  388.                         <div style="width: 95%" class="my-6">
  389.                             {% if building.description|length <= 400 %}
  390.                                 <p id="description" class="">
  391.                                     {{ building.description|nl2br }}
  392.                                 </p> <br>
  393.                             {% else %}
  394.                                 <p id="description" class="line-clamp-[5]">
  395.                                     {{ building.description|nl2br }}
  396.                                 </p> <br>
  397.                             {% endif %}    
  398.                             {% if building.description|length > 400 or building.description|split("\n")|length > 5 %}
  399.                                 <button id="showMoreDescription"
  400.                                     class="underline font-bold cursor-pointer"
  401.                                     data-more="{{ 'building.savoirplus'|trans }}"
  402.                                     data-less="{{ 'building.savoirmoins'|trans }}">
  403.                                     {{ 'building.savoirplus'|trans }}
  404.                                 </button>
  405.                             {% endif %}            
  406.                             <div class="mt-6">                            
  407.                                 {% for document in building.buildingDocuments %}
  408.                                     {% if document.name == "houseRules" %}
  410.                                             <h1 class="mb-3 text-2xl font-bold">{{ 'building.houseRules'|trans }}</h1>
  412.                                             {% if document.imageFile|split('.')[1] == "pdf" %}
  413.                                                 <a class="" target="_blank" href="{{ asset('/images/files/' ~ document.imageFile) }}">
  414.                                                                 <img class="img-fluid mx-auto justify-center" style="max-width: 50px; max-height: 50px"
  415.                                                                 src="{{ asset('/images/site/pdf.png') }}" alt="">
  416.                                                             </a>
  417.                                             {% else %}
  418.                                                 <a class="" target="_blank" href="{{ asset('/images/files/' ~ document.imageFile) }}">
  419.                                                 <img class="w-25 rounded" src="{{ asset('images/files/') }}{{ document.imageFile }}" alt="">
  420.                                                 </a>
  421.                                             {% endif %}
  422.                                     {% endif %}
  423.                                 {% endfor %}
  424.                             </div>
  425.                         </div>
  427.                         <hr class="my-6 border-gray-300">
  428.                         {# {% if building.buildingEquipment is not empty %}
  429.                             <div class="my-10">
  430.                                 <h1 class="text-2xl font-bold">{{ 'accueil.equipement'|trans }}</h1>
  431.                                 <div class="grid grid-cols-2 gap-2 my-6 text-sm">
  432.                                     {% for equipment in building.buildingEquipment %}
  433.                                         <div class="flex items-center">
  434.                                             <div>
  435.                                                 <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>
  436.                                             </div>
  437.                                             <div>
  438.                                                 <span>{{ equipment.name|trans }}</span>
  439.                                             </div>
  440.                                         </div>
  441.                                     {% endfor %}
  442.                                 </div>
  443.                             </div>
  444.                         {% endif %} #}
  445.                         {% if building.interior is not empty %}
  446.                             <div class="my-10">
  447.                                 <h1 class="text-2xl font-bold">{{ 'accueil.equipementInterior'|trans }}</h1>
  448.                                 <div class="grid grid-cols-2 gap-2 my-6 text-sm">
  449.                                     {% for equipment in building.interior %}
  450.                                         <div class="flex items-center">
  451.                                             <div>
  452.                                                 <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>
  453.                                             </div>
  454.                                             <div>
  455.                                                 <span>{{equipment|trans }}</span>
  456.                                             </div>
  457.                                         </div>
  458.                                     {% endfor %}
  459.                                 </div>
  460.                             </div>
  461.                         {% endif %}
  462.                         {% if building.exterior is not empty %}
  463.                             <div class="my-10">
  464.                                 <h1 class="text-2xl font-bold">{{ 'accueil.equipementExterior'|trans }}</h1>
  465.                                 <div class="grid grid-cols-2 gap-2 my-6 text-sm">
  466.                                     {% for equipment in building.exterior %}
  467.                                         <div class="flex items-center">
  468.                                             <div>
  469.                                                 <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>
  470.                                             </div>
  471.                                             <div>
  472.                                                 <span>{{ equipment|trans }}</span>
  473.                                             </div>
  474.                                         </div>
  475.                                     {% endfor %}
  476.                                 </div>
  477.                             </div>
  478.                         {% endif %}
  479.                         <hr class=" md:hidden my-6 border-gray-300">
  480.                         <div class=" md:hidden my-10">
  481.                             <div class="grid grid-cols-2 gap-2 text-sm">
  482.                                 
  483.                                 <div class="justify-center items-center h-full content-center">
  484.                                     <h3 class="text-2xl mb-2 text-base"><b>{{ building.rent / 100 }}
  485.                                         € </b>{{ 'accueil.parmois'|trans }}</h3>
  486.                                         <span class="text-sm">({{ 'building.dont'|trans }}{{ building.expenses / 100 }}{{ 'building.charges'|trans }})</span>
  487.                                     
  488.                                     {% if building.dateStartAt is not null %}
  489.                                         <p class="mt-6 ">{{'building.dispo'|trans}}
  490.                                             <span id="dateStartAt">{{ building.dateStartAt|date('d/m/Y') }}</span></p>
  491.                                     {% else %}
  492.                                         <p>{{'building.nodispo'|trans}}</p>
  493.                                     {% endif %}
  494.                                     {% if building.isAidEligible %}
  495.                                         <div class="mt-6 ">
  496.                                             <span class="font-bold text-xs leading-[1] ">{{ 'building.cafeligible'|trans }}</span>
  497.                                         </div>
  498.                                     {% endif %}
  499.                                 </div>
  500.                                 <div class="justify-center items-center h-full content-center">
  501.                                     {% if app.user %}
  502.                                         {% if "ROLE_TENANT" in app.user.roles %}
  503.                                             {% if app.user.isRegistrationFinalized %}
  504.                                                 {% if building.isActive %}
  505.                                                     <div class="d-flex justify-content-center flex flex-wrap justify-between items-center">
  506.                                                         <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">
  507.                                                             <i class="fa-solid fa-file text-white"></i>
  508.                                                             <span class="inline">{{ 'building.deposerdemande'|trans }}</span>
  509.                                                         </a>
  510.                                                     </div>
  511.                                                     
  512.                                                 {% else %}
  513.                                                     <div class="d-flex justify-content-center flex flex-wrap justify-between items-center">
  514.                                                         <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">
  515.                                                             <i class="fa-solid fa-xmark text-white"></i>
  516.                                                             <span class="inline">{{ 'building.nondispo'|trans }}</span>
  517.                                                         </a>
  518.                                                     </div>
  519.                                                 {% endif %}
  520.                                                     <div class="mt-6">
  521.                                                         
  522.                                                         {# <a href="{{ path('building_reporting',{id : building.id}) }}" class="text-gray-400 w-full font-medium rounded-md text-sm text-center">
  523.                                                             <p class="inline-block">
  524.                                                                 <img src="{{ asset('/images/icons/Signaler.png') }}" height="30px" width="30px" class="fa-sharp fa-solid fa-door-open p-1 rounded-lg"/>
  525.                                                                 <span class="underline">{{ 'accueil.signalernannonce'|trans }}</span>
  526.                                                             </p>
  527.                                                         </a> #}
  528.                                                     </div>
  529.                                             {% else %}
  530.                                                 <div class="d-flex justify-content-center flex flex-wrap justify-between items-center">
  531.                                                     <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">
  532.                                                         <span class="inline">{{ 'building.deposerdemande'|trans }}</span>
  533.                                                     </a>
  534.                                                 </div>
  535.                                             {% endif %}
  536.                                         {% endif %}
  537.                                     {% else %}
  538.                                         <div class="d-flex justify-content-center flex flex-wrap justify-between items-center">
  539.                                                 <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">
  540.                                                     <span class="inline">{{ 'building.deposerdemande'|trans }}</span>
  541.                                                 </button>
  542.                                             </div>
  543.                                     {% endif %}
  544.                                     <a href="{{ path('building_reporting',{id : building.id}) }}" class=" text-gray-400 w-full font-medium rounded-md text-sm text-center">
  545.                                         <p>
  546.                                             <span class="underline">{{ 'accueil.signalernannonce'|trans }}</span>
  547.                                         </p>
  548.                                     </a>
  549.                                 </div>
  550.                             </div>
  551.                         </div>
  552.                     {#    <hr class="my-6 border-gray-300">
  553.                         <p class="container my-10">
  554.                             <img class="h-12" src="{{ asset('/images/site/garantme.png') }}" alt="">
  555.                         </p>
  556.                         <p>
  557.                             {{ 'accueil.garantme1'|trans }}<br>
  558.                             {{ 'accueil.garantme2'|trans }}
  559.                             <br> <br>
  560.                             <div class="mt-6">
  561.                                 <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">
  562.                                     <span>{{ 'accueil.more'|trans }}</span>
  563.                                 </button>
  564.                             </div>
  565.                             <div id="garant-me-text" class="hidden">
  566.                                 <span class="font-bold">{{ 'accueil.aquoicasert'|trans }}</span>
  567.                                 <br>
  569.                                 <ul>
  570.                                     <li>
  571.                                         {{ 'accueil.gracea'|trans }}<br>
  572.                                     </li>
  573.                                     <li>
  574.                                         {{ 'accueil.gracea2'|trans }}<br>
  575.                                     </li>
  576.                                 </ul>
  578.                                 <br>
  580.                                 <span class="font-bold">{{ 'accueil.commentfaire'|trans }}</span>
  581.                                 <br>
  582.                                 {{ 'accueil.inscription'|trans }}
  584.                                 <br>
  585.                                 <br>
  587.                                 <span class="font-bold">{{ 'accueil.howmuch'|trans }}</span>
  588.                                 <br>
  589.                                 <br>
  590.                                 {{ 'accueil.explication1'|trans }}<br>
  591.                                 <br>
  592.                                 {{ 'accueil.explication2'|trans }}<br>
  593.                                 <br>
  594.                                 {{ 'accueil.explication3'|trans }}<br><br>
  595.                             </div>
  596.                         </p>
  597.                         #}                        
  598.                         <div id="zoomContainer" style="display: none;">
  599.                             <img id="zoomImg" src"" class="" alt="ImageZoom" style="max-width: 100%; max-height: 100%;">
  600.                             <button onclick="closeZoomImage()" id="closeButton" class="close-button">&times;</button>
  601.                         </div>
  603.                         {% if building.complexProperty %}
  604.                         <p class="text-2xl m-2">
  605.                             <strong>
  606.                                 {{ buildingsInComplex|length > 1 
  607.                                     ? 'accueil.rooms'|trans 
  608.                                     : 'accueil.room'|trans 
  609.                                 }}
  610.                             </strong>
  611.                         </p>
  612.                         <div style="width: 95%" class="relative border border-gray-300 hover:border-blue-500 shadow-2xl rounded p-6">
  613.                             <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
  614.                                 {% for loopIndex, building in buildingsInComplex %}
  615.                                 {% if loopIndex % 4 == 0 and loopIndex != 0 %}
  616.                             </div>
  617.                             <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
  618.                                 {% endif %}
  619.                                 <div class="w-full text-center">
  620.                                     {% if building.buildingDocuments is not empty %}
  621.                                     {% set filteredDocuments = building.buildingDocuments|filter(document => document.name starts with 'file' or document.name starts with 'base' or document.name starts with 'cover') %}
  622.                                     {% if filteredDocuments is not empty %}
  623.                                     <div id="carousel-{{ building.id }}" class="relative z-0 w-full" data-carousel="static">
  624.                                         <div class="overflow-hidden relative h-[20rem] md:h-[10rem] lg:h-[20rem] flex mt-10">
  625.                                             {% for document in filteredDocuments %}
  626.                                             {% if document.imageFile %}
  627.                                             <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>
  628.                                             {% endif %}
  629.                                             {% endfor %}
  630.                                         </div>
  631.                                         <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>
  632.                                             <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">
  633.                                                 <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>
  634.                                                 <span class="hidden">Previous</span>
  635.                                             </span>
  636.                                         </button>
  637.                                         <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>
  638.                                             <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">
  639.                                                 <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>
  640.                                                 <span class="hidden">Next</span>
  641.                                             </span>
  642.                                         </button>
  643.                                         <div class="flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2">
  644.                                             {% for document in filteredDocuments %}
  645.                                             {% if document.imageFile %}
  646.                                             <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>
  647.                                             {% endif %}
  648.                                             {% endfor %}
  649.                                         </div>
  650.                                     </div>
  651.                                     {% else %}
  652.                                     <p>No images</p>
  653.                                     {% endif %}
  654.                                     {% else %}
  655.                                     <p>No docu
  656.                                     0:03 / 0:24
  657.                                     ments available for this building.</p>
  658.                                     {% endif %}
  659.                                     <div class="mb-4">
  660.                                         <p class="text-2xl m-2">
  661.                                             <strong>{{ 'accueil.room'|trans }} {{ loop.index }}</strong>
  662.                                         </p>
  663.                                         <p>
  664.                                             <strong>{{ 'accueil.superfi'|trans }}</strong> {{ building.surfaceBedroom }} m²
  665.                                         </p>
  666.                                         {% if building.propertyManager.id == 527  and building.discountPrice > 0%}
  667.                                             <p>
  668.                                                 <strong>{{ 'accueil.loyermen'|trans }}</strong> <s>{{ building.rent / 100 }} euros</s>
  669.                                             </p>
  670.                                             <p>
  671.                                                 <strong>{{ 'accueil.discountPriceRent'|trans }}</strong> <span style="Color: red">{{ building.discountPrice}} euros</span>
  672.                                             </p>
  673.                                             <p>
  674.                                                 <strong>{{ 'accueil.dateEndPromo'|trans }}</strong> {{ building.dateEndPromo|date('d/m/Y')}}
  675.                                             </p>
  676.                                         {% else %}
  677.                                             <p>
  678.                                                 <strong>{{ 'accueil.loyermen'|trans }}</strong> {{ building.rent / 100 }} euros
  679.                                             </p>
  680.                                         {% endif %}
  681.                                         <p>
  682.                                             <strong>{{ 'accueil.privbath'|trans }}</strong> {{ building.privateBathroom ? 'Oui'|trans : 'Non'|trans }}
  683.                                         </p>
  684.                                         <p>
  685.                                             <strong>{{ 'accueil.bed'|trans }}</strong> {{ (building.typeBed|lower == 'lit simple' or building.typeBed|lower == 'single bed') ? 'accueil.bedSimple'|trans : 'accueil.bedDouble'|trans }}
  686.                                         </p>
  687.                                         <p>
  688.                                             {% if building.isActive %}
  689.                                                 <strong>{{ 'accueil.startloc'|trans }}</strong> {{ building.dateStartAt|date('d/m/Y') }}
  690.                                             {% else %}
  691.                                                 &nbsp;
  692.                                             {% endif %}
  693.                                         </p>
  694.                                     </div>
  695.                                     {% if app.user %}
  696.                                     {% if "ROLE_TENANT" in app.user.roles %}
  697.                                     {% if app.user.isRegistrationFinalized %}
  698.                                     {% if building.isActive %}
  699.                                     <div class="d-flex justify-content-center flex flex-wrap justify-between items-center m-3.1">
  700.                                         <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">
  701.                                             <span class="inline">{{ 'building.deposerdemandeChambre'|trans }}</span>
  702.                                         </a>
  703.                                     </div>
  704.                                     {% else %}
  705.                                     <div class="d-flex justify-content-center flex flex-wrap justify-between items-center  mt-4">
  706.                                         <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">
  707.                                             <i class="fa-solid fa-xmark text-white"></i>
  708.                                             <span class="inline">{{ 'building.nondispo'|trans }}</span>
  709.                                         </a>
  710.                                     </div>
  711.                                     {% endif %}
  712.                                     {% else %}
  713.                                     <div class="d-flex justify-content-center flex flex-wrap justify-between items-center m-3.1">
  714.                                         <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">
  715.                                             <span class="inline">{{ 'building.deposerdemande'|trans }}</span>
  716.                                         </a>
  717.                                     </div>
  718.                                     {% endif %}
  719.                                     {% endif %}
  720.                                     {% else %}
  721.                                     <div class="d-flex justify-content-center flex flex-wrap justify-between items-center m-3.1">
  722.                                         <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">
  723.                                             <span class="inline">{{ 'building.deposerdemande'|trans }}</span>
  724.                                         </button>
  725.                                     </div>
  726.                                     {% endif %}
  727.                                 </div>
  728.                                 {% endfor %}
  729.                             </div>
  730.                             {% if buildingsInComplex|length % 4 != 0 %}
  731.                             <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"></div>
  732.                             {% endif %}
  733.                         </div>
  734.                         {% endif %}
  735.                             {% if building and not building.hideAddress == true %}
  736.                                 <div class="my-10">
  737.                                     <h1 class="text-2xl font-bold">{{ 'accueil.whereis'|trans }}</h1>
  738.                                     <h3 class="text-sm text-gray-500 mt-2">{{ building.streetNumber }} {{ building.street }} {{ building.cityEntity.city }} {{ building.cityEntity.postalCode }},{{ building.cityEntity.country }}</h3>
  739.                                     {# <div id="redirectMap" style="display: none;" class="bg-[#ffcc00] 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"></div> #}
  740.                                     <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">
  741.                                     <div id="addressDistance" style="display: none; margin-top: 15px"></div>
  742.                                     
  743.                                     <div class=" relative flex mx-auto text-center justify-center mt-5" style="width: 95%">
  744.                                         {% if  building.lat !=null or building.lng !=null %}
  745.                                             <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">
  746.                                                 <i class="fa-solid fa-map-pin"></i>
  747.                                                 {{ 'accueil.affichercarte'|trans }}
  748.                                             </button>
  749.                                             <div id="map"></div>
  750.                                         {% else %}
  751.                                                 <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">
  752.                                                 <i class="fa-solid fa-map-pin"></i>
  753.                                                 {{ 'accueil.mapNotFound'|trans }}
  754.                                             </button>
  755.                                         {% endif %}
  756.                                     </div>
  757.                                 </div>
  758.                             {% endif %}
  759.                     </div>
  760.                     
  761.                     <div class="hidden md:block col-span-4 sm:col-span-1 shadow-2xl rounded p-6 h-auto w-full">
  762.                         <span class="text-2xl font-bold">{{ 'accueil.detail'|trans }}</span>
  764.                         <div class="flex flex-col justify-between">
  765.                             <div class="mt-2">
  766.                                 <span><strong>{{ 'accueil.ref'|trans }}:</strong> {{building.RefBuilding}}</span>
  767.                             </div>
  768.                             <div class="mt-2">
  769.                                 <span><strong>{{ 'accueil.city'|trans }}:</strong> {{  building.cityEntity.city}}, {{  building.cityEntity.country}}</span>
  770.                             </div>
  771.                             {# {% if building.complexProperty %}
  772.                             <div class="mt-2">
  773.                                 <span><strong>{{ "Chambre n°" }}{{  building.bedroomNumber}}</strong></span>
  774.                             </div>
  775.                             {% endif %} #}
  777.                             {% if building.complexProperty %}
  778.                                 <div class="mt-2">
  779.                                     <span><strong>{{ 'accueil.loyer'|trans }}</strong> {{lowestRent /100}}€</span>
  780.                                 </div>
  781.                                 
  782.                                 {% if building.propertyManager.id == 527 %}
  783.                                     <div class="mt-2">
  784.                                         <span><strong>{{ 'accueil.chargesJoivy'|trans }}</strong></span>
  785.                                     </div>
  786.                                     <div class="mt-2">
  787.                                         <span><strong>{{ 'accueil.chargesJoivyDescription'|trans }}</strong></span>
  788.                                     </div>
  789.                                 {% else %}
  790.                                     <div class="mt-2">
  791.                                         <span><strong>{{ 'accueil.charge'|trans }}</strong> </br> <span>{{ building.expenses / 100 }}€</span></span>
  792.                                     </div>
  793.                                 {% endif %}
  794.     
  795.                                 {% if building.leaseDraftingFees > 0 %}
  796.                                         <div class="mt-2">
  797.                                             <h3 class="text-2xl text-base"><b>{{ 'rental_conditions.leaseDraftingFees'|trans }}: </b>{{ building.leaseDraftingFees}}€ </h3>
  798.                                         </div>
  799.                                 {% endif %}    
  800.                                     
  801.                             {% else %}
  802.                                 <div>
  803.                                     <div class="mt-2">
  804.                                         <h3 class="text-2xl text-base"><b>{{ building.rent / 100 }}€ </b>{{ 'accueil.parmois'|trans }}</h3>
  805.                                         <span class="text-sm">({{ 'building.dont'|trans }}{{ building.expenses / 100 }}{{ 'building.charges'|trans }})</span>
  806.                                     </div>
  807.                                     {% if building.leaseDraftingFees > 0 %}
  808.                                         <div class="mt-2">
  809.                                             <h3 class="text-2xl text-base"><b>{{ 'rental_conditions.leaseDraftingFees'|trans }}: </b>{{ building.leaseDraftingFees}}€ </h3>
  810.                                         </div>
  811.                                     {% endif %}    
  812.                                     {# {% if building.expenses != null %}
  813.                                         <div>
  814.                                             <div class="grid grid-cols-2 gap-2 my-6">
  815.                                                 {% if building.expensesDescription is not empty %}
  816.                                                     <span class="text-sm">{{ 'building.comprennent'|trans }}</span>
  817.                                                     <br>
  818.                                                     {% for expense in building.expensesDescription|split(',') %}
  819.                                                         <div class="flex items-center">
  820.                                                             <div>
  821.                                                                 <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>
  822.                                                             </div>
  823.                                                             <div>
  824.                                                                 <span>{{ expense|trans }}</span>
  825.                                                             </div>
  826.                                                         </div>
  827.                                                     {% endfor %}
  828.                                                 {% endif %}
  829.                                             </div>
  830.                                         </div>
  831.                                     {% endif %} #}
  832.                                 </div>
  833.                             {% endif %}
  834.                             
  835.                             <div class="mt-2">
  836.                                 <span><strong>{{ 'admin.surface'|trans }}:</strong> {{building.surface}} m²</span>
  837.                             </div>
  838.                             
  839.                                 {% if building.isFurniture %}
  840.                                     <div class="mt-2">
  841.                                         <span><strong>{{ 'building.FurnishedAccommodation'|trans }}</strong></span>
  842.                                     </div>
  843.                                 {% endif %}
  844.                                 
  845.                                 {% if building.isFloor %}
  846.                                     {% if building.floor == "etage.entresol" or building.floor == "Entresol" %}
  847.                                         <span class="mt-2"><strong>{{ 'etage.entresol'|trans }}</strong></span>
  848.                                     {% elseif building.floor == "etage.rez" or building.floor == "Rez-de-chaussée" %}
  849.                                         <span class="mt-2"><strong>{{ 'etage.rez'|trans }}</strong></span>
  850.                                     {% elseif building.floor == "etage.dernier"%}
  851.                                         <span class="mt-2"><strong>{{ 'etage.dernier'|trans }}</strong></span>
  852.                                     {% elseif building.floor starts with "etage.etage" %}
  853.                                         <span class="mt-2"><strong>{{ building.floor|trans }}</strong></span>
  854.                                     {% else %}
  855.                                         <span class="mt-2"><strong>{{ ('etage.etage' ~ (building.floor|split('eme')[0]))|trans }}</strong></span>
  856.                                     {% endif %}
  857.                                 {% else %}
  858.                                     <div class="mt-2">
  859.                                         <span><strong>{{ 'building.notFloor'|trans }}</strong></span>
  860.                                     </div>
  861.                                 {% endif %}
  862.                                 
  863.                                 {% if building.complexProperty %}
  864.                                     {% if building.privateBathroom %}
  865.                                         <div class="mt-2">
  866.                                             <span><strong>{{ 'building.privateBathroom'|trans }}</strong></span>
  867.                                         </div>
  868.                                     {% else %}
  869.                                         <div class="mt-2">
  870.                                             <span><strong>{{ 'building.notPrivateBathroom'|trans }}</strong></span>
  871.                                         </div>
  872.                                     {% endif %}
  873.                                 {% else %}
  874.                                     {% if building.bathrooms >0 %}
  875.                                         <div class="mt-2">
  876.                                             <span><strong>{{ building.bathrooms }} {{ 'building.sdb'|trans }}</strong></span>
  877.                                         </div>
  878.                                     {% endif %}
  879.                                 {% endif %}
  881.                                 {% if building.complexProperty %}
  882.                                     <div class="mt-2">
  883.                                         <span><strong>{{'building.dispo'|trans}} </strong> <span> {% if earlyLocation %}{{ earlyLocation|date('d/m/Y') }}{% endif %}</span></span>
  884.                                     </div>
  885.                                 {% else %}
  886.                                     {% if building.dateStartAt is not null %}
  887.                                     <div class="mt-2">
  888.                                         <span><strong>{{'building.dispo'|trans}}</strong> {{ building.dateStartAt|date('d/m/Y') }}</span>
  889.                                     </div>
  890.                                     {% else %}
  891.                                         <p>{{'building.nodispo'|trans}}</p>
  892.                                     {% endif %}
  893.                                 {% endif %}
  894.                                 
  895.                                 {% if building.isAidEligible %}
  896.                                     <div class="mt-2">
  897.                                         <span><strong>{{ 'building.cafeligible'|trans }}</strong></span>
  898.                                     </div>
  899.                                 {% endif %}
  900.                                 {% if building.charges is not empty %}
  901.                                     <div class="my-5">
  902.                                         <h1 class="text-2xl font-bold">{{ 'accueil.Fees'|trans }}</h1>
  903.                                         <div class="grid grid-cols-2 gap-2 my-2 text-sm">
  904.                                             {% for fees in building.charges %}
  905.                                                 <div class="flex items-center">
  906.                                                     <div>
  907.                                                         <span><i class="fa-solid fa-check"></i> {{ fees|trans }}</span>
  908.                                                     </div>
  909.                                                 </div>
  910.                                             {% endfor %}
  911.                                         </div>
  912.                                     </div>
  913.                                 {% endif %}
  914.                                 {% if building.houseRules is not empty %}
  915.                                     <div class="my-5">
  916.                                         <h1 class="text-2xl font-bold">{{ 'accueil.houseRules'|trans }}</h1>
  917.                                         <div class="grid grid-cols-2 gap-2 my-2 text-sm">
  918.                                             {% for rule in building.houseRules %}
  919.                                                 <div class="flex items-center">
  920.                                                     <div>
  921.                                                         <span><i class="fa-solid fa-check"></i> {{ rule|trans }}</span>
  922.                                                     </div>
  923.                                                 </div>
  924.                                             {% endfor %}
  925.                                         </div>
  926.                                     </div>
  927.                                 {% endif %}
  928.                             <div class="mt-6">
  929.                                 {% if app.user %}
  930.                                     {% if "ROLE_TENANT" in app.user.roles %}
  931.                                         {% if app.user.isRegistrationFinalized %}
  932.                                             {% if not building.complexProperty %}
  933.                                                 {% if building.isActive %}
  934.                                                     <div class="d-flex justify-content-center flex flex-wrap justify-between items-center">
  935.                                                         <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">
  936.                                                             <i class="fa-solid fa-file text-white"></i>
  937.                                                             <span class="hidden md:inline">{{ 'building.deposerdemande'|trans }}</span>
  938.                                                         </a>
  939.                                                     </div>
  941.                                                 {% else %}
  942.                                                     <div class="d-flex justify-content-center flex flex-wrap justify-between items-center">
  943.                                                         <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">
  944.                                                             <i class="fa-solid fa-xmark text-white"></i>
  945.                                                             <span class="hidden md:inline">{{ 'building.nondispo'|trans }}</span>
  946.                                                         </a>
  947.                                                     </div>
  948.                                                 {% endif %}
  949.                                             {% endif %}
  950.                                                 {# <div class="mt-6">
  951.                                                     <a href="{{ path('building_reporting',{id : building.id}) }}" class="text-gray-400 w-full font-medium rounded-md text-sm text-center">
  952.                                                         <p class="hidden sm:inline-block">
  953.                                                             <img src="{{ asset('/images/icons/Signaler.png') }}" height="30px" width="30px" class="fa-sharp fa-solid fa-door-open p-1 rounded-lg"/>
  954.                                                             <span class="underline">{{ 'accueil.signalernannonce'|trans }}</span>
  955.                                                         </p>
  956.                                                     </a>
  957.                                                 </div> #}
  958.                                         {% else %}
  959.                                             {% if not building.complexProperty %}
  960.                                                 <div class="d-flex justify-content-center flex flex-wrap justify-between items-center">
  961.                                                     <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">
  962.                                                         <span class="hidden md:inline">{{ 'building.deposerdemande'|trans }}</span>
  963.                                                     </a>
  964.                                                 </div>
  965.                                             {% endif %}
  966.                                         {% endif %}
  967.                                     {% endif %}
  968.                                 {% else %}
  969.                                     <div class="d-flex justify-content-center flex flex-wrap justify-between items-center">
  970.                                         <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">
  971.                                             <span class="hidden md:inline">{{ 'building.deposerdemande'|trans }}</span>
  972.                                         </button>
  973.                                     </div>
  974.                                 {% endif %}
  975.                                 <br>
  976.                                 <div class="mt-6 mb-5">
  977.                                     {% if building.DEP != null %}
  978.                                         <div class="mt-6">
  979.                                             <h1 class="text-2xl font-bold">DPE ({{'building.dpe'|trans}})</h1>
  980.                                             <br>
  981.                                             <div class='grid grid-cols-8 gap-1 text-center align-middle'>
  982.                                             
  983.                                                     {% if building.DEP == 'A' %}
  984.                                                         <span id="dpe" class=" DPE-bar-A text-2xl font-bold rounded-l-lg">A</span>
  985.                                                         <span id="dpe" class=" DPE-bar-B text-2xl font-bold mt-2.5 h-2"></span>
  986.                                                         <span id="dpe" class=" DPE-bar-C text-2xl font-bold mt-2.5 h-2"></span>
  987.                                                         <span id="dpe" class=" DPE-bar-D text-2xl font-bold mt-2.5 h-2"></span>
  988.                                                         <span id="dpe" class=" DPE-bar-E text-2xl font-bold mt-2.5 h-2"></span>
  989.                                                         <span id="dpe" class=" DPE-bar-F text-2xl font-bold mt-2.5 h-2"></span>
  990.                                                         <span id="dpe" class=" DPE-bar-G text-2xl font-bold rounded-r-lg mt-2.5 h-2"></span>
  991.                                                     {% elseif building.DEP ==  'B' %}
  992.                                                         <span id="dpe" class=" DPE-bar-A text-2xl font-bold rounded-l-lg mt-2.5 h-2"></span>
  993.                                                         <span id="dpe" class=" DPE-bar-B text-2xl font-bold ">B</span>
  994.                                                         <span id="dpe" class=" DPE-bar-C text-2xl font-bold mt-2.5 h-2"></span>
  995.                                                         <span id="dpe" class=" DPE-bar-D text-2xl font-bold mt-2.5 h-2"></span>
  996.                                                         <span id="dpe" class=" DPE-bar-E text-2xl font-bold mt-2.5 h-2"></span>
  997.                                                         <span id="dpe" class=" DPE-bar-F text-2xl font-bold mt-2.5 h-2"></span>
  998.                                                         <span id="dpe" class=" DPE-bar-G text-2xl font-bold rounded-r-lg mt-2.5 h-2"></span>
  999.                                                     {% elseif building.DEP == 'C' %}
  1000.                                                         <span id="dpe" class=" DPE-bar-A text-2xl font-bold rounded-l-lg mt-2.5 h-2"></span>
  1001.                                                         <span id="dpe" class=" DPE-bar-B text-2xl font-bold mt-2.5 h-2"></span>
  1002.                                                         <span id="dpe" class=" DPE-bar-C text-2xl font-bold">C</span>
  1003.                                                         <span id="dpe" class=" DPE-bar-D text-2xl font-bold mt-2.5 h-2"></span>
  1004.                                                         <span id="dpe" class=" DPE-bar-E text-2xl font-bold mt-2.5 h-2"></span>
  1005.                                                         <span id="dpe" class=" DPE-bar-F text-2xl font-bold mt-2.5 h-2"></span>
  1006.                                                         <span id="dpe" class=" DPE-bar-G text-2xl font-bold rounded-r-lg mt-2.5 h-2"></span>
  1007.                                                     {% elseif building.DEP == 'D' %}
  1008.                                                         <span id="dpe" class=" DPE-bar-A text-2xl font-bold rounded-l-lg mt-2.5 h-2"></span>
  1009.                                                         <span id="dpe" class=" DPE-bar-B text-2xl font-bold mt-2.5 h-2"></span>
  1010.                                                         <span id="dpe" class=" DPE-bar-C text-2xl font-bold mt-2.5 h-2"></span>
  1011.                                                         <span id="dpe" class=" DPE-bar-D text-2xl font-bold">D</span>
  1012.                                                         <span id="dpe" class=" DPE-bar-E text-2xl font-bold mt-2.5 h-2"></span>
  1013.                                                         <span id="dpe" class=" DPE-bar-F text-2xl font-bold mt-2.5 h-2"></span>
  1014.                                                         <span id="dpe" class=" DPE-bar-G text-2xl font-bold rounded-r-lg mt-2.5 h-2"></span>
  1015.                                                     {% elseif building.DEP == 'E' %}
  1016.                                                         <span id="dpe" class=" DPE-bar-A text-2xl font-bold rounded-l-lg mt-2.5 h-2"></span>
  1017.                                                         <span id="dpe" class=" DPE-bar-B text-2xl font-bold mt-2.5 h-2"></span>
  1018.                                                         <span id="dpe" class=" DPE-bar-C text-2xl font-bold mt-2.5 h-2"></span>
  1019.                                                         <span id="dpe" class=" DPE-bar-D text-2xl font-bold mt-2.5 h-2"></span>
  1020.                                                         <span id="dpe" class=" DPE-bar-E text-2xl font-bold">E</span>
  1021.                                                         <span id="dpe" class=" DPE-bar-F text-2xl font-bold mt-2.5 h-2"></span>
  1022.                                                         <span id="dpe" class=" DPE-bar-G text-2xl font-bold rounded-r-lg mt-2.5 h-2"></span>
  1023.                                                     {% elseif building.DEP == 'F' %}
  1024.                                                         <span id="dpe" class=" DPE-bar-A text-2xl font-bold rounded-l-lg mt-2.5 h-2"></span>
  1025.                                                         <span id="dpe" class=" DPE-bar-B text-2xl font-bold mt-2.5 h-2"></span>
  1026.                                                         <span id="dpe" class=" DPE-bar-C text-2xl font-bold mt-2.5 h-2"></span>
  1027.                                                         <span id="dpe" class=" DPE-bar-D text-2xl font-bold mt-2.5 h-2"></span>
  1028.                                                         <span id="dpe" class=" DPE-bar-E text-2xl font-bold mt-2.5 h-2"></span>
  1029.                                                         <span id="dpe" class=" DPE-bar-F text-2xl font-bold">F</span>
  1030.                                                         <span id="dpe" class=" DPE-bar-G text-2xl font-bold rounded-r-lg mt-2.5 h-2"></span>    
  1031.                                                     {% elseif building.DEP == 'G' %}
  1032.                                                         <span id="dpe" class=" DPE-bar-A text-2xl font-bold rounded-l-lg mt-2.5 h-2"></span>
  1033.                                                         <span id="dpe" class=" DPE-bar-B text-2xl font-bold mt-2.5 h-2"></span>
  1034.                                                         <span id="dpe" class=" DPE-bar-C text-2xl font-bold mt-2.5 h-2"></span>
  1035.                                                         <span id="dpe" class=" DPE-bar-D text-2xl font-bold mt-2.5 h-2"></span>
  1036.                                                         <span id="dpe" class=" DPE-bar-E text-2xl font-bold mt-2.5 h-2"></span>
  1037.                                                         <span id="dpe" class=" DPE-bar-F text-2xl font-bold mt-2.5 h-2"></span>
  1038.                                                         <span id="dpe" class=" DPE-bar-G text-2xl font-bold rounded-r-lg">G</span>
  1039.                                                     {% endif %}
  1040.                                             </div>
  1041.                                             {% if building.DEP == 'Vierge' %}
  1042.                                                 <div class='text-center align-middle'>
  1043.                                                     <span id="dpe" class="DPE-bar-V text-[20px] text-white rounded-r-lg p-2">Vierge</span>
  1044.                                                 </div>
  1045.                                             {% endif %}
  1046.                                         </div>
  1047.                                     {% endif %}
  1048.                                     {% if building.GES != null %}
  1049.                                         <div class="mt-6">
  1050.                                             <h1 class="text-2xl font-bold">GES ({{'building.ges'|trans}})</h1>
  1051.                                             <br>
  1052.                                             <div class='grid grid-cols-8 gap-1 text-center align-middle'>
  1053.                                                 
  1054.                                                     {% if building.GES == 'A' %}
  1055.                                                         <span id="ges" class=" GES-bar-A text-2xl font-bold rounded-l-lg">A</span>
  1056.                                                         <span id="ges" class=" GES-bar-B text-2xl font-bold mt-2.5 h-2"></span>
  1057.                                                         <span id="ges" class=" GES-bar-C text-2xl font-bold mt-2.5 h-2"></span>
  1058.                                                         <span id="ges" class=" GES-bar-D text-2xl font-bold mt-2.5 h-2"></span>
  1059.                                                         <span id="ges" class=" GES-bar-E text-2xl font-bold mt-2.5 h-2"></span>
  1060.                                                         <span id="ges" class=" GES-bar-F text-2xl font-bold mt-2.5 h-2"></span>
  1061.                                                         <span id="ges" class=" GES-bar-G text-2xl font-bold rounded-r-lg mt-2.5 h-2"></span>
  1062.                                                     {% elseif building.GES ==  'B' %}
  1063.                                                         <span id="ges" class=" GES-bar-A text-2xl font-bold rounded-l-lg mt-2.5 h-2"></span>
  1064.                                                         <span id="ges" class=" GES-bar-B text-2xl font-bold ">B</span>
  1065.                                                         <span id="ges" class=" GES-bar-C text-2xl font-bold mt-2.5 h-2"></span>
  1066.                                                         <span id="ges" class=" GES-bar-D text-2xl font-bold mt-2.5 h-2"></span>
  1067.                                                         <span id="ges" class=" GES-bar-E text-2xl font-bold mt-2.5 h-2"></span>
  1068.                                                         <span id="ges" class=" GES-bar-F text-2xl font-bold mt-2.5 h-2"></span>
  1069.                                                         <span id="ges" class=" GES-bar-G text-2xl font-bold rounded-r-lg mt-2.5 h-2"></span>
  1070.                                                     {% elseif building.GES == 'C' %}
  1071.                                                         <span id="ges" class=" GES-bar-A text-2xl font-bold rounded-l-lg mt-2.5 h-2"></span>
  1072.                                                         <span id="ges" class=" GES-bar-B text-2xl font-bold mt-2.5 h-2"></span>
  1073.                                                         <span id="ges" class=" GES-bar-C text-2xl font-bold">C</span>
  1074.                                                         <span id="ges" class=" GES-bar-D text-2xl font-bold mt-2.5 h-2"></span>
  1075.                                                         <span id="ges" class=" GES-bar-E text-2xl font-bold mt-2.5 h-2"></span>
  1076.                                                         <span id="ges" class=" GES-bar-F text-2xl font-bold mt-2.5 h-2"></span>
  1077.                                                         <span id="ges" class=" GES-bar-G text-2xl font-bold rounded-r-lg mt-2.5 h-2"></span>
  1078.                                                     {% elseif building.GES == 'D' %}
  1079.                                                         <span id="ges" class=" GES-bar-A text-2xl font-bold rounded-l-lg mt-2.5 h-2"></span>
  1080.                                                         <span id="ges" class=" GES-bar-B text-2xl font-bold mt-2.5 h-2"></span>
  1081.                                                         <span id="ges" class=" GES-bar-C text-2xl font-bold mt-2.5 h-2"></span>
  1082.                                                         <span id="ges" class=" GES-bar-D text-2xl font-bold">D</span>
  1083.                                                         <span id="ges" class=" GES-bar-E text-2xl font-bold mt-2.5 h-2"></span>
  1084.                                                         <span id="ges" class=" GES-bar-F text-2xl font-bold mt-2.5 h-2"></span>
  1085.                                                         <span id="ges" class=" GES-bar-G text-2xl font-bold rounded-r-lg mt-2.5 h-2"></span>
  1086.                                                     {% elseif building.GES == 'E' %}
  1087.                                                         <span id="ges" class=" GES-bar-A text-2xl font-bold rounded-l-lg mt-2.5 h-2"></span>
  1088.                                                         <span id="ges" class=" GES-bar-B text-2xl font-bold mt-2.5 h-2"></span>
  1089.                                                         <span id="ges" class=" GES-bar-C text-2xl font-bold mt-2.5 h-2"></span>
  1090.                                                         <span id="ges" class=" GES-bar-D text-2xl font-bold mt-2.5 h-2"></span>
  1091.                                                         <span id="ges" class=" GES-bar-E text-2xl font-bold">E</span>
  1092.                                                         <span id="ges" class=" GES-bar-F text-2xl font-bold mt-2.5 h-2"></span>
  1093.                                                         <span id="ges" class=" GES-bar-G text-2xl font-bold rounded-r-lg mt-2.5 h-2"></span>
  1094.                                                     {% elseif building.GES == 'F' %}
  1095.                                                         <span id="ges" class=" GES-bar-A text-2xl font-bold rounded-l-lg mt-2.5 h-2"></span>
  1096.                                                         <span id="ges" class=" GES-bar-B text-2xl font-bold mt-2.5 h-2"></span>
  1097.                                                         <span id="ges" class=" GES-bar-C text-2xl font-bold mt-2.5 h-2"></span>
  1098.                                                         <span id="ges" class=" GES-bar-D text-2xl font-bold mt-2.5 h-2"></span>
  1099.                                                         <span id="ges" class=" GES-bar-E text-2xl font-bold mt-2.5 h-2"></span>
  1100.                                                         <span id="ges" class=" GES-bar-F text-2xl font-bold">F</span>
  1101.                                                         <span id="ges" class=" GES-bar-G text-2xl font-bold rounded-r-lg mt-2.5 h-2"></span>    
  1102.                                                     {% elseif building.GES == 'G' %}
  1103.                                                         <span id="ges" class=" GES-bar-A text-2xl font-bold rounded-l-lg mt-2.5 h-2"></span>
  1104.                                                         <span id="ges" class=" GES-bar-B text-2xl font-bold mt-2.5 h-2"></span>
  1105.                                                         <span id="ges" class=" GES-bar-C text-2xl font-bold mt-2.5 h-2"></span>
  1106.                                                         <span id="ges" class=" GES-bar-D text-2xl font-bold mt-2.5 h-2"></span>
  1107.                                                         <span id="ges" class=" GES-bar-E text-2xl font-bold mt-2.5 h-2"></span>
  1108.                                                         <span id="ges" class=" GES-bar-F text-2xl font-bold mt-2.5 h-2"></span>
  1109.                                                         <span id="ges" class=" GES-bar-G text-2xl font-bold rounded-r-lg">G</span>
  1110.                                                     {% endif %}
  1111.                                             </div>
  1112.                                             {% if building.GES == 'Vierge' %}
  1113.                                                 <div class='text-center align-middle'>
  1114.                                                     <span id="ges" class="GES-bar-V text-[20px] text-white rounded-r-lg p-2">Vierge</span>
  1115.                                                 </div>
  1116.                                             {% endif %}
  1117.                                         </div>
  1118.                                     {% endif %}
  1119.                                     {# {% if not building.complexProperty %}
  1120.                                         <div style="text-align: center; margin-top: 30px;">
  1121.                                             <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>
  1122.                                         </div>
  1123.                                     {% endif %} #}
  1124.                                 </div>
  1125.                                 <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">
  1126.                                 <p class="flex justify-center items-center h-full">
  1127.                                     <span class="underline">{{ 'accueil.signalernannonce'|trans }}</span>
  1128.                                 </p>
  1129.                             </a>
  1130.                             </div>
  1131.                         </div>
  1132.                     </div>
  1133.                 </div>
  1134.                 {% if similarProperties %}
  1135.                     <p class="text-2xl m-2"><strong>{{ 'accueil.log'|trans }}</strong></p>
  1136.                     <div style="width: 95%" class="relative border border-gray-300 hover:border-blue-500 shadow-2xl rounded p-6">
  1137.                         <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
  1138.                             {% for loopIndex, building in similarProperties %}
  1139.                             {% if loopIndex % 43 == 0 and loopIndex != 0 %}
  1140.                         </div>
  1141.                     <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
  1142.                         {% endif %}
  1143.                         <div class="w-full text-center">
  1144.                             {% if building.buildingDocuments is not empty %}
  1145.                             {% set filteredDocuments = building.buildingDocuments|filter(document => document.name starts with 'file' or document.name starts with 'base' or document.name starts with 'cover') %}
  1146.                             {% if filteredDocuments is not empty %}
  1147.                                 {% if filteredDocuments|length > 1 %}
  1148.                                     <div id="carousel-{{ building.id }}" class="relative z-0 w-full" data-carousel="static">
  1149.                                         <div class="overflow-hidden relative h-[20rem] md:h-[10rem] lg:h-[20rem] flex mt-10">
  1150.                                             {% for document in filteredDocuments %}
  1151.                                                 {% if document.imageFile %}
  1152.                                                     <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>
  1153.                                                 {% endif %}
  1154.                                             {% endfor %}
  1155.                                         </div>
  1156.                                         <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>
  1157.                                             <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">
  1158.                                                 <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>
  1159.                                                 <span class="hidden">Previous</span>
  1160.                                             </span>
  1161.                                         </button>
  1162.                                         <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>
  1163.                                             <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">
  1164.                                                 <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>
  1165.                                                 <span class="hidden">Next</span>
  1166.                                             </span>
  1167.                                         </button>
  1168.                                         <div class="flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2">
  1169.                                             {% for document in filteredDocuments %}
  1170.                                                 {% if document.imageFile %}
  1171.                                                     <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>
  1172.                                                 {% endif %}
  1173.                                             {% endfor %}
  1174.                                         </div>
  1175.                                     </div>
  1176.                                 {% elseif filteredDocuments|length == 1 %}
  1177.                                     <div class="overflow-hidden relative h-[14rem] md:h-[10rem] lg:h-[14rem]">
  1178.                                         {% for bd in filteredDocuments %}
  1179.                                             <div class="rounded-xl h-full bg-[url({{ asset('images/files/' ~ bd.imageFile) }})] bg-cover bg-no-repeat bg-center"></div>
  1180.                                         {% endfor %}
  1181.                                         {% if building.propertyManager.lessorType == "Gestionnaire" %}
  1182.                                             <img src="{{ asset('/images/site/bandeau-pro.png') }}" alt="Bandeau pro" class="absolute bottom-2 right-2 h-6 opacity-90 z-[1000]">
  1183.                                         {% endif %}                                    
  1184.                                     </div>
  1185.                                 {% endif %}
  1186.                             {% else %}
  1187.                                 <p>No images</p>
  1188.                             {% endif %}
  1189.                             {% else %}
  1190.                                 <p>No documents available for this building.</p>
  1191.                             {% endif %}
  1192.                             <p class="text-2xl m-2 break-words whitespace-normal">
  1193.                                 {% if building.title %}
  1194.                                     <strong>{{ building.title }}</strong>
  1195.                                 {% else %}
  1196.                                     &nbsp;
  1197.                                 {% endif %}
  1198.                             </p>
  1199.                             <p>
  1200.                                 <strong>{{ 'accueil.city'|trans }} :</strong> {{ building.cityEntity.city }}
  1201.                             </p>
  1202.                             <p>
  1203.                                 <strong>{{ 'accueil.superfi'|trans }}</strong> {{ building.surface }} m²
  1204.                             </p>
  1205.                             <p>
  1206.                                 <strong>{{ 'accueil.loyermen'|trans }}</strong> {{ building.rent / 100 }} euros
  1207.                             </p
  1208.                             <p>
  1209.                                 {% if building.isActive %}
  1210.                                     <strong>{{ 'accueil.startloc'|trans }}</strong> {{ building.dateStartAt|date('d/m/Y') }}
  1211.                                 {% else %}
  1212.                                     &nbsp;
  1213.                                 {% endif %}
  1214.                             </p>
  1215.                             
  1216.                             {% if app.user %}
  1217.                             {% if "ROLE_TENANT" in app.user.roles %}
  1218.                             {% if app.user.isRegistrationFinalized %}
  1219.                             {% if building.isActive %}
  1220.                                 <div class="d-flex justify-content-center flex flex-wrap justify-between items-center m-4">
  1221.                                     <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">
  1222.                                         <span class="inline">{{ 'accueil.more'|trans }}</span>
  1223.                                     </a>
  1224.                                 </div>
  1225.                             {% else %}
  1226.                                 <div class="d-flex justify-content-center flex flex-wrap justify-between items-center m-4">
  1227.                                     <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">
  1228.                                         <i class="fa-solid fa-xmark text-white"></i>
  1229.                                         <span class="inline">{{ 'building.nondispo'|trans }}</span>
  1230.                                     </a>
  1231.                                 </div>
  1232.                             {% endif %}
  1233.                             {% else %}
  1234.                                 <div class="d-flex justify-content-center flex flex-wrap justify-between items-center m-4">
  1235.                                     <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">
  1236.                                         <span class="inline">{{ 'building.deposerdemande'|trans }}</span>
  1237.                                     </a>
  1238.                                 </div>
  1239.                             {% endif %}
  1240.                             {% endif %}
  1241.                             {% else %}
  1242.                             <div class="d-flex justify-content-center flex flex-wrap justify-between items-center m-4">
  1243.                                 <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">
  1244.                                     <span class="inline">{{ 'building.deposerdemande'|trans }}</span>
  1245.                                 </button>
  1246.                             </div>
  1247.                             {% endif %}
  1248.                         </div>
  1249.                         {% endfor %}
  1250.                     </div>
  1251.                     {% if buildingsInComplex|length % 3 != 0 %}
  1252.                         <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"></div>
  1253.                     {% endif %}
  1254.                 </div>
  1255.                 {% endif %}
  1256.                 </div>
  1257.             </div>
  1258.         </div>
  1259.     </div>
  1260.     <div id="sharePopup" class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center hidden">
  1261.         <div class="bg-white p-6 rounded-lg shadow-lg">
  1262.             <h2 class="text-xl font-bold mb-4">Partager ce logement via :</h2>
  1263.             <div class="flex flex-col items-center space-y-4">
  1264.                 <a href="mailto:?subject=Regardez ce logement&body=Voici un logement qui pourrait vous intéresser : {{ app.request.uri }}" target="_blank" class="p-2">
  1265.                     <img src="{{ asset('/images/email.png') }}" alt="Mail" class="w-8 h-8">
  1266.                 </a>
  1267.                 <a href="https://www.facebook.com/sharer/sharer.php?u={{ app.request.uri|url_encode }}" target="_blank" class="p-2">
  1268.                     <img src="{{ asset('/images/facebook.png') }}" alt="Facebook" class="w-8 h-8">
  1269.                 </a>
  1270.                 <a href="https://wa.me/?text=Voici un logement qui pourrait vous intéresser : {{ app.request.uri|url_encode }}" target="_blank" class="p-2">
  1271.                     <img src="{{ asset('/images/whatsapp.jfif') }}" alt="WhatsApp" class="w-8 h-8">
  1272.                 </a>
  1273.                 <button onclick="copyToClipboard('{{ app.request.uri }}')" class="p-2">
  1274.                     <img src="{{ asset('/images/link.png') }}" alt="Copy" class="w-8 h-8">
  1275.                 </button>
  1276.             </div>
  1277.             <div class="flex justify-center mt-4">
  1278.                 <button onclick="toggleSharePopup()" class="bg-gray-300 hover:bg-gray-400 text-black font-medium rounded-md text-sm px-4 py-2">
  1279.                     Fermer
  1280.                 </button>
  1281.             </div>
  1282.         </div>
  1283.     </div>
  1284.     
  1285. {% set googleMapsApiKey = app.request.server.get('GOOGLEMAP_KEY') %}
  1286.         <script>
  1287.             const googleMapsApiKey = "{{ googleMapsApiKey }}";
  1288.             var iconMap = "{{ asset('/images/icons/Bons Plans.png') }}";
  1289.         </script>
  1290.     {% block scripts %}
  1291.     <script async src="{{ 'https://maps.googleapis.com/maps/api/js' ~ '?key=' ~ googleMapsApiKey ~ '&callback=initMap&v=beta&libraries=places,geometry,marker' }}"></script>
  1292.             <script>
  1293.             function initMap() {
  1294.             var input = document.getElementById('addressDistanceInput');
  1295.             var options = {
  1296.                 types: ['geocode'],
  1297.                 componentRestrictions: { country: ["fr", "es", "be", "lu", "de", "it", "pt", "ca"] }
  1298.                 };
  1299.             var autocomplete = new google.maps.places.Autocomplete(input, options);
  1300.             var currentMarker = null;
  1301.             var currentCircle = null;
  1302.             
  1303.             google.maps.event.addListener(autocomplete, 'place_changed', function() {
  1304.                 var place = autocomplete.getPlace();
  1305.                 var addressInput = place.formatted_address;
  1306.                 
  1307.                 if (!place.geometry) {
  1308.                     console.log("Aucun détail géographique trouvé pour cette adresse.");
  1309.                     return;
  1310.                 }
  1311.                 var latitude = place.geometry.location.lat();
  1312.                 var longitude = place.geometry.location.lng();
  1313.                 
  1314.                 if (currentMarker) currentMarker.setMap(null);
  1315.                 if (currentCircle) currentCircle.setMap(null);
  1317.                 var iconMap = {
  1318.                     url: "{{ asset('/images/icons/ecole.png') }}",
  1319.                     scaledSize: new google.maps.Size(40, 40),
  1320.                     anchor: new google.maps.Point(20, 40)
  1321.                 };
  1323.                 currentMarker = new google.maps.Marker({
  1324.                     position: { lat: latitude, lng: longitude },
  1325.                     map: map,
  1326.                     title: "Adresse distance",
  1327.                     icon: iconMap,
  1328.                 });
  1330.                 //console.log(currentMarker)
  1332.                 currentCircle = new google.maps.Circle({
  1333.                     strokeColor: "#FFFF00",
  1334.                     strokeOpacity: 0.8,
  1335.                     strokeWeight: 2,
  1336.                     fillColor: "#FFFF00",
  1337.                     fillOpacity: 0.35,
  1338.                     map: map,
  1339.                     center: {lat: {{ building.lat|json_encode|raw }}, lng: {{ building.lng|json_encode|raw }}},
  1340.                     radius: 2500,
  1341.                     zoom: 50,
  1342.                 });
  1343.                                 
  1344.                 var initialPosition = new google.maps.LatLng({{ building.lat|json_encode|raw }}, {{ building.lng|json_encode|raw }});
  1345.                 var newPosition = new google.maps.LatLng(latitude, longitude);
  1346.                 var distance = google.maps.geometry.spherical.computeDistanceBetween(initialPosition, newPosition);
  1347.                 distance = Math.round(distance /1000);
  1348.                 var temps = (distance/80)*60;
  1349.                 temps = Math.round(temps);
  1351.                 var addressDistanceField = document.querySelector('#addressDistance');
  1352.                 addressDistanceField.style.display = 'block';
  1353.                 addressDistanceField.innerHTML = `
  1354.                     <p>{{ 'building.logement1'|trans }} ${distance} {{ 'building.logement2'|trans }} ${temps} {{ 'building.logement3'|trans }}</p>
  1355.                     <p>{{ 'building.logement4'|trans }}</p>
  1356.                 `;
  1357.                 
  1358.                 map.setCenter(new google.maps.LatLng(latitude, longitude));
  1360.                 const ua = navigator.userAgent;
  1361.                 const device = /iPad|iPhone|iPod/.test(ua) ? 'iOS' : 'Windows/Android';
  1363.                 var initialAddress =
  1364.                       {{ building.street|json_encode|raw }} + " " 
  1365.                     + {{ building.cityEntity.city|json_encode|raw }} + " " 
  1366.                     + {{ building.cityEntity.postalCode|json_encode|raw }} + " " 
  1367.                     + {{ building.cityEntity.country|json_encode|raw }};
  1369.                 if(initialAddress && addressInput){
  1370.                     var divRedirectMap = document.getElementById('redirectMap');
  1371.                     divRedirectMap.innerHTML = "";
  1372.                     divRedirectMap.style.display = "block";
  1373.                     let a = document.createElement("a");
  1374.                     a.append("{{ 'accueil.mapsRedirectButton'|trans }}");
  1375.                     a.style.display = "block";
  1376.                     a.style.width = "100%";
  1377.                     a.style.height = "100%";
  1379.                     if(device == 'iOS'){
  1380.                         a.href = `https://maps.apple.com/?saddr=${initialAddress}&daddr=${addressInput}`;
  1381.                     }
  1382.                     else {
  1383.                         a.href = `https://www.google.com/maps/dir/?api=1&origin=${initialAddress}&destination=${addressInput}`;
  1384.                     }
  1385.                     a.target = "_blank";
  1386.                     divRedirectMap.append(a);
  1387.                 }        
  1388.             });
  1390.             if ({{ building.lat|json_encode|raw }} == null || {{ building.lng|json_encode|raw }} == null) {
  1391.                 return 0;
  1392.             }
  1393.             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, });
  1394.             const parser = new DOMParser();
  1395.             
  1396.             // A marker with a custom inline SVG.
  1397.             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">
  1398.                             <defs>
  1399.                             <filter id="alpha" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
  1400.                             <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"/>
  1401.                             </filter>
  1402.                             <mask id="mask0">
  1403.                             <g filter="url(#alpha)">
  1404.                             <rect x="0" y="0" width="30" height="40" style="fill:rgb(0%,0%,0%);fill-opacity:0.996078;stroke:none;"/>
  1405.                             </g>
  1406.                             </mask>
  1407.                             <clipPath id="clip1">
  1408.                             <rect x="0" y="0" width="30" height="40"/>
  1409.                             </clipPath>
  1410.                             <g id="surface5" clip-path="url(#clip1)">
  1411.                             <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 "/>
  1412.                             </g>
  1413.                             </defs>
  1414.                             <g id="surface1">
  1415.                             <use xlink:href="#surface5" mask="url(#mask0)"/>
  1416.                             <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 "/>
  1417.                             <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 "/>
  1418.                             <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 "/>
  1419.                             <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 "/>
  1420.                             <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 "/>
  1421.                             </g>
  1422.                         </svg>`
  1423.             const pinSvgElement = parser.parseFromString(pinSvgString, "image/svg+xml").documentElement;
  1424.             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(), });
  1425.         }
  1427.         window.initMap = initMap;
  1429.         function showMap() {
  1430.             document.getElementById('map').style.filter = "none";
  1431.             document.getElementById('mapGoogle').style.display = "none";
  1432.         }
  1433.         </script>
  1434.     {% endblock %}
  1435. {% endblock %}
  1437. {% block javascripts %}
  1438.     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/>
  1439.     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/>
  1441.     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  1442.     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
  1443.     <script type="text/javascript">
  1444.         $(document).ready(function() {
  1445.             const $carousel = $('.slick-carousel');
  1447.             $carousel.slick({
  1448.                 slidesToShow: 1,
  1449.                 slidesToScroll: 1,
  1450.                 autoplay: false,
  1451.                 arrows: false,
  1452.                 dots: true,
  1453.                 responsive: [
  1454.                     {
  1455.                         breakpoint: 1024,
  1456.                         settings: { slidesToShow: 1 }
  1457.                     },
  1458.                     {
  1459.                         breakpoint: 768,
  1460.                         settings: { slidesToShow: 1 }
  1461.                     }
  1462.                 ]
  1463.             });
  1465.             $('.slick-custom-prev').on('click', function () {
  1466.                 $carousel.slick('slickPrev');
  1467.             });
  1469.             $('.slick-custom-next').on('click', function () {
  1470.                 $carousel.slick('slickNext');
  1471.             });
  1472.         });
  1473.     </script>
  1474.     <script>
  1475.         function resize() {
  1476.             const fd= document.getElementById("firstDiv");
  1477.             if(screen.width<768){
  1478.                 fd.parentElement.classList.remove("container","px-4","py-8");
  1479.                 fd.parentElement.parentElement.classList.remove('m-auto');
  1480.                 
  1481.             }else{
  1482.                 fd.parentElement.classList.add("container","px-4","py-8");
  1483.                 fd.parentElement.parentElement.classList.add('m-auto');
  1484.             }
  1485.         }
  1486.         $(document).ready(function () {
  1487.             resize();
  1489.             const el = document.getElementById('description');
  1490.             const btn = document.getElementById('showMoreDescription');
  1492.             if (el && btn) {
  1493.                 if (el.scrollHeight > el.clientHeight) {
  1494.                     btn.style.display = 'block';
  1495.                 } else {
  1496.                     btn.style.display = 'none';
  1497.                 }
  1499.                 btn.addEventListener("click", function () {
  1500.                     el.classList.toggle("line-clamp-[5]");
  1501.                     const showText = btn.getAttribute("data-more");
  1502.                     const hideText = btn.getAttribute("data-less");
  1503.                     btn.textContent = el.classList.contains("line-clamp-[5]") ? showText : hideText;
  1504.                 });
  1505.             }
  1506.         });
  1507.         
  1508.         window.onresize = resize;
  1509.     </script>
  1510.     <script>
  1511.         function zoomImage(imageUrl)
  1512.         {
  1513.             const zoomImageContainer = document.getElementById("zoomContainer")
  1514.             const zoomImage = document.getElementById("zoomImg")
  1516.             zoomImage.src = `{{ asset('images/files/') }}${imageUrl}`;
  1517.             zoomImageContainer.style.display = "flex";
  1518.             zoomImage.style.minWidth = "65%";
  1519.         }
  1520.         function closeZoomImage()
  1521.         {
  1522.             const zoomImageContainer = document.getElementById("zoomContainer")
  1523.             zoomImageContainer.style.display = "none";
  1524.         }
  1525.     </script>
  1526.     <script>
  1527.         $(document).ready(function() {
  1528.             $('.like-button').click(function() {
  1529.                 const imageId = $(this).data('image-id');
  1530.                 $(this).toggleClass('fa-solid');
  1531.                 $(this).toggleClass('fa-regular');
  1532.                 // Send AJAX request to like the image
  1533.                 $.ajax({
  1534.                     type: 'POST',
  1535.                     url: '{{ path('liked_building_action', {'id': 'IMAGE_ID'}) }}'.replace('IMAGE_ID', imageId),
  1536.                     success: function(response) {
  1537.                         if(!response['success']){
  1538.                             window.location.href = '{{ path('app_login') }}';
  1539.                         }
  1540.                     }.bind(this),
  1541.                     error: function() {
  1542.                         // Handle AJAX error
  1543.                     }
  1544.                 });
  1545.             });
  1546.         });
  1547.     </script>
  1548.     <script>
  1549.         function toggleSharePopup() {
  1550.             const sharePopup = document.getElementById('sharePopup');
  1551.             sharePopup.classList.toggle('hidden');
  1552.         }
  1553.         function copyToClipboard(text) {
  1554.             navigator.clipboard.writeText(text).then(function() {
  1555.                 alert('Lien copié dans le presse-papiers');
  1556.             }, function(err) {
  1557.                 console.error('Erreur lors de la copie du texte: ', err);
  1558.             });
  1559.         }
  1560.     </script>
  1561. {% endblock %}