templates/front/property/single.html.twig line 1

Open in your IDE?
  1. {% extends 'base_front.html.twig' %}
  3. {% block meta %}
  4.     <title>Floor | {{ advert.info.nature }} à {{ advert.localisation.ville }}</title>
  5.     {% if advert.info.nature is defined and advert.info.surface is defined and advert.localisation.ville is defined %}
  6.         <meta name="description" content="{{ advert.info.nature }} de {{ advert.info.surface }} m² à {{ advert.localisation.ville }}">
  7.     {% endif %}
  8. {% endblock %}
  10. {% block body %}
  11.     <section class="slide-header single">
  12.         <div class="row h-100">
  13.             <div class="col-md-6 d-flex justify-content-center align-items-center">
  14.                 <div class="description-single">
  15.                     <div class="title-page bg-blue d-flex gold pl-0 pt-0 pb-5">
  16.                         <img src="{{ asset('img/icons/chevrons-right.svg') }}" alt="chevrons droite">
  17.                         <span class="ml-3">
  18.                             {{ advert.localisation.ville }} •
  19.                             {% if advert.info.disponibilite %}
  20.                                 {% if advert.info.disponibilite == 'immédiate' %}
  21.                                     Disponibilité {{ advert.info.disponibilite }}
  22.                                 {% else %}
  23.                                     Disponible à p. d. {{ advert.info.disponibilite }}
  24.                                 {% endif %}
  25.                             {% endif %}
  26.                             <br> Réf. {{ advert.info.reference }}
  27.                         </span>
  28.                     </div>
  29.                     <h1 class="mb-3">{{ advert.info.nature }}</h1>
  30.                     <div class="description pt-3 pb-3">
  31.                         {% if advert.info.surface and advert.info.surface > 0 %}
  32.                             <p>
  33.                                 <img src="{{ asset('img/icons/surface.svg') }}" class="mr-3">
  34.                                 <span class="gold">{{ advert.info.surface }} m²</span>
  35.                                 <span class="white">surface d’habitation</span>
  36.                             </p>
  37.                         {% endif %}
  38.                         {% if advert.info.nombre_chambres and advert.info.nombre_chambres > 0 %}
  39.                             <p>
  40.                                 <img src="{{ asset('img/icons/chambres.svg') }}" class="mr-3">
  41.                                 <span class="gold">{{ advert.info.nombre_chambres }}</span>
  42.                                 <span class="white">chambre{% if advert.info.nombre_chambres > 1 %}s{% endif%} à coucher</span>
  43.                             </p>
  44.                         {% endif %}
  45.                         {% if advert.pieces.salles_de_bain and advert.pieces.salles_de_bain > 0 %}
  46.                             <p>
  47.                                 <img src="{{ asset('img/icons/salles-bain.svg') }}" class="mr-3">
  48.                                 <span class="gold">{{ advert.pieces.salles_de_bain }}</span>
  49.                                 <span class="white">salle{% if advert.pieces.salles_de_bain > 1%}s{% endif%} de bain</span>
  50.                             </p>
  51.                         {% endif %}
  52.                         {% if advert.parking.garages and advert.parking.garages > 0 %}
  53.                             <p>
  54.                                 <img src="{{ asset('img/icons/garage.svg') }}" class="mr-3">
  55.                                 <span class="gold">{{ advert.parking.garages }}</span>
  56.                                 <span class="white">garage{% if advert.parking.garages > 1 %}s{% endif %}</span>
  57.                             </p>
  58.                         {% endif %}
  60.                         {% set parkingOuvert = advert.parking.parking_ouvert ?? 0 %}
  61.                         {% set parkingsouterrain = advert.parking.parking_souterrain ?? 0 %}
  62.                         {% set parkingCollectif = advert.parking.collectif ?? 0 %}
  63.                         {% set parkings = parkingOuvert + parkingsouterrain + parkingCollectif %}
  64.                         {% set parkingsExt = parkingOuvert + parkingCollectif %}
  66.                         {% if parkings > 0 %}
  67.                             <p>
  68.                                 <img src="{{ asset('img/icons/parking.svg') }}" class="mr-3">
  69.                                 {% if parkingsExt > 0 %}
  70.                                     <span class="gold">{{ parkingsExt }}</span>
  71.                                     <span class="white">parking{% if parkingsExt > 1 %}s{% endif %} extérieur{% if parkingsExt > 1 %}s{% endif %}</span>
  72.                                 {% endif %}
  74.                                 {% if parkingsouterrain > 0 %}
  76.                                     {% if parkingsExt > 0 %}
  77.                                         <span class="white">et</span>
  78.                                     {% endif %}
  80.                                     <span class="gold">{{ parkingsouterrain }}</span>
  81.                                     <span class="white">parking{% if parkingsouterrain > 1 %}s{% endif %} intérieur{% if parkingsouterrain > 1 %}s{% endif %}</span>
  82.                                 {% endif %}
  83.                             </p>
  84.                         {% endif %}
  85.                     </div>
  86.                     <div class="price white">
  87.                         {%  set price = advert.prix.budget|number_format(0, ' ', ' ') %}
  88.                         {% if advert.info.vente_location == 'location' %}
  89.                             {{ price }}€<sup>/mois</sup>
  90.                         {% else %}
  91.                             {{ price }}€
  92.                         {% endif %}
  93.                     </div>
  94.                 </div>
  95.             </div>
  96.             <div class="col-md-6 slides">
  97.                 <div class="main-slide">
  98.                     <div class="img-main-slide position-relative" id="mainImg">
  99.                         <img src="{{ asset('upload/photo/' ~ advert.photos.1.name)  }}" id="mainImg" class="position-absolute" style="height:100%;object-fit:cover;right:0;width:100%">
  100.                         <a href="{{ asset('upload/photo/' ~ advert.photos.1.name)  }}" id="photoGallery" class="position-absolute bg-red d-flex justify-content-center align-items-center">
  101.                             <img src="{{ asset('img/icons/icon-photos.svg') }}" class="img-fluid" style="width:45px;">
  102.                         </a>
  103.                     </div>
  104.                 </div>
  105.                 {#
  106.                 <div class="slides-title d-flex align-items-center justify-content-end col-md-10 p-0 float-right position-relative">
  107.                     <a href="#" class="position-absolute arrow-slide-single" id="arrowSlideMove" onclick="javascript: return false;">
  108.                         <img src="{{ asset('img/icons/arrow-right.svg') }}">
  109.                     </a>
  110.                     <div class="slide-miniatures d-flex align-self-baseline" id="containerMiniatures">
  111.                         {% for photo in advert.photos|slice(1) %}
  112.                         <div class="slide position-relative {% if loop.index >= 4 %}display-none{% endif %} float-left">
  113.                             <img src="{{ photo.url }}">
  114.                         </div>
  115.                         {% endfor %}
  116.                     </div>
  117.                 </div>
  118.                 #}
  120.             </div>
  121.         </div>
  122.         <a href="#targetSeeMore" class="btn-see-more position-absolute d-flex flex-column align-items-center gold text-center">
  123.             <img src="{{ asset('img/icons/arrow-bottom-gold.svg') }}" alt="En savoir plus" class="mb-2">
  124.             <span>En savoir plus</span>
  125.         </a>
  126.     </section>
  128.     <section class="details-single pb-5" id="targetSeeMore">
  129.         <div class="container mt-5 pt-5">
  130.             <div class="row justify-content-between align-items-start">
  131.                 <div class="col-12 col-md-5 doc position-relative">
  132.                     <img src="{{ asset('img/floor_doc.svg') }}" alt="Doc property" class="position-absolute doc-floor">
  133.                     <h6>Extérieur</h6>
  134.                     <ul class="pl-0">
  135.                         {% for key, value in advert.exterieur %}
  136.                             {% if value and value == '1' %}
  137.                                 <li>{{ key|replace({'_': ' '})|capitalize }}</li>
  138.                             {% endif %}
  139.                         {% endfor %}
  140.                     </ul>
  141.                     <h6>Intérieur</h6>
  142.                     <ul class="pl-0">
  143.                         {% for key, value in advert.interieur %}
  144.                             {% if value and value == '1' %}
  145.                                 <li>{{ key|replace({'_': ' '})|capitalize }}</li>
  146.                             {% endif %}
  147.                         {% endfor %}
  148.                         {% for key, value in advert.pieces %}
  149.                             {% if value and value == '1' %}
  150.                                 <li>{{ key|replace({'_': ' '})|capitalize }}</li>
  151.                             {% endif %}
  152.                         {% endfor %}
  153.                     </ul>
  154.                     <h6>Autres</h6>
  155.                     <ul class="pl-0">
  156.                         {% for key, value in advert.parking %}
  157.                             {% if value and value == '1' %}
  158.                                 <li>{{ key|replace({'_': ' '})|capitalize }}</li>
  159.                             {% endif %}
  160.                         {% endfor %}
  161.                         {% for key, value in advert.energie %}
  162.                             {% if value and value != '0.00' %}
  163.                                 <li>{{ key|replace({'_': ' ', 'lettre': ''})|capitalize }} <strong>{{ value|replace({'_': ' '})|capitalize }}</strong></li>
  164.                             {% endif %}
  165.                         {% endfor %}
  166.                     </ul>
  167.                     {% if advert.documents is not empty %}
  168.                         <h6>Documents</h6>
  169.                         <ul class="pl-0">
  170.                             {% for doc in advert.documents %}
  171.                                 <li><img src="{{ asset('img/icons/doc.svg') }}" class="mr-2"><a href="{{ doc.url }}" target="_blank" class="white" download>{{ doc.name_file }}</a></li>
  172.                             {% endfor %}
  173.                         </ul>
  174.                     {% endif %}
  176.                     <div class="m-auto pt-4 energy-single no-responsive">
  177.                         <h4>Performance énergétique</h4>
  178.                         {% if advert.energie.indice_energetique %}
  179.                             <div class="row col-md-8 p-0 m-0">
  180.                                 <div class="col-sm-2 col-md-2 bg-grey-light p-2 text-vertical info-indice">
  181.                                     <span class="white">Maison existante</span>
  182.                                     <span class="white">Nouvelle maison</span>
  183.                                 </div>
  184.                                 <div class="col-sm-10 col-md-10 d-flex flex-column h-100">
  185.                                     {% set arrayLetters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'] %}
  186.                                     {% set widthBar = '5' %}
  187.                                     {% for letter in arrayLetters %}
  188.                                         {% if letter == advert.energie.indice_energetique %}
  189.                                             <div class="col-sm-12 col-md-12 bar energy-a mb-2 pb-0 pt-0 pl-1 pr-1 d-flex justify-content-center align-items-center selected">
  190.                                                 <span class="col-md-{{ widthBar }} pr-0 letter-a white d-flex justify-content-center align-items-center">{{ letter }}</span>
  191.                                                 {% if letter == 'A' %}
  192.                                                     <span class="cols-m-7 col-md-7 pl-0 info-a white text-center">Haute efficacité d’énergie</span>
  193.                                                 {% endif %}
  194.                                             </div>
  195.                                         {% else %}
  196.                                             <div class="col-sm-{% if not loop.last %}{{ widthBar }}{% else%}12{% endif%} col-md-{% if not loop.last %}{{ widthBar }}{% else%}12{% endif%} bar energy-{{ letter|lower }} {% if not loop.last %}mb-2{% endif %}">{{ letter }}</div>
  197.                                         {% endif %}
  199.                                         {% set widthBar = widthBar + 1 %}
  200.                                     {% endfor %}
  201.                                 </div>
  202.                             </div>
  203.                         {% else %}
  204.                             <p>Performance énergetique non renseignée.</p>
  205.                         {% endif %}
  206.                     </div>
  207.                 </div>
  208.                 <div class="col-12 col-md-5">
  209.                     <div class="contact-single p-0 gold">
  210.                         <div class="title-page bg-blue d-flex align-items-baseline gold pl-0 pt-0 pb-5">
  211.                             <img src="{{ asset('img/icons/chevrons-right.svg') }}" alt="chevrons droite">
  212.                             <div class="pl-3">
  213.                                 <!--<div class="img-contact" style="background: url({% if advert.commerciaux.photo %}{{ advert.commerciaux.photo }}{% else %}{{ asset('img/user-default.png') }}{% endif %})no-repeat center;background-size: cover"></div>-->
  214.                                 <div class="description-contact bg-grey-very-light p-4">
  215.                                     <div class="border-title bg-grey mb-2 mt-0"></div>
  216.                                     <h3 style="font-size: 1.3em;">{{ advert.commerciaux.prenom }} {{ advert.commerciaux.nom|upper }}</h3>
  217.                                     <p class="mb-0">Contactez votre conseiller pour plus d’informations concernant
  218.                                         le bien ou pour organiser une visite</p>
  219.                                 </div>
  220.                                 <div class="col-md-11 bg-red-contact white pb-0">
  221.                                     <img src="{{ asset('img/icons/icon-mobile-white.svg') }}">
  222.                                     <span class="ml-3" style="margin: 0px 0px 0px 9px!important;">
  223.                                         <a href="tel:00352283277" class="white" style="padding: 15px 4px">+352 28 32 77</a>
  224.                                          {% if advert.commerciaux.gsm %}
  225.                                              | <a href="tel:{{ advert.commerciaux.gsm }}" class="white tel-fin" style="padding: 15px 4px">{{ advert.commerciaux.gsm }}</a>
  226.                                          {% endif %}
  228.                                     </span>
  229.                                 </div>
  230.                                 {% if advert.commerciaux.email %}
  231.                                     <div class="col-md-10 bg-brown white">
  232.                                         <img src="{{ asset('img/icons/icon-envelop-white.svg') }}">
  233.                                         <span class="ml-3"><a href="mailto:{{ advert.commerciaux.email }}" class="white">{{ advert.commerciaux.email }}</a></span>
  234.                                     </div>
  235.                                 {% endif %}
  236.                             </div>
  237.                         </div>
  238.                     </div>
  239.                     <div class="title-page bg-blue d-flex gold pl-0 pt-0 pb-5">
  240.                         <img src="{{ asset('img/icons/chevrons-right.svg') }}" alt="chevrons droite">
  241.                         <span class="ml-3">DESCRIPTION</span>
  242.                     </div>
  243.                     {#  <h1 class="mb-3">MAISON UNIFAMILIALE ISOLÉE</h1> #}
  244.                     <div class="description white">
  245.                         {{ advert.description.description_fr|raw }}
  246.                     </div>
  248.                     {#
  249.                     <div class="contact-advert gold">
  250.                         Pour plus de renseignements et informations :<br>
  251.                         M. Philippe LANDRAIN<br>
  252.                         Tél: <a href="tel:00352454848451" class="gold">00352 454848 -451</a><br>
  253.                         E-mail: <a href="mailto:philippe@stugalux.lu" class="gold">philippe@stugalux.lu</a><br>
  254.                     </div>
  255.                     #}
  257.                 </div>
  258.             </div>
  259.         </div>
  260.     </section>
  262. {% endblock %}
  265. {% block javascript %}
  266. {{ parent() }}
  267. <script nonce="{{ csp_nonce('script') }}">
  268.     document.getElementById('photoGallery').addEventListener('click', (e) => {
  269.         e.preventDefault();
  271.         SimpleLightbox.open({
  272.             items: [
  273.                 {% for photo in advert.photos %}
  274.                     "{{ asset('upload/photo/' ~ photo.name) }}",
  275.                 {% endfor %}
  276.             ]
  277.         });
  278.     })
  279. </script>
  280. {% endblock %}