templates/property-detail.html.twig line 438

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Détails - {{ property.reference }}{% endblock %}
  4. {% block metaDescription %}
  6.     <meta name="description" content="
  7.     {% if property.reference is defined %}
  8.         {{ property.reference }}
  9.     {% else %}
  10.          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.
  11.     {% endif %}
  12.     ">
  13. {% endblock %}
  15. {% block body %}
  16.     <style>
  17.         .d-block {
  18.             background-size:cover;
  19.         }
  20.     </style>
  22.     <header  class="header-habiter slider-home slider-not-home who-is bottom-right-border position-relative to-right overflow-hidden">
  23.         <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  24.             <div class="carousel-inner">
  25.                 {% for picture in property.pictures %}
  26.                     <div class="carousel-item {% if loop.first %}active{% endif %}">
  27.                         <div class="d-block w-100" style="background: url({{ picture.url }})no-repeat center;"></div>
  28.                     </div>
  29.                 {% endfor %}
  30.             </div>
  31.             <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
  32.                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  33.                 <span class="sr-only">Previous</span>
  34.             </a>
  35.             <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
  36.                 <span class="carousel-control-next-icon" aria-hidden="true"></span>
  37.                 <span class="sr-only">Next</span>
  38.             </a>
  39.         </div>
  40.     </header>
  42.     {#
  43.     <header class="header-habiter slider-home slider-not-home who-is bottom-right-border position-relative overflow-hidden to-right lightbox-on"
  44.     id="sliderHeader"
  45.     style="background: url({{property.pictures[0].url}}) center center no-repeat;background-size:cover; position: relative; height: 91vh; cursor: zoom-in;"
  46.     data-id="modul-ref">
  47.         <div class="container-fluid" style="padding: 0">
  48.             <div class="col-lg-4 mx-auto" style="display: none;">
  49.                 <div class="arrows-slides" style="display: flex; justify-content: space-between; margin-top: 20px; align-items: center; position: absolute">
  50.                     <div class="arrow-right" id="slideNextHeader"><a><i class="fas fa-arrow-left"></i></a></div>
  51.                     <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>
  52.                     <div class="arrow-left" id="slidePreviousHeader"><a><i class="fas fa-arrow-right"></i></a></div>
  53.                 </div>
  54.             </div>
  57.             {#
  58.             <div class="col-lg-12 property-detail-header" style="display: flex; position: absolute; bottom: 0px;">
  59.                <div class="col-lg-2 container-properties-header first"></div>
  60.                <div class="col-lg-5 container-properties-header" style="display: flex; align-items: center">
  61.                    <div class="col-lg-3">
  62.                        <p class="properties-city" >{{ property.city.name }}</p>
  63.                    </div>
  64.                    <div class="col-lg-3">
  65.                        <p class="properties-area" style="text-align: center">{{ property.area.value == null ? '' : property.area.value ~ areaConversion(property.area.unit) }} </p>
  66.                    </div>
  67.                    <div class="col-lg-3">
  68.                        <p class="properties-reference-detail">{{ property.reference }}</p>
  69.                    </div>
  70.                </div>
  71.                <div class="col-lg-1 price-detail-bien" style="background-color: #c48300; display: flex; align-items: center; justify-content: center">
  72.                    <p class="properties-price">
  73.                        {{ property.price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : property.price.value ~  property.price.currency|number_format(2, '.', ',')|replace({"EUR": " €"})  }}
  74.                    </p>
  75.                </div>
  76.            </div>
  79.     </div>
  81.     <div class="sticky-text">Cliquer ici<br/>pour voir toutes les photos</div>
  83.     {% if property.pictures is not empty %}
  84.         <div class="lightbox" id="modul-ref">
  85.             <div class="closer"></div>
  86.             <div class="arrows left">&#8592;</div>
  87.             <div class="arrows right">&#8594;</div>
  88.             <div class="counter">1/1</div>
  89.             <ul class="items">
  90.                 {% for picture in property.pictures %}
  91.                     <li class="item">
  92.                         <img class="img" src="{{ picture.url }}">
  93.                     </li>
  94.                 {% endfor %}
  95.             </ul>
  96.         </div>
  97.     {% endif %}
  98.     {% if property.pictures is not empty %}
  99.         {% for picture in property.pictures %}
  100.             <div class="lightbox" id="modul-ref-{{ loop.index }}">
  101.                 <div class="closer"></div>
  102.                 <ul class="items">
  103.                     <li class="item">
  104.                         <img class="img" src="{{ picture.url }}">
  105.                     </li>
  106.                 </ul>
  107.             </div>
  108.         {% endfor %}
  109.     {% endif %}
  110.     </header>
  111.     #}
  114.     {#
  115.     <div class="col-lg-1 infos-person" style="display: flex; position: fixed; right: 274px;">
  116.         <div class="col-lg-12">
  117.             {% if property.user.picture is null %}
  118.                 <img id="img-card" src="{{ asset('build/367e841db1c2c356ba01f78a108a59cb0c18ade2.png') }}">
  119.             {% else %}
  120.                 <img id="img-card" width="161px" height="161px" src="{{ property.user.picture }}">
  121.             {% endif %}
  122.         </div>
  123.     </div>
  124.     #}
  126.     {#
  127.     <div class="col-lg-1 infos-person" style="position: fixed; width: 265px; display: flex; flex-direction: column">
  128.        <div class="col-lg-12 more-informations">
  129.            <p class="p-info-property">Pour plus d’informations concernant ce bien</p>
  130.            <p class="p-first-property">{{ property.user.firstname }}
  131.                {{ property.user.lastname }}
  132.        </div>
  133.        <div style="display: flex">
  134.            <div class="col-lg-2 p-mail-property">
  135.                <a href="mailto:{{ property.user.email }}">
  136.                    <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>
  137.                </a>
  138.            </div>
  139.            <div class="col-lg-10 p-phone-property">
  140.                <a href="tel:{{ property.user.phone }}">
  141.                    <?xml version="1.0" encoding="UTF-8"?>
  142.                    <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>
  143.                    {{ property.user.phone }}
  144.                </a>
  145.            </div>
  146.        </div>
  147.    </div>
  148.     #}
  150.     <section class="items-property-single mt-5 mb-5 pb-5">
  151.         <div class="row col-lg-10 mx-auto justify-content-center">
  152.             {% if property.type and getTypeProperty(property.type) %}
  153.                 <div class="item-single">
  154.                     {# <img src="{{ asset('img/icons/surface.svg') }}" alt="Icone surface"> #}
  155.                     <span style="font-weight: bold;color:#F6A400;">{{ getTypeProperty(property.type) }}</span>
  156.                 </div>
  157.                 {% if property.construction.construction_year or property.available_at or property.bedrooms or property.area.value %}
  158.                     <div style="width:40px;">
  159.                         <div style="width:4px;height:25px;background:#5f5f5f"></div>
  160.                     </div>
  161.                 {% endif %}
  162.             {% endif %}
  163.             {% if property.area.value %}
  164.                 <div class="item-single">
  165.                     {# <img src="{{ asset('img/icons/surface.svg') }}" alt="Icone surface"> #}
  166.                     <span>{{ property.area.value == null ? '' : property.area.value ~ areaConversion(property.area.unit) }}</span>
  167.                 </div>
  168.                 {% if property.construction.construction_year or property.available_at or property.bedrooms %}
  169.                     <div style="width:40px;">
  170.                         <div style="width:4px;height:25px;background:#5f5f5f"></div>
  171.                     </div>
  172.                 {% endif %}
  173.             {% endif %}
  174.             {% if property.bedrooms %}
  175.                 <div class="item-single">
  176.                     {# <img src="{{ asset('img/icons/chambre.svg') }}" alt="Icone chambre"> #}
  177.                     <span>{{ property.bedrooms }} chambre{% if property.bedrooms > 1 %}s{% endif %}</span>
  178.                 </div>
  179.                 {% if property.construction.construction_year or property.available_at %}
  180.                     <div style="width:40px;">
  181.                         <div style="width:4px;height:25px;background:#5f5f5f"></div>
  182.                     </div>
  183.                 {% endif %}
  184.             {% endif %}
  185.             {% for area in property.areas %}
  186.                 {% if area.type == 13 %}
  187.                     <div class="item-single">
  188.                         {# <img src="{{ asset('img/icons/salle_bain.svg') }}" alt="Icone salle de bain"> #}
  189.                         <span>{{ area.number }} {{ propertyArea(area.type) }}</span>
  190.                     </div>
  191.                     <div style="width:40px;">
  192.                         <div style="width:4px;height:25px;background:#5f5f5f"></div>
  193.                     </div>
  194.                 {% endif %}
  195.             {% endfor %}
  196.             {% for area in property.areas %}
  197.                 {% if area.type == 4 %}
  198.                     <div class="item-single">
  199.                         {# <img src="{{ asset('img/icons/garage.svg') }}" alt="Icone garage"> #}
  200.                         <span>{{ area.number }} {{ propertyArea(area.type) }}</span>
  201.                     </div>
  202.                     <div style="width:40px;">
  203.                         <div style="width:4px;height:25px;background:#5f5f5f"></div>
  204.                     </div>
  205.                 {% endif %}
  206.             {% endfor %}
  207.             {% for area in property.areas %}
  208.                 {% if area.type == 74 or area.type == 75 %}
  209.                     <div class="item-single">
  210.                         {# <img src="{{ asset('img/icons/parking.svg') }}" alt="Icone parking"> #}
  211.                         <span>{{ area.number }} {{ propertyArea(area.type) }}</span>
  212.                     </div>
  213.                     <div style="width:40px;">
  214.                         <div style="width:4px;height:25px;background:#5f5f5f"></div>
  215.                     </div>
  216.                 {% endif %}
  217.             {% endfor %}
  218.             {% for area in property.areas %}
  219.                 {% if area.type == 18 %}
  220.                     <div class="item-single">
  221.                         {# <img src="{{ asset('img/icons/terasse.svg') }}" alt="Icone terasse"> #}
  222.                         <span>{{ area.number }} {{ propertyArea(area.type) }}</span>
  223.                     </div>
  224.                     <div style="width:40px;">
  225.                         <div style="width:4px;height:25px;background:#5f5f5f"></div>
  226.                     </div>
  227.                 {% endif %}
  228.             {% endfor %}
  229.             {% if property.construction.construction_year %}
  230.                 <div class="item-single">
  231.                     {# <img src="{{ asset('img/icons/construction.svg') }}" alt="Icone date construction"> #}
  232.                     <span>Construction : {{ property.construction.construction_year }}</span>
  233.                 </div>
  234.                 {% if property.available_at %}
  235.                     <div style="width:40px;">
  236.                         <div style="width:4px;height:25px;background:#5f5f5f"></div>
  237.                     </div>
  238.                 {% endif %}
  239.             {% endif %}
  240.             {% if property.available_at %}
  241.                 <div class="item-single availability">
  242.                     {# <img src="{{ asset('img/icons/dispo.svg') }}" alt="Icone disponibilité"> #}
  243.                     <span>Disponibilité {{ property.available_at == null ? '-' : property.available_at}}</span>
  244.                 </div>
  245.             {% endif %}
  246.         </div>
  247.     </section>
  249.     <section class="desc-property mt-5">
  250.         <div class="col-lg-8 mx-auto" style="overflow: hidden">
  251.             <div class="row reverse-mobil">
  252.                 <div class="col-md-4">
  253.                     <div class="col-lg-12 mt-4" style="display: flex;flex-direction: column;margin:0 10px;">
  254.                         <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  255.                             <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"/>
  256.                         </svg>
  257.                         <h1 class="project-title" style="font-size: 2.3em;font-weight: bold">Descriptif</h1>
  258.                         <p class="city">{{ property.city.name }}</p>
  259.                         <p class="project-name">{{ property.reference }}</p>
  261.                         {% if property.regulations and property.regulations is not empty %}
  262.                             <p class="project-name">DPE : <strong>{% for regulation in property.regulations %}{{ regulation.value }}{% endfor %}</strong>
  263.                         {% endif %}
  265.                         </p>
  266.                         <p class="price" style="color:#F6A400">
  267.                             {{ property.price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : property.price.value|number_format(2, ',', ' ') ~  property.price.currency|replace({"EUR": " €"})  }}
  268.                         </p>
  270.                         <div class="col-md-10 row list-pictures">
  271.                             {% for picture in property.pictures %}
  272.                                 <div class="modal fade bd-example-modal-lg-{{ picture.id }}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  273.                                     <div class="modal-dialog modal-lg">
  274.                                         <div class="modal-content">
  275.                                             <img src="{{ picture.url }}">
  276.                                         </div>
  277.                                     </div>
  278.                                 </div>
  279.                                 <div class="col-6 col-md-4 lightbox-on-second"  data-toggle="modal" data-target=".bd-example-modal-lg-{{ picture.id }}" style="margin-bottom:10px;">
  280.                                     <img class="img"
  281.                                          src="{{ picture.url }}"
  282.                                          data-id="modul-ref-{{ loop.index }}">
  283.                                 </div>
  284.                             {% endfor %}
  285.                         </div>
  287.                         {% if property.user is defined and property.user is not empty %}
  288.                             <div class="contact-property col-md-10 mt-4 p-3">
  289.                                 <p>Pour plus d’informations sur ce bien, vous pouvez prendre contact avec</p>
  290.                                 {% if property.user.firstname is defined and property.user.lastname is defined %}
  291.                                     <h3>{{ property.user.firstname }} {{ property.user.lastname }}</h3>
  292.                                 {% endif %}
  293.                             </div>
  294.                             <div class="contacinfos col-md-10 p-3 d-flex justify-content-between">
  295.                                 {% if property.user.email is defined %}
  296.                                 <a href="mailto:{{ property.user.email }}" target="_blank">
  297.                                     <svg xmlns="http://www.w3.org/2000/svg" width="21.418" height="14.503" viewBox="0 0 21.418 14.503">
  298.                                         <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"/>
  299.                                     </svg>
  300.                                 </a>
  301.                                 {% endif %}
  302.                                 {% if property.user.mobile is defined %}
  303.                                 <a href="tel:{{ property.user.mobile }}" style="text-decoration:none;color:#fff;">
  304.                                     <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">
  305.                                         <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"/>
  306.                                     </svg>
  307.                                     {{ property.user.mobile }}
  308.                                 </a>
  309.                                 {% endif %}
  310.                             </div>
  311.                         {% endif %}
  312.                     </div>
  313.                 </div>
  314.                 <div class="col-md-8 description-prop-container">
  315.                     <div class="description-prop pt-3">
  316.                         <p>{{ property.comments[0].comment|raw|nl2br }}</p>
  317.                     </div>
  318.                 </div>
  319.             </div>
  320.         </div>
  322.     </section>
  325.     {#
  326.     <section class="project" style="margin-bottom: 120px">
  327.         <div class="col-lg-8 mx-auto div-svg-header" style="display: flex; align-items: center; margin-top: 20px">
  328.         </div>
  329.         <div class="col-lg-8 mx-auto div-svg-header" style="display: flex; align-items: center; padding-left: 7px">
  330.             <button data-id="descriptif-div" class="btn btn-primary all border-radius projectButton"><span class="span-all">DESCRIPTIF</span></button>
  331.             <button data-id="practical-infos-div" class="btn btn-primary come border-radius projectButton"><span class="span-projects">INFOS PRATIQUES</span></button>
  332.             <button data-id="interior-div" class="btn btn-primary come border-radius projectButton"><span class="span-projects">INTERIEUR</span></button>
  333.             <button data-id="exterior-div" class="btn btn-primary come border-radius projectButton"><span class="span-projects">EXTERIEUR</span></button>
  334.             <button data-id="energy-div" class="btn btn-primary come border-radius projectButton"><span class="span-projects">ENERGIE</span></button>
  335.         </div>
  336.         <div id="descriptif-div" class="offset-lg-2 col-lg-4 property-comment display-flex">
  337.             <p>{{ property.comments[0].comment|raw|nl2br }}</p>
  338.         </div>
  339.         <div id="practical-infos-div" class="offset-lg-2 col-lg-8 display-none" style="flex-wrap: wrap;">
  340.             <table class="table">
  341.                 <tbody>
  342.                 <tr class="table-property-first" style="background-color: #f7e7cb;">
  343.                     {% if property.services is not null %}
  344.                     {% for service in property.services %}
  345.                     <td class="text-property-infos">{{ propertyServices(service) }}</td>
  346.                     {% endfor %}
  347.                     {% endif %}
  348.                 </tr>
  349.                 </tbody>
  350.             </table>
  352.         </div>
  353.         <div id="interior-div" class="offset-lg-2 col-lg-8 display-none">
  354.             <table class="table">
  355.                 <tbody>
  356.                 <tr class="table-property-first" style="background-color: #f7e7cb;">
  357.                     <td class="text-property">Surface</td>
  358.                     <td class="text-property-infos">{{ property.area.value == null ? '' : property.area.value ~ areaConversion(property.area.unit) }}</td>
  359.                     <td class="text-property">Eau</td>
  360.                     <td class="text-property-infos">{{ propertyHotWater(property.water.hot_device) == null ? '-' : propertyHotWater(property.water.hot_device) ~ " " ~ propertyHotWaterAccess(property.water.hot_access)  }}</td>
  361.                     <td class="text-property">An Construction</td>
  362.                     <td class="text-property-infos">{{ property.construction.construction_year == null ? '-' :  property.construction.construction_year }}</td>
  363.                 </tr>
  364.                {% if property.areas is empty %}
  365.                    <tr>
  366.                        <td class="text-property">Condition</td>
  367.                        <td class="text-property-infos">{{ property.condition == null ? '-' : propertyCondition(property.condition) }}</td>
  368.                    </tr>
  369.                    <tr class="table-property-first" style="background-color: #f7e7cb;">
  370.                        <td class="text-property">Etage</td>
  371.                        <td class="text-property-infos">{{ property.floor.type == null ? '-' : propertyFloor(property.floor.type) }}</td>
  372.                        <td class="text-property">Chauffage</td>
  373.                        <td class="text-property-infos">{{ propertyHeatingDevice(property.heating.device) == null ? '-' : propertyHeatingDevice(property.heating.device) ~ " " ~ propertyHeatingType(property.heating.type)  }}</td>
  374.                        <td class="text-property">Disponibilite</td>
  375.                        <td class="text-property-infos">{{ property.available_at == null ? '-' : property.available_at}}</td>
  376.                    </tr>
  377.                    {% else %}
  378.                        <tr>
  379.                            {% for area in property.areas %}
  380.                                {% if propertyArea(area.type) is not null %}
  381.                                    <td class="text-property-first">{{ propertyArea(area.type) }}</td>
  382.                                    <td class="text-property-infos">{{ area.number }}</td>
  383.                                {% endif %}
  384.                            {% endfor %}
  385.                        </tr>
  386.                        <tr class="table-property-first" style="background-color: #f7e7cb;">
  387.                            <td class="text-property">Etage</td>
  388.                            <td class="text-property-infos">{{ property.floor.type == null ? '-' : propertyFloor(property.floor.type) }}</td>
  389.                            <td class="text-property">Chauffage</td>
  390.                            <td class="text-property-infos">{{ propertyHeatingDevice(property.heating.device) == null ? '-' : propertyHeatingDevice(property.heating.device) ~ " " ~ propertyHeatingType(property.heating.type)  }}</td>
  391.                            <td class="text-property">Disponibilite</td>
  392.                            <td class="text-property-infos">{{ property.available_at == null ? '-' : property.available_at}}</td>
  393.                        </tr>
  394.                        <tr>
  395.                            <td class="text-property">Condition</td>
  396.                            <td class="text-property-infos">{{ property.condition == null ? '-' : propertyCondition(property.condition) }}</td>
  397.                        </tr>
  398.                 {% endif %}
  399.                 </tbody>
  400.             </table>
  401.         </div>
  402.         <div id="exterior-div" class="offset-lg-2 col-lg-8 display-none">
  403.             <table class="table">
  404.                 <tbody>
  405.                 {% if property.areas is not empty %}
  406.                     <tr class="table-property-first" style="background-color: #f7e7cb;">
  407.                         {% for area in property.areas %}
  408.                             {% if propertyExterior(area.type) is not null %}
  409.                             <td class="text-property-first">{{ propertyExterior(area.type) }}</td>
  410.                             <td class="text-property-infos">{{ area.number }}</td>
  411.                             {% endif %}
  412.                         {% endfor %}
  413.                     </tr>
  414.                 {% endif %}
  415.                 </tbody>
  416.             </table>
  418.         </div>
  419.         <div id="energy-div" class="offset-lg-2 col-lg-8 display-none">
  420.             <table class="table">
  421.                 <tbody>
  422.             {% if property.regulations is not empty %}
  423.                 <tr class="table-property-first" style="background-color: #f7e7cb;">
  424.                     {% for energy in property.regulations %}
  425.                         <td class="text-property-first">{{ propertyEnergy(energy.type) }}</td>
  426.                         <td class="text-property-infos">{{ energy.value }}</td>
  427.                     {% endfor %}
  428.                 </tr>
  429.             {% endif %}
  430.                 </tbody>
  431.             </table>
  432.         </div>
  433.     </section>
  434.     #}
  437.     <section class="similar-properties">
  438.         {% set sectionContent1 = content('Bien-detail', 'Section-1') %}
  439.         <div class="col-lg-8 mx-auto div-svg-header pre-section">
  440.             <div class="col-lg-5" style="font-size: 2.3em;display: flex;flex-direction: column;margin-left: 10px;">
  441.                 <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  442.                     <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"/>
  443.                 </svg>
  444.                 <h1 class="project-title" style="font-weight: bold">{% if sectionContent1.name is defined %}{{ sectionContent1.name }}{% else %}NOS BIENS SIMILAIRES{% endif %}</h1>
  445.             </div>
  446.             <div class="separator"></div>
  447.             <div class="col-lg-6 pre-section-content">
  448.                 {% if sectionContent1.content is defined %}{{ sectionContent1.content|raw }}{% endif %}
  449.             </div>
  450.         </div>
  453.         <div  class="col-lg-8 mx-auto">
  454.             <div id="propertiesOther" class="col-lg-12 mt-5" style="display: flex; flex-wrap: wrap; flex-direction: row">
  455.                 {% for property in otherProperties %}
  456.                     <div  class="col-xl-4 col-lg-6 col-md-12 col-sm-12 div-img-hover-2" style="cursor: pointer">
  457.                         {#
  458.                         <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">
  459.                                                         {% if property.comments[0].comment is not empty %}
  460.                                                             <p class="project-content">
  461.                                                                 {{ property.comments[0].comment|slice(0, 350) }}</p>
  463.                                                             <a href="{{ path('property-detail', {'id': property.id}) }}" class="project-arrow-2">
  464.                                                                 <span class="galerry-ref"></span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
  465.                                                             </a>
  466.                                                         {% else %}
  467.                                                             <a style="margin-top: 180px" href="{{ path('property-detail', {'id': property.id}) }}" class="project-arrow-2">
  468.                                                                 <span class="galerry-ref"></span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
  469.                                                             </a>
  470.                                                         {% endif %}
  471.                                                     </div>
  473.                                                     <div class="col-lg-3 properties-price-absolute" style="background-color: #c48300; height: 56px;">
  474.                                                         <p style="font-size: 20px;" class="properties-price">
  475.                                                             {{ property.price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : property.price.value ~  property.price.currency|replace({"EUR": " €"})  }}
  476.                                                         </p>
  477.                                                     </div>
  478.                         #}
  481.                         {# <div class="tag-ref-projet-2"><span class="text-tag-ref">{{ specialPropertyCategory(property.category) }}</span></div> #}
  482.                         {% if property.pictures is not empty %}
  483.                             <div class="position-relative properties-slide slick-slide-single-{{ loop.index }}">
  484.                                 {% for picture in property.pictures|slice(0,3) %}
  485.                                     {#                                    <img class="img-100" src="{{ picture.url }}">#}
  486.                                     <div class="img" style="background: url('{{ picture.url }}')no-repeat center;background-size:cover;"  onclick="location.href='{{ path('property-detail', {'id': property.id}) }}'">
  487.                                     </div>
  488.                                 {% endfor %}
  489.                             </div>
  491.                         {% else %}
  492.                             <div class="img" style="background-image: url('{{ asset('build/Hudson_Ontario2.png') }}')"></div>
  493.                         {% endif %}
  494.                         <div class="row col-md-12 justify-content-between infos-list">
  495.                             <ul class="col-md-4 items">
  496.                                 {% if property.area.value %}
  497.                                     <li class="item surface">
  498.                                         {# <img src="{{ asset('img/surface.svg') }}" class="surface-logo">  #}
  499.                                         {{ property.area.value == null ? '' : property.area.value ~ areaConversion(property.area.unit) }}
  500.                                     </li>
  501.                                 {% endif %}
  502.                             </ul>
  503.                             <div class="col-md-8 properties-price d-flex justify-content-end">
  504.                                 {{ property.price.value == null ? '<span style="font-size: 21px !important;">sur demande</span>' : property.price.value|number_format(2, ',', ' ') ~  property.price.currency|replace({"EUR": " €"})  }}
  505.                             </div>
  506.                         </div>
  507.                         <p class="city" {% if not property.area.value %}style="margin-top:-30px;"{% endif %}>{{ property.city.name }}</p>
  508.                         <p class="project-name">{{ property.reference }}</p>
  510.                     </div>
  511.                 {% endfor %}
  512.             </div>
  513.             {% set paramUrl = property.category %}
  514.             {% if paramUrl == 1 %}
  515.                 {% set paramUrl = 'vente' %}
  516.             {% elseif paramUrl == 2 %}
  517.                 {% set paramUrl = 'location' %}
  518.             {% endif %}
  519.             <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;">
  520.                 <div style="padding-bottom:40px;">
  521.                     <a id="link-none-a d-flex" class="property-span-arrow" href="{{ path('properties', {'keyword': paramUrl}) }}">Découvrir plus
  522.                         <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 -->
  523.                     </a>
  524.                 </div>
  525.             </div>
  526.         </div>
  527.     </section>
  529.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
  530.     <script>
  531.         const slideNextHeader = document.getElementById('slideNextHeader');
  532.         const slidePreviousHeader = document.getElementById('slidePreviousHeader');
  533.         const currentFigure = document.getElementsByClassName('current-figure')
  534.         const lastFigure = document.getElementsByClassName('last-figure')
  536.         let slideHeader = document.getElementById('sliderHeader');
  537.         let positionHeader = 0;
  538.         let positionThumbHeader = 1;
  540.         arraySlidesHeader = [
  541.             {% for key, picture in property.pictures %}
  542.             {
  543.                 'position': {{ key }},
  544.                 'img': '{{ picture.url }}',
  545.                 'dot': 'dot{{ key }}'
  546.             },
  547.             {% endfor %}
  548.         ];
  550.         {#
  551.         slidePreviousHeader.addEventListener('click', () => {
  552.                     if (arraySlidesHeader.length < (positionThumbHeader  + 1)) {
  553.                         positionHeader = 0;
  554.                         positionThumbHeader = 1;
  555.                     } else {
  556.                         positionHeader++;
  557.                         positionThumbHeader++;
  558.                     }
  560.                     slideHeader.style.background =  `url(${arraySlidesHeader[positionHeader].img})no-repeat center`;
  561.                     currentFigure[0].innerHTML = '0'+positionThumbHeader
  564.                     slideHeader.style.backgroundSize = `cover`;
  565.                 });
  566.                 slideNextHeader.addEventListener('click', () => {
  567.                     if (positionThumbHeader === 1) {
  568.                         positionHeader = (arraySlidesHeader.length - 1);
  569.                         positionThumbHeader = arraySlidesHeader.length;
  570.                     } else {
  571.                         positionHeader = positionHeader - 1;
  572.                         positionThumbHeader = positionThumbHeader - 1;
  573.                     }
  574.                     slideHeader.style.background =  `url(${arraySlidesHeader[positionHeader].img})no-repeat center`;
  575.                     currentFigure[0].innerHTML = '0'+positionThumbHeader
  578.                     slideHeader.style.backgroundSize = `cover`;
  579.                 });
  580.         #}
  584.         const descriptif = document.getElementById('descriptif-div')
  585.         const praticalInfos = document.getElementById('practical-infos-div')
  586.         const interior = document.getElementById('interior-div')
  587.         const exterior = document.getElementById('exterior-div')
  588.         const energy = document.getElementById('energy-div')
  590.         let buttons = document.getElementsByClassName('projectButton')
  592.         for (const eElement of buttons) {
  593.             eElement.addEventListener('click', function (e) {
  594.                 e.preventDefault()
  596.                 for (let button of buttons) {
  597.                     if (button.classList.contains('all')){
  598.                         button.classList.remove('all')
  599.                         button.classList.add('come')
  600.                         button.querySelector('span').classList.replace('span-all', 'span-projects')
  601.                     }
  602.                     if (document.getElementById(button.dataset.id)) {
  603.                         document.getElementById(button.dataset.id).classList.remove('display-flex')
  604.                         document.getElementById(button.dataset.id).classList.add('display-none')
  605.                     }
  606.                 }
  608.                 eElement.classList.remove('come')
  609.                 eElement.classList.add('all')
  610.                 eElement.querySelector('span').classList.replace('span-projects', 'span-all')
  611.                 document.getElementById(eElement.dataset.id).classList.add('display-flex');
  612.             })
  613.         }
  614.     </script>
  616.     <script>
  617.         const arrowPrev = `<svg xmlns="http://www.w3.org/2000/svg" width="7.985" height="13.211" viewBox="0 0 7.985 13.211">
  618.                                 <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"/>
  619.                             </svg>`;
  620.         const arrowNext= `<svg xmlns="http://www.w3.org/2000/svg" width="7.985" height="13.211" viewBox="0 0 7.985 13.211">
  621.                             <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"/>
  622.                         </svg>`;
  623.         var countProperties = '{{ otherProperties|length }}';
  625.         var loopProp = 1;
  626.         while (loopProp <= countProperties) {
  627.             $('.slick-slide-single-'+loopProp).slick({
  628.                 'slidesToShow': 1,
  629.                 'prevArrow': `<div class="arrow-left square-black d-flex justify-content-center align-items-center position-absolute">${arrowPrev}</div>`,
  630.                 'nextArrow': `<div class="arrow-right square-black d-flex justify-content-center align-items-center position-absolute">${arrowNext}</div>`
  631.             });
  632.             loopProp++;
  633.         }
  635.     </script>
  636. {% endblock %}