templates/property.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}Biens{% endblock %}
  3. {% block metaDescription %}
  4.     {% set headerContent = content('Biens', 'Header') %}
  5.     <meta name="description" content="
  6.     {% if headerContent.content is defined %}
  7.         {{ headerContent.content|striptags }}
  8.     {% else %}
  9.          Tracol Immobilier propose une large offre en immobilier neuf (logements, bureaux, commerces), qui se caractérise par une architecture résolument contemporaine, des matériaux de qualité, et le soin apporté à chaque détail.
  10.     {% endif %}
  11.     ">
  12. {% endblock %}
  13. {% block body %} 
  14.     {% set headerContent = content('Biens', 'Header') %}
  15.     {% if headerContent.picture is defined and headerContent.picture is not empty %}
  16.         {% set backgroundImage = headerContent.picture[0].path %}
  17.     {% else %}
  18.         {% set backgroundImage = 'empty' %}
  19.     {% endif %}
  20.     {#
  21.     <header class="header-tracol slider-home slider-not-home who-is bottom-right-border position-relative overflow-hidden to-right" id="sliderHeader"  style="background: url({% if backgroundImage == 'empty' %}'https://tracol.lu/uploads/images/residences-61c0b1dd3141b610699350.jpeg'{% else %}'/uploads/images/{{ backgroundImage }}'{% endif %}) center center no-repeat;background-size:cover;">
  22.         <div class="container-fluid">
  23.             <div id="header-habiter" class="col-lg-8 mx-auto div-svg-header">
  24.                 <div class="header-habiter-div2">
  25.                     {% if headerContent.name is defined %}
  26.                         <svg id="svg-habiter" width="10" height="16" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:avocode="https://avocode.com/" viewBox="0 0 10 16"><defs></defs><desc>Generated with Avocode.</desc><g><g><title>Tracé 76</title><path d="M9.08929,0.51465v0h-9.08929v0v14.77002v0l9.08929,-1.93109v0z" fill="#f6a400" fill-opacity="1"></path></g></g></svg>
  27.                         <h2 class="header-habiter-title col-lg-8">{{ headerContent.name }}</h2>
  28.                     {% endif %}
  29.                 </div>
  30.             </div>
  31.         </div>
  32.     </header>
  33.     #}
  34.     <div class="container-fluid">
  35.         {% set sectionContent1 = content('Biens', 'Section-1') %}
  36.         {#
  37.         <div class="col-lg-8 mx-auto div-svg-header pre-section">
  38.             <div class="col-lg-5 property-title" style="font-size: 2.3em;display: flex;flex-direction: column;margin-left: 10px;">
  39.                 <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  40.                     <path id="Tracé_76" data-name="Tracé 76" d="M682.759,232.441h-9.089v14.77l9.089-1.931Z" transform="translate(-673.669 -232.441)" fill="#f6a400"/>
  41.                 </svg>
  42.                 {% if properties|length == 0 %}
  43.                     <h1 class="lowercase-title">Nous n'avons aucun bien correspondant à votre recherche.</h1>
  44.                 {% elseif properties|length == 1 %}
  45.                     <h1 class="project-title">{{ properties|length }} bien disponible</h1>
  46.                 {% else %}
  47.                     <h1 class="project-title">{{properties|length }} biens disponibles</h1>
  48.                 {% endif %}
  49.             </div>
  50.             <div class="separator"></div>
  51.             <div class="col-lg-6 pre-section-content">
  52.                 {% if sectionContent1.content is defined %}
  53.                     {{ sectionContent1.content|raw }}
  54.                 {% else %}
  55.                     Que vous soyez un particulier ou un professionnel, que vous recherchiez un appartement, une maison, un bureau ou un commerce, nos équipes d’experts vous accompagnent tout au long de votre projet immobilier.
  56.                 {% endif %}
  57.             </div>
  58.         </div>
  59.         #}
  60.         <section class="project" style="margin-bottom: 120px; margin-top: 60px">
  61.             
  62.             <div id="button-property-page"  class="col-lg-8 mx-auto div-svg-header" style="display: flex; align-items: center; padding-left: 7px">
  63.                 <button data-id="all" class="btn btn-primary all border-radius projectButton"><span class="span-all">TOUS</span></button>
  64.                 <button data-id="sale" class="btn btn-primary come border-radius projectButton"><span class="span-projects">ACHAT</span></button>
  65.                 <button data-id="rental" class="btn btn-primary come border-radius projectButton"><span class="span-projects">LOCATION</span></button>
  66.             </div>
  67.             <div id="button-property-page-mobile" class="col-lg-8 mx-auto div-svg-header" style="display: none; align-items: center">
  68.                 <div id="flick3" class="flicking-viewport">
  69.                     <div class="flicking-camera">
  70.                         <button data-id="all" class="btn btn-primary all border-radius projectButton"><span class="span-all">TOUS</span></button>
  71.                         <button data-id="sale" class="btn btn-primary come border-radius projectButton"><span class="span-projects">ACHAT</span></button>
  72.                         <button data-id="rental" class="btn btn-primary come border-radius projectButton"><span class="span-projects">LOCATION</span></button>
  73.                     </div>
  74.                 </div>
  75.             </div>
  76.             <div class="col-lg-8 mx-auto div-svg-header deactive-tablet" style="display: flex; flex-direction: column; justify-content: center">
  77.                 <div class="col-md-4" style="margin-top:20px">
  78.                     <p>Trier par :</p>
  79.                     <form>
  80.                         <select name="subfilter" class="form-control with-appearance" id="filterProperties">
  81.                             <option value="">Sélectionner</option>
  82.                             <option value="date">Date de publication</option>
  83.                             <option value="asc">Prix croissant</option>
  84.                             <option value="desc">Prix décroissant</option>
  85.                         </select>
  86.                     </form>
  87.                 </div>
  88.                 {#
  89.                 <div style="display: flex; flex-direction: row; padding-left: 7px; align-items: center; margin-top: 15px;">
  90.                     <div id="filter-desktop" class="filters-biens">
  91.                         {% for key, subType in getTypeProperties() %}
  92.                             <button data-id="{{ key }}" class="select-projet">{{ subType }} <i class="fas fa-times"></i></button>
  93.                         {% endfor %}
  94.                     </div>
  95.                     <div id="filter-mobile" class="col-lg-3 div-form selectSubFilter property" style="display: none">
  96.                         <div class="input-group dropdown show">
  97.                             <label class="label-search-filter" for="location">Filtrer par Type</label>
  98.                             <input style="height: 75px; width: 60px;" type="text" autocomplete="off" name="filters" id="filters"
  99.                                    class="form-control" aria-expanded="false">
  100.                             <ul id="form-search-filter-ajax" class="dropdown-menu form-search-filter-ajax" aria-labelledby="">
  101.                                 {% for key, subType in getTypeProperties() %}
  102.                                     <li value="{{ key }}" data-id="{{ key }}" class="select-filter"><i class="fas fa-times"></i>{{ subType }}</li>
  103.                                 {% endfor %}
  104.                             </ul>
  105.                         </div>
  106.                     </div>
  107.                 </div>
  108.                 #}
  109.                 <div id="loading">
  110.                     <h1 id="showOutput"></h1>
  111.                 </div>
  112.                 <div id="properties" class="col-lg-12" style="display: flex; flex-wrap: wrap; flex-direction: row">
  113.                     {% for property in properties %}
  114.                         <div  class="col-xl-4 col-lg-6 col-md-12 col-sm-12 div-img-hover-2" data-date="{{ property.created_at }}" data-price="{{ property.price.value }}" style="cursor: pointer">
  115.                             {#
  116.                             <div class="div-hover-2" id="div-hover-2" aria-haspopup="true" style="position: absolute; bottom: 8px; left: 9px; background-color: #242424; color: white; width: 291px; height: 70px">
  117.                                                             {% if property.comments[0].comment is not empty %}
  118.                                                                 <p class="project-content">
  119.                                                                     {{ property.comments[0].comment|slice(0, 350) }}</p>
  120.                                                                 <a href="{{ path('property-detail', {'id': property.id}) }}" class="project-arrow-2">
  121.                                                                     <span class="galerry-ref"></span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
  122.                                                                 </a>
  123.                                                             {% else %}
  124.                                                                 <a style="margin-top: 180px" href="{{ path('property-detail', {'id': property.id}) }}" class="project-arrow-2">
  125.                                                                     <span class="galerry-ref"></span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
  126.                                                                 </a>
  127.                                                             {% endif %}
  128.                                                         </div>
  129.                                                         <div class="col-lg-3 properties-price-absolute" style="background-color: #c48300; height: 56px;">
  130.                                                             <p style="font-size: 20px;" class="properties-price">
  131.                                                                 {{ property.price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : property.price.value ~  property.price.currency|replace({"EUR": " €"})  }}
  132.                                                             </p>
  133.                                                         </div>
  134.                             #}
  135.                             {# <div class="tag-ref-projet-2"><span class="text-tag-ref">{{ specialPropertyCategory(property.category) }}</span></div> #}
  136.                             {% if property.pictures is not empty %}
  137.                                 <div class="position-relative properties-slide slick-slide-single-{{ loop.index }}" style="height:265px;">
  138.                                     {% for picture in property.pictures|slice(0,3) %}
  139.                                         {#                                    <img class="img-100" src="{{ picture.url }}">#}
  140.                                         <div class="img" style="background: url('{{ picture.url }}')no-repeat center;background-size:cover;"  onclick="location.href='{{ path('property-detail', {'id': property.id}) }}'">
  141.                                         </div>
  142.                                     {% endfor %}
  143.                                 </div>
  144.                             {% else %}
  145.                                 <div class="img" style="background: url('{{ asset('build/Hudson_Ontario2.png') }}')no-repeat center;background-size:cover;"></div>
  146.                             {% endif %}
  147.                             <div class="row col-md-12 justify-content-between">
  148.                                 <ul class="col-md-4 items">
  149.                                     <li class="item surface">
  150.                                         {#
  151.                                         <img src="{{ asset('img/surface.svg') }}" class="surface-logo">
  152.                                         #}
  153.                                          {{ property.area.value == null ? '' : property.area.value ~ areaConversion(property.area.unit) }}
  154.                                     </li>
  155.                                     {% if property.bedrooms != 0 %}
  156.                                         <li class="item surface">
  157.                                             <img src="{{ asset('img/icons/chambre.svg') }}" alt="Icone chambre" style="width:22px;margin-right:10px;margin-top:5px;"> {{ property.bedrooms }}
  158.                                         </li>
  159.                                     {% endif %}
  160.                                 </ul>
  161.                                 <div class="col-md-8 properties-price d-flex justify-content-end">
  162.                                     {{ property.price.value == null ? '<span style="font-size: 21px !important;">sur demande</span>' : property.price.value|number_format(2, ',', ' ') ~  property.price.currency|replace({"EUR": " €"})  }}
  163.                                 </div>
  164.                             </div>
  165.                             <p class="city">{{ property.city.name }}</p>
  166.                             <p class="project-name">{{ getTypeProperty(property.type) }}</p>
  167.                         </div>
  168.                     {% else %}
  169.                         <h4>Aucun bien disponible avec ces critères</h4>
  170.                     {% endfor %}
  171.                 </div>
  172.                 {#<div class="text-center text-capitalize more-projects">
  173.                     <p>AFFICHER PLUS DE BIENS</p>
  174.                 </div>#}
  175.             </div>
  176.         </section>
  177.         <section class="other-properties pt-5 pb-5" style="background:#F7F7F7">
  178.             <div class="col-lg-8 mx-auto div-svg-header" style="display: flex; margin-top: 30px">
  179.                 <div class="col-lg-6">
  180.                     <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  181.                         <path id="Tracé_76" data-name="Tracé 76" d="M682.759,232.441h-9.089v14.77l9.089-1.931Z" transform="translate(-673.669 -232.441)" fill="#f6a400"></path>
  182.                     </svg>
  183.                     <h1 class="project-title">
  184.                         {% if app.request.attributes.get('_route_params')['keyword'] is defined or idCategory is defined %}
  185.                             {% if (app.request.attributes.get('_route_params')['keyword'] is defined and app.request.attributes.get('_route_params')['keyword'] == 'location') or (idCategory is defined and idCategory == 1) %}
  186.                                 {% set otherDispo = 'vente' %}
  187.                             {% else %}
  188.                                 {% set otherDispo = 'location' %}
  189.                             {% endif %}
  190.                         {% else %}
  191.                             {% set otherDispo = null %}
  192.                         {% endif %}
  193.                         NOS biens disponibles<br> {% if otherDispo %}À la <span style="color:#F6A400">{{ otherDispo }}</span>{% endif %}
  194.                     </h1>
  195.                 </div>
  196.             </div>
  197.             <div  class="col-lg-8 mx-auto">
  198.                 <div id="propertiesOther" class="col-lg-12 mt-5 property-other-list" style="display: flex; flex-wrap: wrap; flex-direction: row">
  199.                     {% for property in otherProperties %}
  200.                         <div  class="col-xl-4 col-lg-6 col-md-12 col-sm-12 div-img-hover-2" style="cursor: pointer">
  201.                             {#
  202.                             <div class="div-hover-2" id="div-hover-2" aria-haspopup="true" style="position: absolute; bottom: 8px; left: 9px; background-color: #242424; color: white; width: 291px; height: 70px">
  203.                                                             {% if property.comments[0].comment is not empty %}
  204.                                                                 <p class="project-content">
  205.                                                                     {{ property.comments[0].comment|slice(0, 350) }}</p>
  206.                                                                 <a href="{{ path('property-detail', {'id': property.id}) }}" class="project-arrow-2">
  207.                                                                     <span class="galerry-ref"></span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
  208.                                                                 </a>
  209.                                                             {% else %}
  210.                                                                 <a style="margin-top: 180px" href="{{ path('property-detail', {'id': property.id}) }}" class="project-arrow-2">
  211.                                                                     <span class="galerry-ref"></span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
  212.                                                                 </a>
  213.                                                             {% endif %}
  214.                                                         </div>
  215.                                                         <div class="col-lg-3 properties-price-absolute" style="background-color: #c48300; height: 56px;">
  216.                                                             <p style="font-size: 20px;" class="properties-price">
  217.                                                                 {{ property.price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : property.price.value ~  property.price.currency|replace({"EUR": " €"})  }}
  218.                                                             </p>
  219.                                                         </div>
  220.                             #}
  221.                             {# <div class="tag-ref-projet-2"><span class="text-tag-ref">{{ specialPropertyCategory(property.category) }}</span></div> #}
  222.                             {% if property.pictures is not empty %}
  223.                                 <div class="position-relative properties-slide slick-slide-single-{{ loop.index }}">
  224.                                     {% for picture in property.pictures|slice(0,3) %}
  225.                                         {#                                    <img class="img-100" src="{{ picture.url }}">#}
  226.                                         <div class="img" style="background-image: url('{{ picture.url }}')"  onclick="location.href='{{ path('property-detail', {'id': property.id}) }}'">
  227.                                         </div>
  228.                                     {% endfor %}
  229.                                 </div>
  230.                             {% else %}
  231.                                 <div class="img" style="background-image: url('{{ asset('build/Hudson_Ontario2.png') }}')"></div>
  232.                             {% endif %}
  233.                             <div class="row col-md-12 justify-content-between infos-list">
  234.                                 <ul class="col-md-4 items">
  235.                                     <li class="item surface">
  236.                                         {# <img src="{{ asset('img/surface.svg') }}" alt="icon surface" class="surface-logo"> #}
  237.                                         {{ property.area.value == null ? '' : property.area.value ~ areaConversion(property.area.unit) }}
  238.                                     </li>
  239.                                 </ul>
  240.                                 <div class="col-md-8 properties-price d-flex justify-content-end">
  241.                                     {{ property.price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : property.price.value|number_format(2, ',', ' ') ~  property.price.currency|replace({"EUR": " €"})  }}
  242.                                 </div>
  243.                             </div>
  244.                             <p class="city">{{ property.city.name }}</p>
  245.                             <p class="project-name">{{ getTypeProperty(property.type) }}</p>
  246.                         </div>
  247.                     {% endfor %}
  248.                 </div>
  249.                 {% set paramUrl = app.request.get('keyword') %}
  250.                 {% if app.request.get('keyword') == 'location' %}
  251.                     {% set paramUrl = 'vente' %}
  252.                 {% elseif app.request.get('keyword') == 'vente' %}
  253.                     {% set paramUrl = 'location' %}
  254.                 {% endif %}
  255.                 <div id="link-none" class="col-lg-12 mx-auto other-property-link div-svg-header d-flex justify-content-end">
  256.                     <div>
  257.                         <a id="link-none-a d-flex" class="property-span-arrow" href="{{ path('properties', {'keyword': paramUrl}) }}">Découvrir plus
  258.                             <svg class="svg-inline--fa fa-arrow-right fa-w-14 property-arrow" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg><!-- <i class="fas fa-arrow-right property-arrow"></i> Font Awesome fontawesome.com -->
  259.                         </a>
  260.                     </div>
  261.                 </div>
  262.             </div>
  263.         </section>
  264.         {#
  265.         <section style="margin-bottom: 80px; margin-top: 150px;">
  266.             <div class="col-lg-8 mx-auto div-svg-header">
  267.                 {% set sectionContent1 = content('Biens', 'Section-2') %}
  268.                 <div id="habiter-content-id" class="col-lg-6 habiter-content">
  269.                     <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  270.                         <path id="Tracé_76" data-name="Tracé 76" d="M682.759,232.441h-9.089v14.77l9.089-1.931Z" transform="translate(-673.669 -232.441)" fill="#f6a400"/>
  271.                     </svg>
  272.                     <div class="col-lg-7">
  273.                         <h1 class="habiter-title mb-5">
  274.                             {% if sectionContent1.name is defined %}
  275.                                 {{ sectionContent1.name }}
  276.                             {% else %}
  277.                                 HABITER AU LUXEMBOURG
  278.                             {% endif %}
  279.                         </h1>
  280.                         {% if sectionContent1.content is defined %}
  281.                             {{ sectionContent1.content|raw }}
  282.                         {% else %}
  283.                             Vous avez découvert l’appartement ou la maison de vos rêves ? Parfait ! En achetant au Luxembourg vous pouvez bénéficier de plusieurs avantages fiscaux.
  284.                         {% endif %}
  285.                     </div>
  286.                 </div>
  287.                 <div id="display-none-mobile" class="col-lg-6 habiter-img">
  288.                     {% if sectionContent1.picture is defined %}
  289.                         <img id="img-property-section" class="img-100" src="/uploads/images/{{ sectionContent1.picture[0].path }}">
  290.                     {% else %}
  291.                         <img id="img-property-section" class="img-100" src="https://tracol.lu/uploads/images/millebierg-6194cb6331d44212004123.png">
  292.                     {% endif %}
  293.                 </div>
  294.             </div>
  295.             <div id="link-none" class="col-lg-8 mx-auto div-svg-header">
  296.                 <div style="display: flex; align-content: center">
  297.                     <a id="link-none-a" class="property-span-arrow" href="{{ path('habiter') }}">Découvrir les avantages
  298.                         <i class="fas fa-arrow-right property-arrow"></i>
  299.                     </a>
  300.                 </div>
  301.             </div>
  302.         </section>
  303.         #}
  304.     </div>
  305.     
  306.     <div id="img-property-section" class="container-fluid" style="display: none">
  307.         <div id="link-ok" class="col-lg-3" style="display: flex; align-content: center">
  308.             <a class="property-span-arrow" href="{{ path('habiter') }}">Découvrir les avantages
  309.                 <i class="fas fa-arrow-right property-arrow"></i>
  310.             </a>
  311.         </div>
  312.         <div class="col-lg-6 habiter-img">
  313.             {% if sectionContent1.picture is defined %}
  314.                 <img style="padding: 0px;"  class="img-100" src="/uploads/images/{{ sectionContent1.picture[0].path }}">
  315.             {% else %}
  316.                 <img style="padding: 0px;"  class="img-100" src="https://tracol.lu/uploads/images/millebierg-6194cb6331d44212004123.png">
  317.             {% endif %}
  318.         </div>
  319.     </div>
  320.     <script>
  321.         {#const slideNextHeader = document.getElementById('slideNextHeader');#}
  322.         {#const slidePreviousHeader = document.getElementById('slidePreviousHeader');#}
  323.         {#const propertiesCity = document.getElementsByClassName('properties-city')#}
  324.         {#const propertiesArea = document.getElementsByClassName('properties-area')#}
  325.         {#const propertiesReference = document.getElementsByClassName('properties-reference')#}
  326.         {#const propertiesPrice = document.getElementsByClassName('properties-price')#}
  327.         {#const propertiesLink = document.getElementsByClassName('properties-link')#}
  328.         {#const currentFigure = document.getElementsByClassName('current-figure')#}
  329.         {#const lastFigure = document.getElementsByClassName('last-figure')#}
  330.         {#let slideHeader = document.getElementById('sliderHeader');#}
  331.         {#let positionHeader = 0;#}
  332.         {#let positionThumbHeader = 1;#}
  333.         {#arraySlidesHeader = [#}
  334.         {#    {#}
  335.         {#        'position': 1,#}
  336.         {#        'img': '{{ saleProperties[0].pictures[0].url }}',#}
  337.         {#        'city': '{{ saleProperties[0].city.name }}',#}
  338.         {#        'area': '{{ saleProperties[0].area.value == null ? '' : saleProperties[0].area.value ~ areaConversion(saleProperties[0].area.unit) }}',#}
  339.         {#        'reference': '{{ saleProperties[0].reference }}',#}
  340.         {#        'price':  '{{ saleProperties[0].price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : saleProperties[0].price.value ~  saleProperties[0].price.currency|replace({"EUR": " €"})  }}',#}
  341.         {#        'link': '{{ path('property-detail', {'id': saleProperties[0].id}) }}',#}
  342.         {#        'dot': 'dot1'#}
  343.         {#    },#}
  344.         {#    {#}
  345.         {#        'position': 2,#}
  346.         {#        'img': '{{ saleProperties[1].pictures[0].url }}',#}
  347.         {#        'city': '{{ saleProperties[1].city.name }}',#}
  348.         {#        'area': '{{ saleProperties[1].area.value == null ? '' : saleProperties[1].area.value ~ areaConversion(saleProperties[1].area.unit) }}',#}
  349.         {#        'reference': '{{ saleProperties[1].reference }}',#}
  350.         {#        'price':  '{{ saleProperties[1].price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : saleProperties[1].price.value ~  saleProperties[1].price.currency|replace({"EUR": " €"})  }}',#}
  351.         {#        'link': '{{ path('property-detail', {'id': saleProperties[1].id}) }}',#}
  352.         {#        'dot': 'dot2'#}
  353.         {#    },#}
  354.         {#    {#}
  355.         {#        'position': 3,#}
  356.         {#        'img': '{{ saleProperties[2].pictures[0].url }}',#}
  357.         {#        'city': '{{ saleProperties[2].city.name }}',#}
  358.         {#        'area': '{{ saleProperties[2].area.value == null ? '' : saleProperties[2].area.value ~ areaConversion(saleProperties[2].area.unit) }}',#}
  359.         {#        'reference': '{{ saleProperties[2].reference }}',#}
  360.         {#        'price':  '{{ saleProperties[2].price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : saleProperties[2].price.value ~  saleProperties[2].price.currency|replace({"EUR": " €"})  }}',#}
  361.         {#        'link': '{{ path('property-detail', {'id': saleProperties[2].id}) }}',#}
  362.         {#        'dot': 'dot3'#}
  363.         {#    },#}
  364.         {#];#}
  365.         {#slidePreviousHeader.addEventListener('click', () => {#}
  366.         {#    if (arraySlidesHeader.length < (positionThumbHeader  + 1)) {#}
  367.         {#        positionHeader = 0;#}
  368.         {#        positionThumbHeader = 1;#}
  369.         {#    } else {#}
  370.         {#        positionHeader++;#}
  371.         {#        positionThumbHeader++;#}
  372.         {#    }#}
  373.         {#    slideHeader.style.background =  `url(${arraySlidesHeader[positionHeader].img})no-repeat center`;#}
  374.         {#    propertiesCity[0].innerHTML = arraySlidesHeader[positionHeader].city#}
  375.         {#    propertiesArea[0].innerHTML = arraySlidesHeader[positionHeader].area#}
  376.         {#    propertiesReference[0].innerHTML = arraySlidesHeader[positionHeader].reference#}
  377.         {#    propertiesPrice[0].innerHTML = arraySlidesHeader[positionHeader].price#}
  378.         {#    propertiesLink[0].setAttribute('href', arraySlidesHeader[positionHeader].link)#}
  379.         {#    currentFigure[0].innerHTML = '0'+positionThumbHeader#}
  380.         {#    slideHeader.style.backgroundSize = `cover`;#}
  381.         {#});#}
  382.         {#slideNextHeader.addEventListener('click', () => {#}
  383.         {#    if (positionThumbHeader === 1) {#}
  384.         {#        positionHeader = (arraySlidesHeader.length - 1);#}
  385.         {#        positionThumbHeader = arraySlidesHeader.length;#}
  386.         {#    } else {#}
  387.         {#        positionHeader = positionHeader - 1;#}
  388.         {#        positionThumbHeader = positionThumbHeader - 1;#}
  389.         {#    }#}
  390.         {#    slideHeader.style.background =  `url(${arraySlidesHeader[positionHeader].img})no-repeat center`;#}
  391.         {#    propertiesCity[0].innerHTML = arraySlidesHeader[positionHeader].city#}
  392.         {#    propertiesArea[0].innerHTML = arraySlidesHeader[positionHeader].area#}
  393.         {#    propertiesReference[0].innerHTML = arraySlidesHeader[positionHeader].reference#}
  394.         {#    propertiesPrice[0].innerHTML = arraySlidesHeader[positionHeader].price#}
  395.         {#    currentFigure[0].innerHTML = '0'+positionThumbHeader#}
  396.         {#    slideHeader.style.backgroundSize = `cover`;#}
  397.         {#});#}
  398.         const futurProjects = document.getElementById('properties')
  399.         let buttons = document.getElementsByClassName('projectButton')
  400.         for (const eElement of buttons) {
  401.             eElement.addEventListener('click', function (e) {
  402.                 e.preventDefault()
  403.                 for (let button of buttons) {
  404.                     if (button.classList.contains('all')){
  405.                         button.classList.remove('all')
  406.                         button.classList.add('come')
  407.                         button.querySelector('span').classList.replace('span-all', 'span-projects')
  408.                     }
  409.                 }
  410.                 eElement.classList.remove('come')
  411.                 eElement.classList.add('all')
  412.                 eElement.querySelector('span').classList.replace('span-projects', 'span-all')
  413.                 fetch('properties/display/'+this.dataset.id, {
  414.                     method: 'GET',
  415.                 })
  416.                     .then(response => response.json())
  417.                     .then(data => {
  418.                         futurProjects.innerHTML = ''
  419.                         futurProjects.innerHTML = data.data
  420.                         _ww = $(window).width();
  421.                         var lightbox = $('.lightbox'),
  422.                             item = 0;
  423.                         $('.lightbox-on').click(function(e){
  424.                             e.stopPropagation();
  425.                             item = 0;
  426.                             console.log('click btn');
  427.                             var id = $(this).attr('data-id'),
  428.                                 max = 0;
  429.                             $('#'+id).toggle();
  430.                             $('#'+id).animate({opacity: 1}, 300);
  431.                             $('#'+id).find('img').each(function( i ) {
  432.                                 //console.log('h : '+$(this).height());
  433.                                 //console.log('w : '+$(this).width());
  434.                                 max = i;
  435.                                 item = 1;
  436.                                 counter(item, max+1);
  437.                                 itemWidth($(this));
  438.                             });
  439.                         });
  440.                         lightbox.click(function(e) {
  441.                             e.stopPropagation();
  442.                             $(this).animate({opacity: 0}, 300, function(){
  443.                                 $(this).toggle();
  444.                             });
  445.                         });
  446.                         $('.closer').on('click', function (e) {
  447.                             e.stopPropagation();
  448.                             $(this).parent().animate(
  449.                                 {opacity: 0},
  450.                                 300,
  451.                                 function(){
  452.                                     $(this).toggle();
  453.                                 }
  454.                             );
  455.                         });
  456.                         function itemWidth(img){
  457.                             img.closest('.items').width(img.width());
  458.                         }
  459.                         function counter(item, max){
  460.                             $('.counter').text(item + ' / ' + max);
  461.                         }
  462.                         $('.item', lightbox).on('click, swipeleft', function (e) {
  463.                             var wd = $(this).width(),
  464.                                 last = $(this).parent().find('.item').last(),
  465.                                 img = $(this).find('.img');
  466.                             itemWidth(img);
  467.                             $(this).animate(
  468.                                 {marginLeft: -wd, opacity: 0},
  469.                                 500,
  470.                                 'swing',
  471.                                 function(){
  472.                                     $(this).insertAfter(last);
  473.                                     $(this).css({marginLeft: 0, opacity: 1});
  474.                                 }
  475.                             );
  476.                         });
  477.                         $('.item', lightbox).on('swiperight', function (e) {
  478.                             var wd = $(this).width(),
  479.                                 first = $(this).parent().find('.item').first(),
  480.                                 last = $(this).parent().find('.item').last(),
  481.                                 img = $(this).find('.img');
  482.                             itemWidth(img);
  483.                             $(last).insertBefore($(this));
  484.                             $(last).css({marginLeft: -wd, opacity: 0});
  485.                             $(this).parent().find('.item').eq(0).animate(
  486.                                 {marginLeft: 0, opacity: 1},
  487.                                 500,
  488.                                 'swing'
  489.                             );
  490.                         });
  491.                         $('.arrows', lightbox).on('click', function (e) {
  492.                             e.stopPropagation();
  493.                             var wd = $(this).siblings('.items').find('.item').eq(0).width(),
  494.                                 max = $(this)
  495.                                     .siblings('.items').find('.item').length,
  496.                                 first = $(this).siblings('.items').find('.item').first(),
  497.                                 last = $(this).siblings('.items').find('.item').last(),
  498.                                 isRight = $(this).hasClass('right'),
  499.                                 marginL = isRight ? -wd : 0,
  500.                                 marginL0 = isRight ? 0: -wd,
  501.                                 opacOn = isRight ? 1 : 0,
  502.                                 opacOff = isRight ? 0 : 1;
  503.                             if (!isRight){
  504.                                 $(last).insertBefore(first);
  505.                                 $(last).css({marginLeft: -wd, opacity: 0});
  506.                                 item++;
  507.                                 if (item == max+1) {item = 1};
  508.                             } else {
  509.                                 item--;
  510.                                 if (item == 0) {item = max};
  511.                             };
  512.                             counter(item, max);
  513.                             var img = $(this).siblings('.items').find('.item').eq(0).find('.img');
  514.                             itemWidth(img);
  515.                             $(this).siblings('.items').find('.item').eq(1).animate(
  516.                                 {opacity: opacOn},
  517.                                 500,
  518.                                 'swing');
  519.                             $(this).siblings('.items').find('.item').eq(0).animate(
  520.                                 {marginLeft: marginL, opacity: 1},
  521.                                 500,
  522.                                 'swing',
  523.                                 function(){
  524.                                     if (isRight){
  525.                                         $(this).insertAfter(last);
  526.                                         $(this).css({ marginLeft: 0, opacity: 1});
  527.                                     }
  528.                                 }
  529.                             );
  530.                         });
  531.                         if (_ww > 768){
  532.                             $('.div-img-hover-2').hover(function (e) {
  533.                                 $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  534.                                 var htext = $(this).find('.project-content').height();
  535.                                 if (htext == undefined){htext = 0};
  536.                                 $(this).find('.div-hover-2').animate({height : htext+180}, 150);
  537.                                 $(this).find('.project-content').css({'visibility': 'visible'});
  538.                                 $(this).find('.project-content').animate({opacity: 1}, 150);
  539.                             }, function() {
  540.                                 console.log('down');
  541.                                 $(this).find('.div-hover-2').animate({height : 85}, 150);
  542.                                 $(this).find('.project-arrow-2').animate({opacity: 0}, 150);
  543.                                 $(this).find('.project-content').animate({opacity: 0}, 150, function(){
  544.                                     $(this).find('.project-content').css({'visibility': 'hidden'});
  545.                                 });
  546.                             });
  547.                         } else {
  548.                             $('.div-img-hover-2').on( "tap", function( event ) {
  549.                                 console.log('tap tap');
  550.                                 var opened = $(this).find('.div-hover-2').hasClass('open'),
  551.                                     ht = opened ? 85 : '100%',
  552.                                     vis = opened ? 0 : 1;
  553.                                 $(this).find('.div-hover-2').toggleClass('open');
  554.                                 $(this).find('.div-hover-2').animate({height : ht}, 150);
  555.                                 $(this).find('.project-arrow-2').animate({opacity: vis}, 150);
  556.                             });
  557.                         }
  558.                     })
  559.                     .catch((error) => {
  560.                         console.error('Error:', error);
  561.                     });
  562.             })
  563.         }
  564.         if (window.matchMedia("(max-width: 768px)").matches) {
  565.             new Flicking("#flick3", {
  566.                 moveType: "freeScroll",
  567.                 bound: true
  568.             });
  569.         }
  570.         if (window.matchMedia("(max-width: 768px)").matches) {
  571.             const test = document.getElementsByClassName('select-filter')
  572.             for (const testElement of test) {
  573.                 testElement.addEventListener('click', function (e) {
  574.                     e.preventDefault()
  575.                     testElement.classList.toggle('select-projet-active')
  576.                     const infos = document.querySelector('.projectButton.all')
  577.                     const dataId = []
  578.                     const tests = document.querySelectorAll('.select-filter.select-projet-active')
  579.                     for (const test1 of tests) {
  580.                         dataId.push(parseFloat(test1.dataset.id))
  581.                     }
  582.                     fetch('properties/display/'+infos.dataset.id+'/params/' + JSON.stringify(dataId), {
  583.                         method: 'GET',
  584.                     })
  585.                         .then(response => response.json())
  586.                         .then(data => {
  587.                             futurProjects.innerHTML = data.data
  588.                         })
  589.                         .catch((error) => {
  590.                             console.error('Error:', error);
  591.                         });
  592.                 })
  593.             }
  594.         } else {
  595.             const test = document.getElementsByClassName('select-projet')
  596.             const textOutput = document.querySelector("#showOutput");
  597.             for (const testElement of test) {
  598.                 testElement.addEventListener('click', function (e) {
  599.                     displayLoading()
  600.                     e.preventDefault()
  601.                     testElement.classList.toggle('select-projet-active')
  602.                     const infos = document.querySelector('.projectButton.all')
  603.                     const dataId = []
  604.                     const tests = document.querySelectorAll('.select-projet.select-projet-active')
  605.                     for (const test1 of tests) {
  606.                         dataId.push(parseFloat(test1.dataset.id))
  607.                     }
  608.                     fetch('properties/display/'+infos.dataset.id+'/params/' + JSON.stringify(dataId), {
  609.                         method: 'GET'
  610.                     })
  611.                         .then(response => response.json())
  612.                         .then(data => {
  613.                             hideLoading()
  614.                             futurProjects.innerHTML = data.data
  615.                             _ww = $(window).width();
  616.                             var lightbox = $('.lightbox'),
  617.                                 item = 0;
  618.                             $('.lightbox-on').click(function(e){
  619.                                 e.stopPropagation();
  620.                                 item = 0;
  621.                                 console.log('click btn');
  622.                                 var id = $(this).attr('data-id'),
  623.                                     max = 0;
  624.                                 $('#'+id).toggle();
  625.                                 $('#'+id).animate({opacity: 1}, 300);
  626.                                 $('#'+id).find('img').each(function( i ) {
  627.                                     //console.log('h : '+$(this).height());
  628.                                     //console.log('w : '+$(this).width());
  629.                                     max = i;
  630.                                     item = 1;
  631.                                     counter(item, max+1);
  632.                                     itemWidth($(this));
  633.                                 });
  634.                             });
  635.                             lightbox.click(function(e) {
  636.                                 e.stopPropagation();
  637.                                 $(this).animate({opacity: 0}, 300, function(){
  638.                                     $(this).toggle();
  639.                                 });
  640.                             });
  641.                             $('.closer').on('click', function (e) {
  642.                                 e.stopPropagation();
  643.                                 $(this).parent().animate(
  644.                                     {opacity: 0},
  645.                                     300,
  646.                                     function(){
  647.                                         $(this).toggle();
  648.                                     }
  649.                                 );
  650.                             });
  651.                             function itemWidth(img){
  652.                                 img.closest('.items').width(img.width());
  653.                             }
  654.                             function counter(item, max){
  655.                                 $('.counter').text(item + ' / ' + max);
  656.                             }
  657.                             $('.item', lightbox).on('click, swipeleft', function (e) {
  658.                                 var wd = $(this).width(),
  659.                                     last = $(this).parent().find('.item').last(),
  660.                                     img = $(this).find('.img');
  661.                                 itemWidth(img);
  662.                                 $(this).animate(
  663.                                     {marginLeft: -wd, opacity: 0},
  664.                                     500,
  665.                                     'swing',
  666.                                     function(){
  667.                                         $(this).insertAfter(last);
  668.                                         $(this).css({marginLeft: 0, opacity: 1});
  669.                                     }
  670.                                 );
  671.                             });
  672.                             $('.item', lightbox).on('swiperight', function (e) {
  673.                                 var wd = $(this).width(),
  674.                                     first = $(this).parent().find('.item').first(),
  675.                                     last = $(this).parent().find('.item').last(),
  676.                                     img = $(this).find('.img');
  677.                                 itemWidth(img);
  678.                                 $(last).insertBefore($(this));
  679.                                 $(last).css({marginLeft: -wd, opacity: 0});
  680.                                 $(this).parent().find('.item').eq(0).animate(
  681.                                     {marginLeft: 0, opacity: 1},
  682.                                     500,
  683.                                     'swing'
  684.                                 );
  685.                             });
  686.                             $('.arrows', lightbox).on('click', function (e) {
  687.                                 e.stopPropagation();
  688.                                 var wd = $(this).siblings('.items').find('.item').eq(0).width(),
  689.                                     max = $(this)
  690.                                         .siblings('.items').find('.item').length,
  691.                                     first = $(this).siblings('.items').find('.item').first(),
  692.                                     last = $(this).siblings('.items').find('.item').last(),
  693.                                     isRight = $(this).hasClass('right'),
  694.                                     marginL = isRight ? -wd : 0,
  695.                                     marginL0 = isRight ? 0: -wd,
  696.                                     opacOn = isRight ? 1 : 0,
  697.                                     opacOff = isRight ? 0 : 1;
  698.                                 if (!isRight){
  699.                                     $(last).insertBefore(first);
  700.                                     $(last).css({marginLeft: -wd, opacity: 0});
  701.                                     item++;
  702.                                     if (item == max+1) {item = 1};
  703.                                 } else {
  704.                                     item--;
  705.                                     if (item == 0) {item = max};
  706.                                 };
  707.                                 counter(item, max);
  708.                                 var img = $(this).siblings('.items').find('.item').eq(0).find('.img');
  709.                                 itemWidth(img);
  710.                                 $(this).siblings('.items').find('.item').eq(1).animate(
  711.                                     {opacity: opacOn},
  712.                                     500,
  713.                                     'swing');
  714.                                 $(this).siblings('.items').find('.item').eq(0).animate(
  715.                                     {marginLeft: marginL, opacity: 1},
  716.                                     500,
  717.                                     'swing',
  718.                                     function(){
  719.                                         if (isRight){
  720.                                             $(this).insertAfter(last);
  721.                                             $(this).css({ marginLeft: 0, opacity: 1});
  722.                                         }
  723.                                     }
  724.                                 );
  725.                             });
  726.                             if (_ww > 768){
  727.                                 $('.div-img-hover-2').hover(function (e) {
  728.                                     $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  729.                                     var htext = $(this).find('.project-content').height();
  730.                                     if (htext == undefined){htext = 0};
  731.                                     $(this).find('.div-hover-2').animate({height : htext+180}, 150);
  732.                                     $(this).find('.project-content').css({'visibility': 'visible'});
  733.                                     $(this).find('.project-content').animate({opacity: 1}, 150);
  734.                                 }, function() {
  735.                                     console.log('down');
  736.                                     $(this).find('.div-hover-2').animate({height : 85}, 150);
  737.                                     $(this).find('.project-arrow-2').animate({opacity: 0}, 150);
  738.                                     $(this).find('.project-content').animate({opacity: 0}, 150, function(){
  739.                                         $(this).find('.project-content').css({'visibility': 'hidden'});
  740.                                     });
  741.                                 });
  742.                             } else {
  743.                                 $('.div-img-hover-2').on( "tap", function( event ) {
  744.                                     console.log('tap tap');
  745.                                     var opened = $(this).find('.div-hover-2').hasClass('open'),
  746.                                         ht = opened ? 85 : '100%',
  747.                                         vis = opened ? 0 : 1;
  748.                                     $(this).find('.div-hover-2').toggleClass('open');
  749.                                     $(this).find('.div-hover-2').animate({height : ht}, 150);
  750.                                     $(this).find('.project-arrow-2').animate({opacity: vis}, 150);
  751.                                 });
  752.                             }
  753.                             $('.div-hover').hover(function (e) {
  754.                                 $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  755.                             }, function() {
  756.                                 $(this).find('.project-arrow-2').animate({opacity: 0}, 50);
  757.                             });
  758.                         })
  759.                         .catch((error) => {
  760.                         });
  761.                 })
  762.             }
  763.         }
  764.         const filter = document.getElementById('filters')
  765.         const filterElement = document.getElementById('form-search-filter-ajax')
  766.         filter.addEventListener('click', function (e) {
  767.             e.preventDefault()
  768.             filterElement.classList.toggle('show')
  769.         })
  770.         const loader = document.querySelector("#loading");
  771.         function displayLoading() {
  772.             loader.classList.add("display");
  773.             // to stop loading after some time
  774.             setTimeout(() => {
  775.                 loader.classList.remove("display");
  776.             }, 5000);
  777.         }
  778.         // hiding loading
  779.         function hideLoading() {
  780.             loader.classList.remove("display");
  781.         }
  782.     </script>
  783.     <script>
  784.         const arrowPrev = `<svg xmlns="http://www.w3.org/2000/svg" width="7.985" height="13.211" viewBox="0 0 7.985 13.211">
  785.                                 <path id="np_arrow-up_888648_000000" d="M13.211,1.381l-6.606,6.6L0,1.381,1.381,0,6.606,5.022h0L11.83,0Z" transform="translate(7.985) rotate(90)" fill="#fff"/>
  786.                             </svg>`;
  787.         const arrowNext= `<svg xmlns="http://www.w3.org/2000/svg" width="7.985" height="13.211" viewBox="0 0 7.985 13.211">
  788.                             <path id="np_arrow-up_888648_000000" d="M13.211,1.381l-6.606,6.6L0,1.381,1.381,0,6.606,5.022h0L11.83,0Z" transform="translate(7.985) rotate(90)" fill="#fff"/>
  789.                         </svg>`;
  790.         var countProperties = '{{ properties|length }}';
  791.         var loopProp = 1;
  792.         while (loopProp <= countProperties+3) {
  793.             $('.slick-slide-single-'+loopProp).slick({
  794.                 'slidesToShow': 1,
  795.                 'prevArrow': `<div class="arrow-left square-black d-flex justify-content-center align-items-center position-absolute">${arrowPrev}</div>`,
  796.                 'nextArrow': `<div class="arrow-right square-black d-flex justify-content-center align-items-center position-absolute">${arrowNext}</div>`
  797.             });
  798.             {#
  799.             if (window.innerWidth > 768) {
  800.                 $('.slick-slide-single-'+loopProp).slick({
  801.                     'slidesToShow': 1,
  802.                     'prevArrow': `<div class="arrow-left square-black d-flex justify-content-center align-items-center position-absolute">${arrowPrev}</div>`,
  803.                     'nextArrow': `<div class="arrow-right square-black d-flex justify-content-center align-items-center position-absolute">${arrowNext}</div>`
  804.                 });
  805.             }
  806.             #}
  807.             loopProp++;
  808.         }
  809.     </script>
  810. {% endblock %}