templates/biens/show.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ settings[0].siteName }} : {{ biens.libelle }}{% endblock %}
  5. {% block javascripts %}
  6.     {{ parent() }}
  7.     <script src="https://maps.google.com/maps/api/js?key=AIzaSyA8iZeI07nPI2H8ueyucFd9mAGMP4kLpPM" type="text/javascript"></script>
  8.     {{ encore_entry_script_tags('map') }}.
  9. {% endblock %}
  11. {# {% dump(biens) %} #}
  13. {% block body %}
  14. <div class="container-fluid shadow py-1">
  15.     <div class="container">
  16.         <div class="row">
  17.             <div class="col color">
  18.                 <a href="{{ path('app_biens_index') }}" class="text-decoration-none color">
  19.                     <svg class="me-2" width="32" height="32" viewBox="0 0 24 24">
  20.                         <path fill="currentColor" d="M16 22L6 12L16 2l1.775 1.775L9.55 12l8.225 8.225Z" />
  21.                     </svg>
  22.                     Retour Nos biens / Résultats
  23.                 </a>
  24.             </div>
  25.         </div>
  26.     </div>
  27. </div>
  29. <div class="container">
  30.     <div class="row mb-3">
  31.         <div class="col-lg-8 col-sm-12 pb-3">
  32.             {# <img src="{{ biens.photo1 }}" alt="Bien 1" class="img-fluid"
  33.                 style="height: 560px; width: 100%; object-fit: cover;"> #}
  34.             {# </div> #}
  36.                 {% if biens.photo1 != null %}
  37.                     {% set p1 = 1 %}
  38.                 {% else %}
  39.                     {% set p1 = 0 %}
  40.                 {% endif %}
  42.                 {% if biens.photo2 != null %}
  43.                     {% set p2 = 1 %}
  44.                 {% else %}
  45.                     {% set p2 = 0 %}
  46.                 {% endif %}
  48.                 {% if biens.photo3 != null %}
  49.                     {% set p3 = 1 %}
  50.                 {% else %}
  51.                     {% set p3 = 0 %}
  52.                 {% endif %}
  54.                 {% if biens.photo4 != null %}
  55.                     {% set p4 = 1 %}
  56.                 {% else %}
  57.                     {% set p4 = 0 %}
  58.                 {% endif %}
  60.                 {% if biens.photo5 != null %}
  61.                     {% set p5 = 1 %}
  62.                 {% else %}
  63.                     {% set p5 = 0 %}
  64.                 {% endif %}
  66.                 {% if biens.photo6 != null %}
  67.                     {% set p6 = 1 %}
  68.                 {% else %}
  69.                     {% set p6 = 0 %}
  70.                 {% endif %}
  72.                 {% if biens.photo7 != null %}
  73.                     {% set p7 = 1 %}
  74.                 {% else %}
  75.                     {% set p7 = 0 %}
  76.                 {% endif %}
  78.                 {% if biens.photo8 != null %}
  79.                     {% set p8 = 1 %}
  80.                 {% else %}
  81.                     {% set p8 = 0 %}
  82.                 {% endif %}
  84.                 {% if biens.photo9 != null %}
  85.                     {% set p9 = 1 %}
  86.                 {% else %}
  87.                     {% set p9 = 0 %}
  88.                 {% endif %}
  90.                 {% set nbImages = p1 + p2 + p3 + p4 + p5 + p6 + p7 + p8 + p9 %}
  91.                 {% set resteImages = nbImages - 7 %}
  93.             {% if biens.photo1 != null %}
  94.                 <a href="{{ biens.photo1 }}" class="glightbox">
  95.                     <img src="{{ biens.photo1 }}" class="card-img-top img-fluid first-photo-bien" alt="Bien 1">
  96.                 </a>
  97.             {% else %}
  98.                 <img src="{{ asset('assets/img/maison.jpg')}}" class="card-img-top img-fluid bg-secondary  first-photo-bien" alt="Bien 1">
  99.                 {% endif %}
  100.         </div>
  102.         <div class="col-lg-4 col-sm-12">
  104.             {% if biens.photo2 == null %}
  105.             <div class="row">
  106.                 <div class="col mt-5 d-flex justify-content-center align-items-center lead fw-bold">
  107.                     Il n'y a pas d'autres photo
  108.                 </div>
  109.             </div>
  110.             {% endif %}
  112.             <div class="row row-cols-1 row-cols-md-2 g-2">
  113.                 {% if biens.photo2 != null %}
  114.                 <div class="col position-relative">
  115.                     <div class="card h-100">
  116.                         <a href="{{ biens.photo2 }}" class="glightbox">
  117.                             <img src="{{ biens.photo2 }}" class="card-img-top img-fluid img-gallery" alt="Bien"
  118.                                 style="height: 180px; object-fit: cover;">
  119.                         </a>
  120.                     </div>
  121.                 </div>
  122.                 {% endif %}
  123.                 {% if biens.photo3 != null %}
  124.                 <div class="col">
  125.                     <div class="card h-100">
  126.                         <a href="{{ biens.photo3 }}" class="glightbox">
  127.                             <img src="{{ biens.photo3 }}" class="card-img-top img-fluid img-gallery" alt="Bien"
  128.                                 style="height: 180px; object-fit: cover;">
  129.                         </a>
  130.                     </div>
  131.                 </div>
  132.                 {% endif %}
  133.                 {% if biens.photo4 != null %}
  134.                 <div class="col">
  135.                     <div class="card h-100">
  136.                         <a href="{{ biens.photo4 }}" class="glightbox">
  137.                             <img src="{{ biens.photo4 }}" class="card-img-top img-fluid img-gallery" alt="Bien"
  138.                                 style="height: 180px; object-fit: cover;">
  139.                         </a>
  140.                     </div>
  141.                 </div>
  142.                 {% endif %}
  143.                 {% if biens.photo5 != null %}
  144.                 <div class="col">
  145.                     <div class="card h-100">
  146.                         <a href="{{ biens.photo5 }}" class="glightbox">
  147.                             <img src="{{ biens.photo5 }}" class="card-img-top img-fluid img-gallery" alt="Bien"
  148.                                 style="height: 180px; object-fit: cover;">
  149.                         </a>
  150.                     </div>
  151.                 </div>
  152.                 {% endif %}
  153.                 {% if biens.photo6 != null %}
  154.                 <div class="col">
  155.                     <div class="card h-100">
  156.                         <a href="{{ biens.photo6 }}" class="glightbox">
  157.                             <img src="{{ biens.photo6 }}" class="card-img-top img-fluid img-gallery" alt="Bien"
  158.                                 style="height: 180px; object-fit: cover;">
  159.                         </a>
  160.                     </div>
  161.                 </div>
  162.                 {% endif %}
  163.                 {% if biens.photo7 != null %}
  164.                 <div class="col">
  165.                     <div class="card h-100">
  166.                         <a href="{{ biens.photo7 }}" class="glightbox">
  167.                             <img src="{{ biens.photo7 }}" class="card-img-top img-fluid img-gallery" alt="Bien"
  168.                                 style="height: 180px; object-fit: cover;">
  169.                         </a>
  170.                         <div class="img-gallery-centered-text">+ {{ resteImages }}</div>
  171.                     </div>
  172.                 </div>
  173.                 {% endif %}
  174.                 {% if biens.photo8 != null %}
  175.                     <div class="col" style="display: none;">
  176.                         <div class="card h-100">
  177.                             <a href="{{ biens.photo8 }}" class="glightbox">
  178.                                 <img src="{{ biens.photo8 }}" class="card-img-top img-fluid img-gallery" alt="Bien"
  179.                                     style="height: 180px; object-fit: cover;">
  180.                             </a>
  181.                         </div>
  182.                     </div>
  183.                 {% endif %}
  184.                 {% if biens.photo9 != null %}
  185.                 <div class="col" style="display: none;">
  186.                     <div class="card h-100">
  187.                         <a href="{{ biens.photo9 }}" class="glightbox">
  188.                             <img src="{{ biens.photo9 }}" class="card-img-top img-fluid img-gallery" alt="Bien"
  189.                                 style="height: 180px; object-fit: cover;">
  190.                         </a>
  191.                     </div>
  192.                 </div>
  193.             {% endif %}
  194.             </div>
  195.         </div>
  196.     </div>
  198.     <div class="row g-4">
  199.         <div class="col-lg-8 col-sm-12">
  200.             <p class="color small">
  201.                 <span class="fw-bold h4">
  202.                     {{ biens.prix|format_currency('EUR') }}
  203.                 </span>
  204.                 <br>
  205.                 {# <span class="fw-bold">Type 3 avec deux places de parking</span> #}
  206.                 <span class="fw-bold">{{ biens.libelle }}</span>
  207.                 <br>
  208.                 {{ biens.ville }} {{ biens.codePostal }}
  209.             </p>
  210.             <p class="small">
  211.                 {{ biens.descriptif|raw }}
  212.             </p>
  213.         </div>
  214.         <div class="col-lg-4 col-sm-12 color">
  215.             <a href="{{ path('app_contact') }}" class="button-contact me-2">Contacter l'agence</a>
  218.             <div class="btn-group dropend">
  219.                 <button type="button" class="btn color dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
  220.                     <svg class="" width="25" height="25" viewBox="0 0 24 24">
  221.                         <path fill="currentColor"
  222.                             d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81c1.66 0 3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65c0 1.61 1.31 2.92 2.92 2.92c1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z" />
  223.                     </svg>
  224.                 </button>
  225.                 <ul class="dropdown-menu">
  226.                     <li>
  227.                         <a class="dropdown-item"
  228.                             href="https://www.facebook.com/sharer/sharer.php?u=https://127.0.0.1:8000/nos-biens/{{ biens.id }}">
  229.                             <svg width="25" height="25" viewBox="0 0 24 24">
  230.                                 <path fill="#3B5998"
  231.                                 d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z" />
  232.                             </svg>
  233.                             Facebook
  234.                         </a>
  235.                     </li>
  236.                     {# <li>
  237.                         <a class="dropdown-item" href="#">
  238.                             <svg width="25" height="25" viewBox="0 0 256 256">
  239.                                 <path fill="#C32AA3" d="M160 128a32 32 0 1 1-32-32a32.1 32.1 0 0 1 32 32Zm68-44v88a56 56 0 0 1-56 56H84a56 56 0 0 1-56-56V84a56 56 0 0 1 56-56h88a56 56 0 0 1 56 56Zm-52 44a48 48 0 1 0-48 48a48 48 0 0 0 48-48Zm16-52a12 12 0 1 0-12 12a12 12 0 0 0 12-12Z"/>
  240.                             </svg>
  241.                             Instagram
  242.                         </a>
  243.                     </li> #}
  244.                 </ul>
  245.             </div>
  248.             {# <svg class="p-2 me-2" style="border: solid 2px #0b1b46" width="40" height="40" viewBox="0 0 24 24">
  249.                 <path fill="currentColor"
  250.                     d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81c1.66 0 3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65c0 1.61 1.31 2.92 2.92 2.92c1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z" />
  251.             </svg> #}
  253.             {# <a href="https://www.facebook.com/sharer/sharer.php?u=https://127.0.0.1:8000/nos-biens/{{ biens.id }}">Facebook</a> #}
  255.             {# <svg class="p-2 me-2" style="border: solid 2px #0b1b46" width="40" height="40" viewBox="0 0 20 20">
  256.                 <path fill="currentColor"
  257.                     d="m10 3.22l-.61-.6a5.5 5.5 0 0 0-7.78 7.77L10 18.78l8.39-8.4a5.5 5.5 0 0 0-7.78-7.77l-.61.61z" />
  258.             </svg>
  259.             <svg class="p-2 me-2" style="border: solid 2px #0b1b46" width="40" height="40" viewBox="0 0 384 512">
  260.                 <path fill="currentColor"
  261.                     d="M384 192c0 87.4-117 243-168.3 307.2c-12.3 15.3-35.1 15.3-47.4 0C117 435 0 279.4 0 192C0 86 86 0 192 0s192 86 192 192z" />
  262.             </svg> #}
  263.             <div class="mt-5">
  264.                 <h4>Surface habitable : {{ biens.surfaceBien }} m&sup2;</h4>
  265.                 {% if biens.surfaceTerrain != null %}
  266.                     <h4>Surface terrain : {{ biens.surfaceTerrain }} m&sup2;</h4>
  267.                 {% endif %}
  268.                 <h4>Nb de pièces : {{ biens.nbPieces }}</h4>
  269.                 <h4>Nb de chambres : {{ biens.nbChambres }}</h4>
  270.             </div>
  271.         </div>
  272.     </div>
  274. </div>
  276. <div class="container mt-4">
  277.     <div class="row">
  278.         <div class="col-lg-12 col-sm-12 pb-5">
  279.             {# {% if biens.latitude != null and biens.longitude != null %}
  280.                 <div id="map" data-latitude="{{ biens.latitude }}" data-longitude="{{ biens.longitude }}"></div>
  281.             {% else %}
  282.                 <div id="map" data-latitude="47.081012" data-longitude="2.398782"></div>
  283.             {% endif %} #}
  285.             <div id="map" data-ville="{{ biens.ville }}, Fr"></div>
  287.         </div>
  288.         {# <div class="col-lg-2 col-sm-12">
  289.             <div class="d-grid gap-2">
  290.                 <button class="button-contact mb-4">Transports</button>
  291.                 <button class="button-contact mb-4">Education</button>
  292.                 <button class="button-contact mb-4">Sécurité</button>
  293.                 <button class="button-contact-white mb-4">Commerces</button>
  294.                 <button class="button-contact-white mb-4">Sorties</button>
  295.                 <button class="button-contact mb-4">Santé</button>
  296.                 <button class="button-contact mb-4">Grandes surfaces</button>
  297.             </div>
  298.         </div> #}
  299.     </div>
  300. </div>
  302. {% endblock %}