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

Open in your IDE?
  1. {% extends 'base_front.html.twig' %}
  3. {% block meta %}
  4.     <title>Bourg | {{ 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" loading="lazy">
  34.                                 <span class="gold">{{ advert.info.surface }} m²</span>
  35.                                 <span class="gold">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" loading="lazy">
  41.                                 <span class="gold">{{ advert.info.nombre_chambres }}</span>
  42.                                 <span class="gold">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" loading="lazy">
  48.                                 <span class="gold">{{ advert.pieces.salles_de_bain }}</span>
  49.                                 <span class="gold">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" loading="lazy">
  55.                                 <span class="gold">{{ advert.parking.garages }}</span>
  56.                                 <span class="gold">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.parkin_souterrain ?? 0 %}
  62.                         {% set parkingCollectif = advert.parking.collectif ?? 0 %}
  63.                         {% set parkings = parkingOuvert + parkingsouterrain + parkingCollectif %}
  64.                         {% if parkings > 0 %}
  65.                             <p>
  66.                                 <img src="{{ asset('img/icons/parking.svg') }}" class="mr-3" loading="lazy">
  67.                                 <span class="gold">{{ parkings }}</span>
  68.                                 <span class="gold">parking extérieur</span>
  69.                             </p>
  70.                         {% endif %}
  71.                     </div>
  72.                     <div class="price gold">
  73.                         {%  set price = advert.prix.budget|number_format(0, ' ', ' ') %}
  74.                         {% if advert.info.vente_location == 'location' %}
  75.                             {{ price }}€/mois
  76.                         {% else %}
  77.                             {{ price }}€
  78.                         {% endif %}
  79.                     </div>
  80.                 </div>
  81.             </div>
  82.             <div class="col-md-6 slides">
  83.                 <div class="main-slide">
  84.                     <div class="img-main-slide position-relative" id="mainImg">
  85.                         <img src="{{ advert.photos.1.url }}" id="mainImg" class="position-absolute" style="height:100%;object-fit:cover;right:0;width:100%">
  86.                         <a href="{{ advert.photos.1.url }}" id="photoGallery" class="position-absolute bg-red d-flex justify-content-center align-items-center">
  87.                             <img src="{{ asset('img/icons/icon-photos.svg') }}" class="img-fluid" style="width:45px;" loading="lazy">
  88.                         </a>
  89.                     </div>
  90.                 </div>
  91.                 {#
  92.                 <div class="slides-title d-flex align-items-center justify-content-end col-md-10 p-0 float-right position-relative">
  93.                     <a href="#" class="position-absolute arrow-slide-single" id="arrowSlideMove" onclick="javascript: return false;">
  94.                         <img src="{{ asset('img/icons/arrow-right.svg') }}">
  95.                     </a>
  96.                     <div class="slide-miniatures d-flex align-self-baseline" id="containerMiniatures">
  97.                         {% for photo in advert.photos|slice(1) %}
  98.                         <div class="slide position-relative {% if loop.index >= 4 %}display-none{% endif %} float-left">
  99.                             <img src="{{ photo.url }}">
  100.                         </div>
  101.                         {% endfor %}
  102.                     </div>
  103.                 </div>
  104.                 #}
  106.             </div>
  107.         </div>
  108.         <a href="#targetSeeMore" class="btn-see-more position-absolute d-flex flex-column align-items-center gold text-center">
  109.             <span>En savoir plus</span>
  110.             <img src="{{ asset('img/icons/arrow-bottom-gold.svg') }}" alt="En savoir plus" class="mb-2">
  111.         </a>
  112.     </section>
  114.     <section class="details-single pb-5" id="targetSeeMore">
  115.         <div class="container mt-5 pt-5">
  116.             <div class="row justify-content-between align-items-start">
  117.                 <div class="col-12 col-md-5 doc position-relative">
  118.                     <!--img src="{{ asset('img/floor_doc.svg') }}" alt="Doc property" class="position-absolute doc-floor"-->
  119.                     <h6>Extérieur</h6>
  120.                     <ul class="pl-0">
  121.                         {% for key, value in advert.exterieur %}
  122.                             {% if value and value == '1' %}
  123.                                 <li>{{ key|replace({'_': ' '})|capitalize }}</li>
  124.                             {% endif %}
  125.                         {% endfor %}
  126.                     </ul>
  127.                     <h6>Intérieur</h6>
  128.                     <ul class="pl-0">
  129.                         {% for key, value in advert.interieur %}
  130.                             {% if value and value == '1' %}
  131.                                 <li>{{ key|replace({'_': ' '})|capitalize }}</li>
  132.                             {% endif %}
  133.                         {% endfor %}
  134.                         {% for key, value in advert.pieces %}
  135.                             {% if value and value == '1' %}
  136.                                 <li>{{ key|replace({'_': ' '})|capitalize }}</li>
  137.                             {% endif %}
  138.                         {% endfor %}
  139.                     </ul>
  140.                     <h6>Autres</h6>
  141.                     <ul class="pl-0">
  142.                         {% for key, value in advert.parking %}
  143.                             {% if value and value == '1' %}
  144.                                 <li>{{ key|replace({'_': ' '})|capitalize }}</li>
  145.                             {% endif %}
  146.                         {% endfor %}
  147.                         {% for key, value in advert.energie %}
  148.                             {% if value and value != '0.00' %}
  149.                                 <li>{{ key|replace({'_': ' ', 'lettre': ''})|capitalize }} <strong>{{ value|replace({'_': ' '})|capitalize }}</strong></li>
  150.                             {% endif %}
  151.                         {% endfor %}
  152.                     </ul>
  153.                     {% if advert.documents is not empty %}
  154.                         <h6>Documents</h6>
  155.                         <ul class="pl-0">
  156.                             {% for doc in advert.documents %}
  157.                                 <li><img src="{{ asset('img/icons/doc.svg') }}" class="mr-2"><a href="{{ doc.url }}" target="_blank" class="gold" download>{{ doc.name_file }}</a></li>
  158.                             {% endfor %}
  159.                         </ul>
  160.                     {% endif %}
  162.                     <div class="m-auto pt-4 energy-single no-responsive">
  163.                         <h4>Performance énergétique</h4>
  164.                         {% if advert.energie.indice_energetique %}
  165.                             <div class="row col-md-8 p-0 m-0">
  166.                                 <div class="col-sm-2 col-md-2 bg-grey-light p-2 text-vertical info-indice">
  167.                                     <span class="gold">Maison existante</span>
  168.                                     <span class="gold">Nouvelle maison</span>
  169.                                 </div>
  170.                                 <div class="col-sm-10 col-md-10 d-flex flex-column h-100">
  171.                                     {% set arrayLetters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'] %}
  172.                                     {% set widthBar = '5' %}
  173.                                     {% for letter in arrayLetters %}
  174.                                         {% if letter == advert.energie.indice_energetique %}
  175.                                             <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">
  176.                                                 <span class="col-md-{{ widthBar }} pr-0 letter-a gold d-flex justify-content-center align-items-center">{{ letter }}</span>
  177.                                                 {% if letter == 'A' %}
  178.                                                     <span class="cols-m-7 col-md-7 pl-0 info-a gold text-center">Haute efficacité d’énergie</span>
  179.                                                 {% endif %}
  180.                                             </div>
  181.                                         {% else %}
  182.                                             <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>
  183.                                         {% endif %}
  185.                                         {% set widthBar = widthBar + 1 %}
  186.                                     {% endfor %}
  187.                                 </div>
  188.                             </div>
  189.                         {% else %}
  190.                             <p>Performance énergetique non renseignée.</p>
  191.                         {% endif %}
  192.                     </div>
  193.                 </div>
  194.                 <div class="col-12 col-md-5">
  195.                     <div class="contact-single p-0 gold">
  196.                         <div class="title-page bg-blue d-flex align-items-baseline gold pl-0 pt-0 pb-5">
  197.                             <!--img src="{{ asset('img/icons/chevrons-right.svg') }}" alt="chevrons droite"-->
  198.                             <div class="pl-3">
  199.                                 <!--<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>-->
  200.                                 <div class="description-contact bg-grey-very-light p-4">
  201.                                     <div class="border-title bg-grey mb-2 mt-0"></div>
  202.                                     <h3 style="font-size: 1.3em;">{{ advert.commerciaux.prenom }} {{ advert.commerciaux.nom|upper }}</h3>
  203.                                     <p class="mb-0">Contactez votre conseiller pour plus d’informations concernant
  204.                                         le bien ou pour organiser une visite</p>
  205.                                 </div>
  206.                                 {% if advert.commerciaux.gsm %}
  207.                                     <div class="col-md-11 bg-red-contact gold pb-0">
  208.                                         <img src="{{ asset('img/icons/icon-mobile-dark.svg') }}" loading="lazy">
  209.                                         <span class="ml-3"><a href="tel:{{ advert.commerciaux.gsm }}" class="gold">{{ advert.commerciaux.gsm }}</a></span>
  210.                                     </div>
  211.                                 {% endif %}
  212.                                 {% if advert.commerciaux.email %}
  213.                                     <div class="col-md-10 bg-brown gold">
  214.                                         <img src="{{ asset('img/icons/icon-envelop-dark.svg') }}">
  215.                                         <span class="ml-3"><a href="mailto:{{ advert.commerciaux.email }}" class="gold">{{ advert.commerciaux.email }}</a></span>
  216.                                     </div>
  217.                                 {% endif %}
  218.                             </div>
  219.                         </div>
  220.                     </div>
  221.                     <div class="title-page bg-blue d-flex gold pl-0 pt-0 pb-5">
  222.                         <!--img src="{{ asset('img/icons/chevrons-right.svg') }}" alt="chevrons droite"-->
  223.                         <span class="ml-3">DESCRIPTION</span>
  224.                     </div>
  225.                     {#  <h1 class="mb-3">MAISON UNIFAMILIALE ISOLÉE</h1> #}
  226.                     <div class="description gold">
  227.                         {{ advert.description.description_fr|raw }}
  228.                     </div>
  230.                     {#
  231.                     <div class="contact-advert gold">
  232.                         Pour plus de renseignements et informations :<br>
  233.                         M. Philippe LANDRAIN<br>
  234.                         Tél: <a href="tel:00352454848451" class="gold">00352 454848 -451</a><br>
  235.                         E-mail: <a href="mailto:philippe@stugalux.lu" class="gold">philippe@stugalux.lu</a><br>
  236.                     </div>
  237.                     #}
  239.                 </div>
  240.             </div>
  241.         </div>
  242.     </section>
  244. {% endblock %}
  247. {% block javascript %}
  248. {{ parent() }}
  249. <script>
  250.     document.getElementById('photoGallery').addEventListener('click', (e) => {
  251.         e.preventDefault();
  253.         SimpleLightbox.open({
  254.             items: [
  255.                 {% for photo in advert.photos %}
  256.                     "{{ photo.url }}",
  257.                 {% endfor %}
  258.             ]
  259.         });
  260.     })
  261. </script>
  262. {% endblock %}