templates/modal/show.html.twig line 1

Open in your IDE?
  1. <!-- Modal pour la propri�t� sp�cifique -->
  2. <link rel="stylesheet" href="{{ asset('css/modal.css') }}">
  3. <style>
  4. .carousel-control-prev-icon,
  5. .carousel-control-next-icon {
  6.   background-color: transparent; /* Assurez-vous que le fond est transparent */
  7.   filter: invert(1) sepia(1) saturate(5) hue-rotate(190deg); /* Appliquer un filtre de couleur */
  8. }
  9. </style>
  10. <div class="modal fade" id="exampleModal-{{ property.id }}" tabindex="-1" aria-labelledby="exampleModalLabel-{{ property.id }}" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  11.     <div class="modal-dialog modal-xl m-auto">
  12.         <div class="modal-content">
  13.             <div id="container_modal">
  14.                 <div class="modal-header">
  15.                     <h1 class="modal-title caract�ristiques" id="exampleModalLabel-{{ property.id }}">{{ property.title }}</h1>
  16.                     <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
  17.                         <span aria-hidden="true">&times;</span>
  18.                     </button>
  19.                 </div>
  20.                 <span id="addr" class="caract�ristiques"> &Agrave; {{ property.address.city }}</span>
  21.                 <br>
  22.                 {% if property.category.name matches '/location/i' %}
  23.                 <div class="caract�ristiques mt-0">
  24.                     <span id="prix" class="fw-bolder text-danger">{{ property.rent|number_format }} &euro; </span>
  25.                     <span id="addr">/mois</span>
  26.                 </div>
  27.                 {% else %}
  28.                 <div class="caract�ristiques mt-0">
  29.                     <span id="prix" class="fw-bold text-danger">{{ property.price|number_format }} &euro;</span>
  30.                 </div>
  31.                 {% endif %}
  32.             </div>
  33.             <div class="modal-body">
  34.                 <div class="row">
  35.                     <div class="col-md-7">
  36.                         <div id="carouselExampleControls-{{ property.id }}" class="carousel slide" data-ride="carousel">
  37.                             <div class="carousel-inner">
  38.                                 {% if property.images|length > 0 %}
  39.                                     {% for image in property.images %}
  40.                                         <div class="carousel-item text-center {% if loop.first %}active{% endif %}" style="height:400px; width:500px;" >
  41.                                             <img src="{{ asset('images/properties/' ~ image.imagename) }}" alt="{{ property.title }}"  style="height:-webkit-fill-available; ">
  42.                                         </div>
  43.                                     {% endfor %}
  44.                                 {% else %}
  45.                                     <div class="carousel-item active">
  46.                                         <img style="margin-left:2rem" src="https://via.placeholder.com/300x300?text=No+Image" alt="No image available">
  47.                                     </div>
  48.                                 {% endif %}
  49.                             </div>
  50.                             <a class="carousel-control-prev" href="#carouselExampleControls-{{ property.id }}" role="button" data-slide="prev">
  51.                                 <span class="carousel-control-prev-icon " aria-hidden="true"></span>
  52.                                 <span class="sr-only">Previous</span>
  53.                             </a>
  54.                             <a class="carousel-control-next" href="#carouselExampleControls-{{ property.id }}" role="button" data-slide="next">
  55.                                 <span class="carousel-control-next-icon " aria-hidden="true"></span>
  56.                                 <span class="sr-only">Next</span>
  57.                             </a>
  58.                         </div>
  59.                         <p style="font-size:20px;margin-left: 2rem;margin-top: 1em;">Mis &agrave; jour le {{ property.createdAt|date("d/m/Y") }}</p>
  60.                     </div>                 
  61.                     <div class="col-md-5">
  62.                         <h2 style="color:red;font-size: 42px;">Caract&eacute;ristiques</h2>
  63.                         <hr id="title_cara">
  64.                         <table style="width: -webkit-fill-available;">
  65.                             <tr style="display: flex; flex-direction: column;">
  66.                                 <td class="table-danger" style="font-size: 20px;">
  67.                                     Nombre de pi&egrave;ces :
  68.                                     <span class="badge">{{ property.roomNumber }}</span>
  69.                                 </td>
  70.                                 <td style="font-size: 20px;">
  71.                                     Ce bien dispose d'un jardin :
  72.                                     <span class="badge">{{ property.garden ? 'Oui' : 'Non' }}</span>
  73.                                 </td>
  74.                                 <td class="table-danger" style="font-size: 20px;">
  75.                                     Type du logement :
  76.                                     <span class="badge">{{ property.housingType.name }}</span>
  77.                                 </td>
  78.                                 <td style="font-size: 20px;">
  79.                                     Surface :
  80.                                     <span class="badge">{{ property.harea }} m&sup2;</span>
  81.                                 </td>
  82.                                 <td class="table-danger" style="font-size: 20px;">
  83.                                     Type de transaction :
  84.                                     <span class="badge">{{ property.category.name }}</span>
  85.                                 </td>
  86.                                 <td style="font-size: 20px;">
  87.                                     Chauffage :
  88.                                     <span class="badge">{{ property.heating }}</span>
  89.                                 </td>
  90.                                 <td class="table-danger" style="font-size: 20px;">
  91.                                     Ann&eacute;e de construction :
  92.                                     <span class="badge">{{ property.yearBuilt|date('Y') }}</span>
  93.                                 </td>
  94.                                 <td style="font-size: 20px;">
  95.                                     Cat&eacute;gorie :
  96.                                     <span class="badge">{{ property.category.name }}</span>
  97.                                 </td>
  98.                             </tr>
  99.                         </table>
  100.                         <style>
  101.                             .badge{
  102.                                 font-weight:500 !important;
  103.                                 font-size:100% !important;
  104.                             }
  105.                         </style>
  106.                         <h2 style="color:red; margin-top:1em;font-size: 42px;">Partager</h2>
  107.                         <hr id="title_cara">
  108.                          <div style="display:flex; flex-direction:row; margin-bottom:2em;">
  109.                             <button class="btn btn-light shadow mr-2 text-primary"  aria-label="Partager sur Facebook"  style="width:3em; height:3em;display:flex;flex-direction: column; align-items: center;"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;">
  110.                                 <i class="fab fa-facebook" style="font-size: 2em; color:#4267B2"></i>
  111.                             </button>
  112.                             <button class="btn btn-light shadow mr-2 text-primary" aria-label="Partager sur Twitter" style="width:3em; height:3em;display:flex;flex-direction: column; align-items: center; "  onclick="window.open('https://twitter.com/share?url=https://coupdcoeurimmo.fr/properties/{{ property.id }}', 'twitter-share-dialog', 'width=626,height=626'); return false;">
  113.                                 <i class="fab fa-twitter" style="font-size: 2em; color:#1DA1F2;"></i>
  114.                             </button>
  115.              </div>
  116.                     </div>
  117.                 </div>
  118.                 <div style="margin-left: 2rem;">
  119.                     <h2 style="color:red;font-size: 42px;">Description</h2>
  120.                     <hr id="title_cara">
  121.                     <p style="font-size:20px">{{ property.content|raw }}</p>
  122.                 </div>
  123.                 <a href="{{ path('app_pdf_generate', {'id': property.id}) }}" target="_blank" class="btn btn-dark mr-2" style="margin-top: 1em;margin-left: 2rem">G&eacute;n&eacute;rer une fiche PDF</a>
  124.                 {% if property.category.name matches '/location/i' %}
  125.                     <a href="{{ path('app_rental_application_new', {'id': property.id}) }}" class="btn btn-dark" style="margin-top: 1em;">Soumettre un dossier pour cette location</a>
  126.                 {% else %}
  127.                     <a href="{{ path('app_home_interest_new', {'id': property.id}) }}" class="btn btn-dark" style="margin-top: 1em;">Remplir la fiche d'int&eacute;r&ecirc;t</a>
  128.                 {% endif %}
  129.             </div>
  130.         </div>
  131.     </div>
  132. </div>