templates/search/new.html.twig line 1

Open in your IDE?
  1. <link rel="stylesheet" href="{{ asset('css/search/new.css') }}">
  3. <div class="d-flex py-3">
  4.     <div id="search-container text-center" class="col-md-8">
  5.         <div class="container text-white"  id="form_search">
  6.             <h1 id="titre1">Vous souhaitez acheter ou louer un bien ?</h1>
  7.             <h2 class="mb-4"> Coup d'coeur immo est lĂ  pour vous aider :) </h2>
  9.             {{ form_start(form, {'action': path('app_search_new'), 'attr': {'class': '' }}) }}
  11.             <div class="form-inline">
  13.     <div class="form-group d-inline-block">
  14.         <div class="text-white">
  15.             {{ form_label(form.inputVille, 'Localisation', {'label_attr': {'class': 'justify-content-start'}}) }}
  16.         </div>
  17.         <div>
  18.             {{ form_widget(form.inputVille, {'attr': {'class': 'form-control', 'placeholder': 'Veuillez rentrer une ville ou une région'}}) }}
  19.         </div>
  20.     </div>
  22.     <div class="form-group d-inline-block ml-2">
  23.         <div class="text-white">
  24.             {{ form_label(form.selectTypeBien, 'Type de bien', {'label_attr': {'class': 'justify-content-start'}}) }}
  25.         </div>
  26.         <div>
  27.             {{ form_widget(form.selectTypeBien, {'attr': {'class': 'form-select rounded'}}) }}
  28.         </div>
  29.     </div>
  33.         <div class="form-group d-inline-block ml-2">
  34.                 
  36.         <div>
  37.                     <button type="submit" class="btn bg-body-tertiary rounded py-2 px-5" style="margin-top:1.5em;" title="Rechercher"><i class="fa-solid fa-magnifying-glass"></i></button>
  38.         </div>
  39.                 </div>
  41.         
  43.                 <div id="advanced-search-options" style="display: none;">
  44.                     <div class="form-group d-inline-block ">
  45.             <div class="text-white">
  46.                         {{ form_label(form.inputPrixMin, 'Prix minimum', {'label_attr': {'class': 'justify-content-start'}}) }}
  47.             </div>
  48.             <div class="text-white">
  49.                         {{ form_widget(form.inputPrixMin, {'attr': {'class': 'form-control', 'placeholder': 'Prix minimum'}}) }}
  50.             </div>
  51.                     </div>
  53.                     <div class="form-group d-inline-block ml-2">
  54.             <div class="text-white">
  55.                         {{ form_label(form.inputPrixMax, 'Prix maximum', {'label_attr': {'class': 'justify-content-start'}}) }}
  56.             </div>
  57.             <div class="text-white">
  58.                         {{ form_widget(form.inputPrixMax, {'attr': {'class': 'form-control', 'placeholder': 'Prix maximum'}}) }}
  59.             </div>
  60.                     </div>
  62.                     <div class="form-group d-inline-block ml-2">
  63.             <div class="text-white">
  64.                         {{ form_label(form.selectTransaction, 'Transaction', {'label_attr': {'class': 'justify-content-start'}}) }}
  65.             </div>
  66.             <div class="text-white">
  67.                         {{ form_widget(form.selectTransaction, {'attr': {'class': 'form-select rounded'}}) }}
  68.             </div>
  69.             </div>
  70.                 </div>
  71.         
  72.             </div>
  73. <div class="form-group d-inline-block">
  74.         <div class="text-white">
  75.                     <p  class="link-opacity-50 link-opacity-100-hover text-white" style="cursor:pointer; text-decoration: underline; text-underline-offset: 3px;" id="btnToggleAdvanced">Recherche avancĂ©e</p>
  76.                 </div>
  77.         </div>
  79.             {{ form_end(form) }}
  80.         </div>
  81.     </div>
  84. <script>
  85.     document.addEventListener('DOMContentLoaded', function() {
  86.         const btnToggleAdvanced = document.getElementById('btnToggleAdvanced');
  87.         const advancedSearchOptions = document.getElementById('advanced-search-options');
  89.         btnToggleAdvanced.addEventListener('click', function() {
  90.             if (advancedSearchOptions.style.display === 'none') {
  91.                 advancedSearchOptions.style.display = 'flex';
  92.                 btnToggleAdvanced.textContent = 'Masquer recherche avancĂ©e';
  93.             } else {
  94.                 advancedSearchOptions.style.display = 'none';
  95.                 btnToggleAdvanced.textContent = 'Recherche avancĂ©e';
  96.             }
  97.         });
  98.     });
  99. </script>