templates/property-detail.html.twig line 343

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Détails - {{ property.reference }}{% endblock %}
  5. {% block body %}
  7.     <header class="header-habiter slider-home slider-not-home who-is bottom-right-border position-relative overflow-hidden to-right lightbox-on" 
  8.     id="sliderHeader"  
  9.     style="background: url({{property.pictures[0].url}}) center center no-repeat;background-size:cover; position: relative; height: 91vh; cursor: zoom-in;"
  10.     data-id="modul-ref">
  11.         <div class="container-fluid" style="padding: 0">
  12.             <div class="col-lg-4 mx-auto" style="display: none;">
  13.                 <div class="arrows-slides" style="display: flex; justify-content: space-between; margin-top: 20px; align-items: center; position: absolute">
  14.                     <div class="arrow-right" id="slideNextHeader"><a><i class="fas fa-arrow-left"></i></a></div>
  15.                     <div><span class="current-figure">01</span><span class="bar-figure">/</span><span class="last-figure">{{ property.pictures|length <= 9 ? '0' ~ property.pictures|length : property.pictures|length }}</span></div>
  16.                     <div class="arrow-left" id="slidePreviousHeader"><a><i class="fas fa-arrow-right"></i></a></div>
  17.                 </div>
  18.             </div>
  21.             {#
  22.             <div class="col-lg-12 property-detail-header" style="display: flex; position: absolute; bottom: 0px;">
  23.                <div class="col-lg-2 container-properties-header first"></div>
  24.                <div class="col-lg-5 container-properties-header" style="display: flex; align-items: center">
  25.                    <div class="col-lg-3">
  26.                        <p class="properties-city" >{{ property.city.name }}</p>
  27.                    </div>
  28.                    <div class="col-lg-3">
  29.                        <p class="properties-area" style="text-align: center">{{ property.area.value == null ? '' : property.area.value ~ areaConversion(property.area.unit) }} </p>
  30.                    </div>
  31.                    <div class="col-lg-3">
  32.                        <p class="properties-reference-detail">{{ property.reference }}</p>
  33.                    </div>
  34.                </div>
  35.                <div class="col-lg-1 price-detail-bien" style="background-color: #c48300; display: flex; align-items: center; justify-content: center">
  36.                    <p class="properties-price">
  37.                        {{ property.price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : property.price.value ~  property.price.currency|number_format(2, '.', ',')|replace({"EUR": " €"})  }}
  38.                    </p>
  39.                </div>
  40.            </div>
  41.             #}
  43.         </div>
  45.         <div class="sticky-text">Cliquer ici<br/>pour voir toutes les photos</div>
  47.         {% if property.pictures is not empty %}
  48.             <div class="lightbox" id="modul-ref">
  49.                 <div class="closer"></div>
  50.                 <div class="arrows left">&#8592;</div>
  51.                 <div class="arrows right">&#8594;</div>
  52.                 <div class="counter">1/1</div>
  53.                 <ul class="items">
  54.                     {% for picture in property.pictures %}
  55.                         <li class="item">
  56.                             <img class="img" src="{{ picture.url }}">
  57.                         </li>
  58.                     {% endfor %}
  59.                 </ul>
  60.             </div>
  61.         {% endif %}
  62.         {% if property.pictures is not empty %}
  63.             {% for picture in property.pictures %}
  64.                 <div class="lightbox" id="modul-ref-{{ loop.index }}">
  65.                     <div class="closer"></div>
  66.                     <ul class="items">
  67.                         <li class="item">
  68.                             <img class="img" src="{{ picture.url }}">
  69.                         </li>
  70.                     </ul>
  71.                 </div>
  72.             {% endfor %}
  73.         {% endif %}
  74.     </header>
  76.     {#
  77.     <div class="col-lg-1 infos-person" style="display: flex; position: fixed; right: 274px;">
  78.         <div class="col-lg-12">
  79.             {% if property.user.picture is null %}
  80.                 <img id="img-card" src="{{ asset('build/367e841db1c2c356ba01f78a108a59cb0c18ade2.png') }}">
  81.             {% else %}
  82.                 <img id="img-card" width="161px" height="161px" src="{{ property.user.picture }}">
  83.             {% endif %}
  84.         </div>
  85.     </div>
  86.     #}
  88.     {#
  89.     <div class="col-lg-1 infos-person" style="position: fixed; width: 265px; display: flex; flex-direction: column">
  90.        <div class="col-lg-12 more-informations">
  91.            <p class="p-info-property">Pour plus d’informations concernant ce bien</p>
  92.            <p class="p-first-property">{{ property.user.firstname }}
  93.                {{ property.user.lastname }}
  94.        </div>
  95.        <div style="display: flex">
  96.            <div class="col-lg-2 p-mail-property">
  97.                <a href="mailto:{{ property.user.email }}">
  98.                    <svg id="SVGMail" width="41" height="34" 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 41 34"><defs></defs><desc>Generated with Avocode.</desc><g><g><title>np_mail_91_000000</title><path d="M30.21872,22.58808l-6.13407,-5.78542l6.13407,-5.23238zM12.25999,22.93334l5.93459,-5.59678l2.63204,2.24505l2.63204,-2.24505l5.93459,5.59678zM11.4345,11.57018l6.13407,5.23239l-6.13407,5.78541zM29.54963,11.06668l-8.72302,7.44143l-8.72221,-7.44143zM10.6178,10.24829v13.50346h20.41763v-13.50346z" fill="#ffffff" fill-opacity="1"></path><path d="M30.21872,22.58808l-6.13407,-5.78542l6.13407,-5.23238zM12.25999,22.93334l5.93459,-5.59678l2.63204,2.24505l2.63204,-2.24505l5.93459,5.59678zM11.4345,11.57018l6.13407,5.23239l-6.13407,5.78541zM29.54963,11.06668l-8.72302,7.44143l-8.72221,-7.44143zM10.6178,10.24829v13.50346h20.41763v-13.50346z" fill-opacity="0" fill="#ffffff" stroke-dashoffset="0" stroke-linejoin="miter" stroke-linecap="butt" stroke-opacity="1" stroke="#ffffff" stroke-miterlimit="20" stroke-width="1"></path></g></g></svg>
  99.                </a>
  100.            </div>
  101.            <div class="col-lg-10 p-phone-property">
  102.                <a href="tel:{{ property.user.phone }}">
  103.                    <?xml version="1.0" encoding="UTF-8"?>
  104.                    <svg id="SVGPhone" width="28" height="24" 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 28 24"><defs></defs><desc>Generated with Avocode.</desc><g><g><title>Tracé 116</title><path d="M6.29423,1.97623l1.55604,5.45095l-1.79468,1.83287l0.32457,0.62049c1.80183,3.46169 4.62861,6.28247 8.09518,8.07624l0.50593,0.25775l2.72065,-1.82334l4.58217,1.54648v4.08578c-5.2362,-0.22434 -10.19412,-2.41279 -13.8898,-6.12851c-3.73264,-3.69781 -5.93178,-8.66917 -6.15722,-13.9182zM23.23881,23.93248h0.95462v-1.90924h2.86386v-1.90924h-2.86386v-3.55119l-6.82561,-2.27199l-2.55838,1.70879c-2.68607,-1.50592 -4.91392,-3.7134 -6.44376,-6.38633l1.63241,-1.63242l-2.272,-7.91372h-7.39838v0.95462c-0.03222,6.08574 2.37461,11.93046 6.68234,16.22854c4.29808,4.30786 10.1428,6.71442 16.22854,6.68234z" fill="#ffffff" fill-opacity="1"></path></g></g></svg>
  105.                    {{ property.user.phone }}
  106.                </a>
  107.            </div>
  108.        </div>
  109.    </div>
  110.     #}
  113.     <section class="items-property-single mt-5 mb-5 pb-5">
  114.         <div class="row col-lg-8 mx-auto">
  115.             {% if property.area.value %}
  116.                 <div class="item-single">
  117.                     <img src="{{ asset('img/icons/surface.svg') }}" alt="Icone surface">
  118.                     <span>{{ property.area.value == null ? '' : property.area.value ~ areaConversion(property.area.unit) }}</span>
  119.                 </div>
  120.             {% endif %}
  121.             {% if property.bedrooms %}
  122.                 <div class="item-single">
  123.                     <img src="{{ asset('img/icons/chambre.svg') }}" alt="Icone chambre">
  124.                     <span>{{ property.bedrooms }} chambre{% if property.bedrooms > 1 %}s{% endif %}</span>
  125.                 </div>
  126.             {% endif %}
  127.             {% for area in property.areas %}
  128.                 {% if area.type == 13 %}
  129.                     <div class="item-single">
  130.                         <img src="{{ asset('img/icons/salle_bain.svg') }}" alt="Icone salle de bain">
  131.                         <span>{{ area.number }} {{ propertyArea(area.type) }}</span>
  132.                     </div>
  133.                 {% endif %}
  134.             {% endfor %}
  135.             {% for area in property.areas %}
  136.                 {% if area.type == 4 %}
  137.                     <div class="item-single">
  138.                         <img src="{{ asset('img/icons/garage.svg') }}" alt="Icone garage">
  139.                         <span>{{ area.number }} {{ propertyArea(area.type) }}</span>
  140.                     </div>
  141.                 {% endif %}
  142.             {% endfor %}
  143.             {% for area in property.areas %}
  144.                 {% if area.type == 74 or area.type == 75 %}
  145.                     <div class="item-single">
  146.                         <img src="{{ asset('img/icons/parking.svg') }}" alt="Icone parking">
  147.                         <span>{{ area.number }} {{ propertyArea(area.type) }}</span>
  148.                     </div>
  149.                 {% endif %}
  150.             {% endfor %}
  151.             {% for area in property.areas %}
  152.                 {% if area.type == 18 %}
  153.                     <div class="item-single">
  154.                         <img src="{{ asset('img/icons/terasse.svg') }}" alt="Icone terasse">
  155.                         <span>{{ area.number }} {{ propertyArea(area.type) }}</span>
  156.                     </div>
  157.                 {% endif %}
  158.             {% endfor %}
  159.             {% if property.construction.construction_year %}
  160.                 <div class="item-single">
  161.                     <img src="{{ asset('img/icons/construction.svg') }}" alt="Icone date construction">
  162.                     <span>Année de construction : {{ property.construction.construction_year }}</span>
  163.                 </div>
  164.             {% endif %}
  165.             {% if property.available_at %}
  166.                 <div class="item-single availability">
  167.                     <img src="{{ asset('img/icons/dispo.svg') }}" alt="Icone disponibilité">
  168.                     <span>Disponibilité<br>{{ property.available_at == null ? '-' : property.available_at}}</span>
  169.                 </div>
  170.             {% endif %}
  171.         </div>
  172.     </section>
  174.     <section class="desc-property mt-5">
  175.         <div class="col-lg-8 mx-auto">
  176.             <div class="row">
  177.                 <div class="col-md-4">
  178.                     <div class="col-lg-12" style="display: flex;flex-direction: column;margin-left: 10px;">
  179.                         <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  180.                             <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"/>
  181.                         </svg>
  182.                         <h1 class="project-title" style="font-size: 2.3em;font-weight: bold">Descriptif</h1>
  183.                         <p class="city">Belval</p>
  184.                         <p class="project-name">2.0.CO2</p>
  185.                         <p class="price" style="color:#F6A400">
  186.                             {{ property.price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : property.price.value|number_format(2, ',', ' ') ~  property.price.currency|replace({"EUR": " €"})  }}
  187.                         </p>
  189.                         <div class="col-md-10 row list-pictures">
  190.                             {% for picture in property.pictures %}
  191.                                 <div class="col-md-4" style="margin-bottom:10px;">
  192.                                     <div class="img lightbox-on-second"
  193.                                          style="background:url('{{ picture.url }}')no-repeat center;background-size:cover;max-height:90px;width:100%;margin:0!important;"
  194.                                          data-id="modul-ref-{{ loop.index }}">
  195.                                     </div>
  196.                                 </div>
  197.                             {% endfor %}
  198.                         </div>
  200.                         <div class="contact-property col-md-10 mt-4 p-3">
  201.                             <p>Pour plus d’informations concernant ce bien contactez</p>
  202.                             <h3>{{ property.user.firstname }} {{ property.user.lastname }}</h3>
  203.                         </div>
  204.                         <div class="contacinfos col-md-10 p-3 d-flex justify-content-between">
  205.                             <a href="mailto:{{ property.user.email }}">
  206.                                 <svg xmlns="http://www.w3.org/2000/svg" width="21.418" height="14.503" viewBox="0 0 21.418 14.503">
  207.                                     <path id="np_mail_91_000000" d="M0,17V30.5H20.418V17Zm18.932.818L10.209,25.26,1.487,17.818Zm-18.115.5,6.134,5.232L.817,29.34Zm.825,11.363,5.935-5.6,2.632,2.245,2.632-2.245,5.935,5.6ZM19.6,29.34l-6.134-5.785L19.6,18.322Z" transform="translate(0.5 -16.5)" fill="#fff" stroke="#fff" stroke-width="1"/>
  208.                                 </svg>
  209.                             </a>
  210.                             <a href="tel:{{ property.user.mobile }}" style="text-decoration:none;color:#fff;">
  211.                                 <svg id="np_phone-call_3960627_000000" xmlns="http://www.w3.org/2000/svg" width="22.518" height="20.105" viewBox="0 0 22.518 20.105">
  212.                                     <path id="Tracé_116" data-name="Tracé 116" d="M25.549,35.73h.8V34.122h2.413V32.513H26.354V29.522L20.6,27.608l-2.155,1.44a14.328,14.328,0,0,1-5.428-5.38L14.4,22.292l-1.914-6.667H6.249v.8a19.22,19.22,0,0,0,19.3,19.3Zm-14.274-18.5,1.311,4.592L11.074,23.37l.273.523a15.953,15.953,0,0,0,6.82,6.8l.426.217,2.292-1.536,3.86,1.3v3.442A17.734,17.734,0,0,1,7.857,17.234Z" transform="translate(-6.248 -15.626)" fill="#fff"/>
  213.                                 </svg>
  214.                                 {{ property.user.mobile }}
  215.                             </a>
  216.                         </div>
  217.                     </div>
  218.                 </div>
  219.                 <div class="col-md-8 description-prop-container">
  220.                     <div class="description-prop pt-3">
  221.                         <p>{{ property.comments[0].comment|raw|nl2br }}</p>
  222.                     </div>
  223.                 </div>
  224.             </div>
  225.         </div>
  227.     </section>
  230.     {#
  231.     <section class="project" style="margin-bottom: 120px">
  232.         <div class="col-lg-8 mx-auto div-svg-header" style="display: flex; align-items: center; margin-top: 20px">
  233.         </div>
  234.         <div class="col-lg-8 mx-auto div-svg-header" style="display: flex; align-items: center; padding-left: 7px">
  235.             <button data-id="descriptif-div" class="btn btn-primary all border-radius projectButton"><span class="span-all">DESCRIPTIF</span></button>
  236.             <button data-id="practical-infos-div" class="btn btn-primary come border-radius projectButton"><span class="span-projects">INFOS PRATIQUES</span></button>
  237.             <button data-id="interior-div" class="btn btn-primary come border-radius projectButton"><span class="span-projects">INTERIEUR</span></button>
  238.             <button data-id="exterior-div" class="btn btn-primary come border-radius projectButton"><span class="span-projects">EXTERIEUR</span></button>
  239.             <button data-id="energy-div" class="btn btn-primary come border-radius projectButton"><span class="span-projects">ENERGIE</span></button>
  240.         </div>
  241.         <div id="descriptif-div" class="offset-lg-2 col-lg-4 property-comment display-flex">
  242.             <p>{{ property.comments[0].comment|raw|nl2br }}</p>
  243.         </div>
  244.         <div id="practical-infos-div" class="offset-lg-2 col-lg-8 display-none" style="flex-wrap: wrap;">
  245.             <table class="table">
  246.                 <tbody>
  247.                 <tr class="table-property-first" style="background-color: #f7e7cb;">
  248.                     {% if property.services is not null %}
  249.                     {% for service in property.services %}
  250.                     <td class="text-property-infos">{{ propertyServices(service) }}</td>
  251.                     {% endfor %}
  252.                     {% endif %}
  253.                 </tr>
  254.                 </tbody>
  255.             </table>
  257.         </div>
  258.         <div id="interior-div" class="offset-lg-2 col-lg-8 display-none">
  259.             <table class="table">
  260.                 <tbody>
  261.                 <tr class="table-property-first" style="background-color: #f7e7cb;">
  262.                     <td class="text-property">Surface</td>
  263.                     <td class="text-property-infos">{{ property.area.value == null ? '' : property.area.value ~ areaConversion(property.area.unit) }}</td>
  264.                     <td class="text-property">Eau</td>
  265.                     <td class="text-property-infos">{{ propertyHotWater(property.water.hot_device) == null ? '-' : propertyHotWater(property.water.hot_device) ~ " " ~ propertyHotWaterAccess(property.water.hot_access)  }}</td>
  266.                     <td class="text-property">An Construction</td>
  267.                     <td class="text-property-infos">{{ property.construction.construction_year == null ? '-' :  property.construction.construction_year }}</td>
  268.                 </tr>
  269.                {% if property.areas is empty %}
  270.                    <tr>
  271.                        <td class="text-property">Condition</td>
  272.                        <td class="text-property-infos">{{ property.condition == null ? '-' : propertyCondition(property.condition) }}</td>
  273.                    </tr>
  274.                    <tr class="table-property-first" style="background-color: #f7e7cb;">
  275.                        <td class="text-property">Etage</td>
  276.                        <td class="text-property-infos">{{ property.floor.type == null ? '-' : propertyFloor(property.floor.type) }}</td>
  277.                        <td class="text-property">Chauffage</td>
  278.                        <td class="text-property-infos">{{ propertyHeatingDevice(property.heating.device) == null ? '-' : propertyHeatingDevice(property.heating.device) ~ " " ~ propertyHeatingType(property.heating.type)  }}</td>
  279.                        <td class="text-property">Disponibilite</td>
  280.                        <td class="text-property-infos">{{ property.available_at == null ? '-' : property.available_at}}</td>
  281.                    </tr>
  282.                    {% else %}
  283.                        <tr>
  284.                            {% for area in property.areas %}
  285.                                {% if propertyArea(area.type) is not null %}
  286.                                    <td class="text-property-first">{{ propertyArea(area.type) }}</td>
  287.                                    <td class="text-property-infos">{{ area.number }}</td>
  288.                                {% endif %}
  289.                            {% endfor %}
  290.                        </tr>
  291.                        <tr class="table-property-first" style="background-color: #f7e7cb;">
  292.                            <td class="text-property">Etage</td>
  293.                            <td class="text-property-infos">{{ property.floor.type == null ? '-' : propertyFloor(property.floor.type) }}</td>
  294.                            <td class="text-property">Chauffage</td>
  295.                            <td class="text-property-infos">{{ propertyHeatingDevice(property.heating.device) == null ? '-' : propertyHeatingDevice(property.heating.device) ~ " " ~ propertyHeatingType(property.heating.type)  }}</td>
  296.                            <td class="text-property">Disponibilite</td>
  297.                            <td class="text-property-infos">{{ property.available_at == null ? '-' : property.available_at}}</td>
  298.                        </tr>
  299.                        <tr>
  300.                            <td class="text-property">Condition</td>
  301.                            <td class="text-property-infos">{{ property.condition == null ? '-' : propertyCondition(property.condition) }}</td>
  302.                        </tr>
  303.                 {% endif %}
  304.                 </tbody>
  305.             </table>
  306.         </div>
  307.         <div id="exterior-div" class="offset-lg-2 col-lg-8 display-none">
  308.             <table class="table">
  309.                 <tbody>
  310.                 {% if property.areas is not empty %}
  311.                     <tr class="table-property-first" style="background-color: #f7e7cb;">
  312.                         {% for area in property.areas %}
  313.                             {% if propertyExterior(area.type) is not null %}
  314.                             <td class="text-property-first">{{ propertyExterior(area.type) }}</td>
  315.                             <td class="text-property-infos">{{ area.number }}</td>
  316.                             {% endif %}
  317.                         {% endfor %}
  318.                     </tr>
  319.                 {% endif %}
  320.                 </tbody>
  321.             </table>
  323.         </div>
  324.         <div id="energy-div" class="offset-lg-2 col-lg-8 display-none">
  325.             <table class="table">
  326.                 <tbody>
  327.             {% if property.regulations is not empty %}
  328.                 <tr class="table-property-first" style="background-color: #f7e7cb;">
  329.                     {% for energy in property.regulations %}
  330.                         <td class="text-property-first">{{ propertyEnergy(energy.type) }}</td>
  331.                         <td class="text-property-infos">{{ energy.value }}</td>
  332.                     {% endfor %}
  333.                 </tr>
  334.             {% endif %}
  335.                 </tbody>
  336.             </table>
  337.         </div>
  338.     </section>
  339.     #}
  342.     <section class="similar-properties">
  343.         {% set sectionContent1 = content('Bien-detail', 'Section-1') %}
  344.         <div class="col-lg-8 mx-auto div-svg-header pre-section">
  345.             <div class="col-lg-5" style="font-size: 2.3em;display: flex;flex-direction: column;margin-left: 10px;">
  346.                 <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  347.                     <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"/>
  348.                 </svg>
  349.                 <h1 class="project-title" style="font-weight: bold">{% if sectionContent1.name is defined %}{{ sectionContent1.name }}{% else %}NOS BIENS SIMILAIRES{% endif %}</h1>
  350.             </div>
  351.             <div class="separator"></div>
  352.             <div class="col-lg-6 pre-section-content">
  353.                 {% if sectionContent1.content is defined %}{{ sectionContent1.content|raw }}{% endif %}
  354.             </div>
  355.         </div>
  358.         <div  class="col-lg-8 mx-auto">
  359.             <div id="propertiesOther" class="col-lg-12 mt-5" style="display: flex; flex-wrap: wrap; flex-direction: row">
  360.                 {% for property in otherProperties %}
  361.                     <div  class="col-xl-4 col-lg-6 col-md-12 col-sm-12 div-img-hover-2" style="cursor: pointer">
  362.                         {#
  363.                         <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">
  364.                                                         {% if property.comments[0].comment is not empty %}
  365.                                                             <p class="project-content">
  366.                                                                 {{ property.comments[0].comment|slice(0, 350) }}</p>
  368.                                                             <a href="{{ path('property-detail', {'id': property.id}) }}" class="project-arrow-2">
  369.                                                                 <span class="galerry-ref"></span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
  370.                                                             </a>
  371.                                                         {% else %}
  372.                                                             <a style="margin-top: 180px" href="{{ path('property-detail', {'id': property.id}) }}" class="project-arrow-2">
  373.                                                                 <span class="galerry-ref"></span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
  374.                                                             </a>
  375.                                                         {% endif %}
  376.                                                     </div>
  378.                                                     <div class="col-lg-3 properties-price-absolute" style="background-color: #c48300; height: 56px;">
  379.                                                         <p style="font-size: 20px;" class="properties-price">
  380.                                                             {{ property.price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : property.price.value ~  property.price.currency|replace({"EUR": " €"})  }}
  381.                                                         </p>
  382.                                                     </div>
  383.                         #}
  386.                         {# <div class="tag-ref-projet-2"><span class="text-tag-ref">{{ specialPropertyCategory(property.category) }}</span></div> #}
  387.                         {% if property.pictures is not empty %}
  388.                             <div class="position-relative properties-slide slick-slide-single-{{ loop.index }}">
  389.                                 {% for picture in property.pictures|slice(0,3) %}
  390.                                     {#                                    <img class="img-100" src="{{ picture.url }}">#}
  391.                                     <div class="img" style="background: url('{{ picture.url }}')no-repeat center;background-size:cover;"  onclick="location.href='{{ path('property-detail', {'id': property.id}) }}'">
  392.                                     </div>
  393.                                 {% endfor %}
  394.                             </div>
  396.                         {% else %}
  397.                             <div class="img" style="background-image: url('{{ asset('build/Hudson_Ontario2.png') }}')"></div>
  398.                         {% endif %}
  399.                         <div class="row col-md-12 justify-content-between infos-list">
  400.                             <ul class="col-md-4 items">
  401.                                 <li class="item surface">
  402.                                     <img src="{{ asset('img/surface.svg') }}" class="surface-logo"> {{ property.area.value == null ? '' : property.area.value ~ areaConversion(property.area.unit) }}
  403.                                 </li>
  404.                             </ul>
  405.                             <div class="col-md-8 properties-price d-flex justify-content-end">
  406.                                 {{ property.price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : property.price.value|number_format(2, ',', ' ') ~  property.price.currency|replace({"EUR": " €"})  }}
  407.                             </div>
  408.                         </div>
  409.                         <p class="city">{{ property.city.name }}</p>
  410.                         <p class="project-name">{{ property.reference }}</p>
  411.                     </div>
  412.                 {% endfor %}
  413.             </div>
  414.             {% set paramUrl = property.category %}
  415.             {% if paramUrl == 1 %}
  416.                 {% set paramUrl = 'vente' %}
  417.             {% elseif paramUrl == 2 %}
  418.                 {% set paramUrl = 'location' %}
  419.             {% endif %}
  420.             <div id="link-none" class="col-lg-12 mx-auto other-property-link div-svg-header d-flex justify-content-end" style="margin-top:0;">
  421.                 <div style="padding-bottom:40px;">
  422.                     <a id="link-none-a d-flex" class="property-span-arrow" href="{{ path('properties', {'keyword': paramUrl}) }}">Découvrir plus
  423.                         <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 -->
  424.                     </a>
  425.                 </div>
  426.             </div>
  427.         </div>
  428.     </section>
  430.     <script>
  431.         const slideNextHeader = document.getElementById('slideNextHeader');
  432.         const slidePreviousHeader = document.getElementById('slidePreviousHeader');
  433.         const currentFigure = document.getElementsByClassName('current-figure')
  434.         const lastFigure = document.getElementsByClassName('last-figure')
  436.         let slideHeader = document.getElementById('sliderHeader');
  437.         let positionHeader = 0;
  438.         let positionThumbHeader = 1;
  440.         arraySlidesHeader = [
  441.             {% for key, picture in property.pictures %}
  442.             {
  443.                 'position': {{ key }},
  444.                 'img': '{{ picture.url }}',
  445.                 'dot': 'dot{{ key }}'
  446.             },
  447.             {% endfor %}
  448.         ];
  450.         slidePreviousHeader.addEventListener('click', () => {
  451.             if (arraySlidesHeader.length < (positionThumbHeader  + 1)) {
  452.                 positionHeader = 0;
  453.                 positionThumbHeader = 1;
  454.             } else {
  455.                 positionHeader++;
  456.                 positionThumbHeader++;
  457.             }
  459.             slideHeader.style.background =  `url(${arraySlidesHeader[positionHeader].img})no-repeat center`;
  460.             currentFigure[0].innerHTML = '0'+positionThumbHeader
  463.             slideHeader.style.backgroundSize = `cover`;
  464.         });
  465.         slideNextHeader.addEventListener('click', () => {
  466.             if (positionThumbHeader === 1) {
  467.                 positionHeader = (arraySlidesHeader.length - 1);
  468.                 positionThumbHeader = arraySlidesHeader.length;
  469.             } else {
  470.                 positionHeader = positionHeader - 1;
  471.                 positionThumbHeader = positionThumbHeader - 1;
  472.             }
  473.             slideHeader.style.background =  `url(${arraySlidesHeader[positionHeader].img})no-repeat center`;
  474.             currentFigure[0].innerHTML = '0'+positionThumbHeader
  477.             slideHeader.style.backgroundSize = `cover`;
  478.         });
  481.         const descriptif = document.getElementById('descriptif-div')
  482.         const praticalInfos = document.getElementById('practical-infos-div')
  483.         const interior = document.getElementById('interior-div')
  484.         const exterior = document.getElementById('exterior-div')
  485.         const energy = document.getElementById('energy-div')
  487.         let buttons = document.getElementsByClassName('projectButton')
  489.         for (const eElement of buttons) {
  490.             eElement.addEventListener('click', function (e) {
  491.                 e.preventDefault()
  493.                 for (let button of buttons) {
  494.                     if (button.classList.contains('all')){
  495.                         button.classList.remove('all')
  496.                         button.classList.add('come')
  497.                         button.querySelector('span').classList.replace('span-all', 'span-projects')
  498.                     }
  499.                     if (document.getElementById(button.dataset.id)) {
  500.                         document.getElementById(button.dataset.id).classList.remove('display-flex')
  501.                         document.getElementById(button.dataset.id).classList.add('display-none')
  502.                     }
  503.                 }
  505.                 eElement.classList.remove('come')
  506.                 eElement.classList.add('all')
  507.                 eElement.querySelector('span').classList.replace('span-projects', 'span-all')
  508.                 document.getElementById(eElement.dataset.id).classList.add('display-flex');
  509.             })
  510.         }
  511.     </script>
  513.     <script>
  514.         const arrowPrev = `<svg xmlns="http://www.w3.org/2000/svg" width="7.985" height="13.211" viewBox="0 0 7.985 13.211">
  515.                                 <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"/>
  516.                             </svg>`;
  517.         const arrowNext= `<svg xmlns="http://www.w3.org/2000/svg" width="7.985" height="13.211" viewBox="0 0 7.985 13.211">
  518.                             <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"/>
  519.                         </svg>`;
  520.         var countProperties = '{{ otherProperties|length }}';
  522.         var loopProp = 1;
  523.         while (loopProp <= countProperties) {
  524.             $('.slick-slide-single-'+loopProp).slick({
  525.                 'slidesToShow': 1,
  526.                 'prevArrow': `<div class="arrow-left square-black d-flex justify-content-center align-items-center position-absolute">${arrowPrev}</div>`,
  527.                 'nextArrow': `<div class="arrow-right square-black d-flex justify-content-center align-items-center position-absolute">${arrowNext}</div>`
  528.             });
  529.             loopProp++;
  530.         }
  532.     </script>
  533. {% endblock %}