templates/properties/show.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %} Détail de la propriété : {{ property.title }} {% endblock %}
  5. {% block body %}
  12. <div class="text-right mr-5">
  14.     <h3 style="color:red;">Partager</h3>
  15.                         
  16.                         <div class="text-right" style="display:flex; flex-direction:row; margin-bottom:2em; justify-content: flex-end;">
  17.                             <button class="btn btn-light  mr-2 text-primary" style="width:2em; height:2em;display:flex;flex-direction: column; align-items: center;" aria-label="Partager sur Facebook" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=https://coupdcoeurimmo.fr/properties/{{ property.id }}', 'facebook-share-dialog', 'width=626,height=626'); return false;">
  18.                                 <i class="fab fa-facebook" style="font-size: 1.5em; color:#4267B2"></i>
  19.                             </button>
  20.                             <button class="btn btn-light mr-2 text-primary" style="width:2em; height:2em;display:flex;flex-direction: column; align-items: center; " aria-label="Partager sur Twitter" onclick="window.open('https://twitter.com/share?url=https://coupdcoeurimmo.fr/properties/{{ property.id }}', 'twitter-share-dialog', 'width=626,height=626'); return false;">
  21.                                 <i class="fab fa-twitter" style="font-size: 1.5em; color:#1DA1F2;"></i>
  22.                             </button>
  23.              </div>                 
  24.       
  25.                 <a href="{{ path('app_pdf_generate', {'id': property.id}) }}" target="_blank" class="btn btn-dark mr-2" style=";margin-left: 2rem">G&eacute;n&eacute;rer une fiche PDF</a>
  26.                 {% if property.category.name matches '/location/i' %}
  27.                     <a href="{{ path('app_rental_application_new', {'id': property.id}) }}" class="btn btn-dark" >Soumettre un dossier pour cette location</a>
  28.                 {% else %}
  29.                     <a href="{{ path('app_home_interest_new', {'id': property.id}) }}" class="btn btn-dark" >Remplir la fiche d'int&eacute;r&ecirc;t</a>
  30.                 {% endif %}
  31.            
  33.     </div>
  34.     
  41.     <div class="container">
  42.         <h1 class="text-center my-5">{{ property.title }}</h1>
  44.         <div class="row">
  45.             <div class="col-md-8">
  46.                 {# Image principale avec changement via JavaScript #}
  47.                 <div id="mainImageContainer" class="d-flex justify-content-center align-items-center" style="height: 500px; background-color: #ffffff;">
  48.             {% if property.images is not empty %}
  49.                     <img id="mainImage" src="{{ asset('images/properties/' ~ property.images[0].imagename) }}" class="img-fluid" alt="Image principale" style="height: -webkit-fill-available;" >
  50.             {% endif %}
  51.                 </div>
  52.                 </div>
  53.         
  54.             <div class="col-md-4">
  55.                 {# Galerie des miniatures d'images #}
  56.                 <div class="row mt-3" id="thumbnailGallery">
  57.                     {% for image in property.images %}
  58.                         <div class="col-4 mb-3">            
  59.                             <img src="{{ asset('images/properties/' ~ image.imagename) }}" alt="Image {{ loop.index }}" class="img-thumbnail smallImage" style="height: 70px;">
  60.                         </div>
  61.                     {% endfor %}
  62.                 </div>
  63.             </div>
  64.         
  65.         </div>
  66.     <hr class="text-danger bg-danger w-75 ">
  68.         <div class="row mt-5">
  70.                 <div class=" col d-flex flex-row">
  71.                                 <i class="fa-solid fa-user mr-2 mt-1 text-secondary "></i>  
  72.                 
  73.                                 <div class="">
  74.                 <h5 class="text-secondary" >Propriétaire  </h5>
  75.                 <h4 class="text-danger p-2 fs-3 text-white font-weight-bold"> {{ property.user.name }}</h4>
  76.                 </div>
  77.                             </div>
  78.                 
  79.                 <div class=" col d-flex flex-row">
  80.                                 <i class="fa-solid fa-bed-front mr-2 mt-1 text-secondary "></i>  
  81.                 
  82.                                 <div class="">
  83.                 <h5 class="text-secondary" ><i class="fa-solid fa-bed"></i> Nombre de pièces  </h5>
  84.                 <h4 class="text-danger p-2 fs-3 text-white font-weight-bold"> {{ property.roomNumber }}</h4>
  85.                 </div>
  86.                             </div>
  88.                 <div class=" col d-flex flex-row ">
  89.                                 <i class="fa-solid fa-euro-sign mr-2 mt-1 text-secondary"></i>  
  90.                 
  91.                                 <div class="">
  92.                 <h5 class="text-secondary" >Loyer </h5>
  93.                 <h4 class="text-danger p-2 fs-3 text-white font-weight-bold"> {{ property.rent|number_format }} &euro;</h4>
  94.                 </div>
  95.                             </div>
  97.         </div>
  104.         <div class="row mt-3">
  106.                 <div class=" col d-flex flex-row">
  107.                                 <i class="fa-solid fa-euro-sign mr-2 mt-1 text-secondary"></i>  
  108.                 
  109.                                 <div class="">
  110.                 <h5 class="text-secondary" >Prix </h5>
  111.                 <h4 class="text-danger p-2 fs-3 text-white font-weight-bold">{{ property.price|number_format }} &euro;</h4>
  112.                 </div>
  113.                             </div>
  114.                 
  115.                 <div class=" col d-flex flex-row">
  116.                                 <i class="fa-solid fa-tree mr-2 mt-1 text-secondary"></i>  
  117.                 
  118.                                 <div class="">
  119.                 <h5 class="text-secondary" >Ce bien dispose d'un jardin  </h5>
  120.                 <h4 class="text-danger p-2 fs-3 text-white font-weight-bold"> {{ property.garden ? 'Oui' : 'Non' }}</h4>
  121.                 </div>
  122.                             </div>
  124.                 <div class=" col d-flex flex-row">
  125.                                 <i class="fa-solid fa-building mr-2 mt-1 text-secondary "></i>  
  126.                 
  127.                                 <div class="">
  128.                 <h5 class="text-secondary" >Type du logement </h5>
  129.                 <h4 class="text-danger p-2 fs-3 text-white font-weight-bold"> {{ property.housingType == 'house' ? "Maison" : "Appartement" }}</h4>
  130.                 </div>
  131.                             </div>
  135.         </div>
  140.         <div class="row mt-3">
  142.                 <div class=" col d-flex flex-row">
  143.                                 <i class="fa-solid fa-money-bill-transfer mr-2 mt-1 text-secondary "></i>  
  144.                 
  145.                                 <div class="">
  146.                 <h5 class="text-secondary" >Type de transaction </h5>
  147.                 <h4 class="text-danger p-2 fs-3 text-white font-weight-bold"> {{ property.category.name }}</h4>
  148.                 </div>
  149.                             </div>
  150.                 
  151.                 <div class=" col d-flex flex-row">
  152.                                 <i class="fa-solid fa-calendar-days mr-2 mt-1 text-secondary"></i>  
  153.                 
  154.                                 <div class="">
  155.                 <h5 class="text-secondary" >Date de publication  </h5>
  156.                 <h4 class="text-danger p-2 fs-3 text-white font-weight-bold"> {{ property.createdAt|date('d/m/Y') }}</h4>
  157.                 </div>
  158.                             </div>
  160.                 <div class=" col d-flex flex-row">
  161.                                 <i class="fa-solid fa-location-dot mr-2 mt-1 text-secondary "></i>  
  162.                 
  163.                                 <div class="">
  164.                 <h5 class="text-secondary" >Ville </h5>
  165.                 <h4 class="text-danger p-2 fs-3 text-white font-weight-bold">{{ property.address.city }}</h4>
  166.                 </div>
  167.                             </div>
  171.         </div>
  175.         <div class="row mt-3">
  177.                 <div class=" col d-flex flex-row">
  178.                                 <i class="fa-solid fa-temperature-arrow-up mr-2 mt-1 text-secondary "></i>  
  179.                 
  180.                                 <div class="">
  181.                 <h5 class="text-secondary">Chauffage</h5>
  182.                 <h4 class="text-danger p-2 fs-3 text-white font-weight-bold">{{ property.heating }}</h4>
  183.                 </div>
  184.                             </div>
  185.                 
  186.                 <div class=" col d-flex flex-row">
  187.                                 <i class="fa-solid fa-calendar-days mr-2 mt-1 text-secondary "></i>  
  188.                 
  189.                                 <div class="">
  190.                 <h5 class="text-secondary"> Année de construction  </h5>
  191.                 <h4 class="text-danger p-2 fs-3 text-white font-weight-bold"> {{ property.yearBuilt|date('Y') }}</h4>
  192.                 </div>
  193.                             </div>
  195.                 <div class="col">
  198.                 </div>
  201.         </div>
  212.                             
  213.                             
  214.             
  215.                 <div class="card mt-4 mb-5">
  216.                     <div class="card-body mb-4">
  217.                         <h4 class="card-title mb-4">Description</h4>
  218.                         <p class="card-text fs-3">{{ property.content|raw }}</p>
  219.                     </div>
  220.                 </div>
  221.             </div>
  222.       
  223.     <!-- Scripts spécifiques à la page Property Show -->
  224.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  225.     <script>
  226.         var $jq = jQuery.noConflict();
  227.     </script>
  228.     <script>
  229.         $jq(document).ready(function() {
  230.             // Script pour changer l'image principale au clic sur une miniature
  231.             $jq('.smallImage').click(function() {
  232.                 var newSrc = $jq(this).attr('src');
  233.                 $jq('#mainImage').attr('src', newSrc);
  234.             });
  235.         });
  236.     </script>
  237. {% endblock %}