templates/property-detail.html.twig line 1

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