templates/etablissement/list.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}Tous les établissements | DAIP{% endblock %}
  5. {% block body %}
  6. <section class="min-h-screen bg-gradient-to-br from-indigo-700 via-purple-700 to-blue-700 py-12 sm:py-20">
  7.     <div class="container mx-auto px-4 w-full max-w-full">
  8.         {#<a href="{{ path('app_home') }}" class="inline-flex items-center text-white/70 hover:text-white transition text-sm">#}
  9.                {# <i class="fas fa-arrow-left mr-2"></i> Retour à l'accueil#}
  10.         {#</a>#}
  11.         {# En-tête #}
  12.         <div class="text-center mb-8 sm:mb-12">
  13.             
  14.             <div class="inline-flex items-center rounded-full border border-white bg-white px-3 sm:px-4 py-1.5 text-xs sm:text-sm font-semibold text-purple-500 mb-4 shadow-lg">
  15.                 <i class="fas fa-building mr-2"></i>
  16.                 ÉTABLISSEMENTS DE FORMATION
  17.             </div>
  18.             <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-white mb-4">
  19.                 {{ total }} établissements disponibles
  20.             </h1>
  21.         </div>
  23.         {# Filtres #}
  24.         <div class="max-w-4xl mx-auto mb-8 px-2">
  25.             <div class="flex flex-col sm:flex-row gap-3 sm:gap-4">
  26.                 <div class="flex-1">
  27.                     <div class="relative">
  28.                         <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400"></i>
  29.                         <input type="text" 
  30.                                id="recherche-input"
  31.                                placeholder="Rechercher un établissement..." 
  32.                                value="{{ recherche }}"
  33.                                class="w-full pl-10 pr-4 py-2 sm:py-3 rounded-lg border border-white/30 bg-white/10 backdrop-blur-sm text-white placeholder-white/70 text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-white">
  34.                     </div>
  35.                 </div>
  36.                 <div class="sm:w-64">
  37.                     <select id="direction-filter" class="w-full px-4 py-2 sm:py-3 rounded-lg border border-white/30 bg-white/10 backdrop-blur-sm text-white text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-white">
  38.                         <option value="">Toutes les directions</option>
  39.                         {% for direction in directions %}
  40.                             <option value="{{ direction.id }}" {{ directionSelectionnee == direction.id ? 'selected' : '' }}>
  41.                                 {{ direction.nom }}
  42.                             </option>
  43.                         {% endfor %}
  44.                     </select>
  45.                 </div>
  46.             </div>
  47.         </div>
  49.         {# Grille #}
  50.         <div id="etablissements-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
  51.             {% include 'partials/_etablissements_cards.html.twig' with {'etablissements': etablissements} %}
  52.         </div>
  54.         {# Chargement #}
  55.         <div id="loading" class="hidden text-center py-8">
  56.             <div class="inline-block w-8 h-8 border-4 border-white/30 border-t-white rounded-full animate-spin"></div>
  57.         </div>
  59.     </div>
  60. </section>
  62. <script>
  63. document.addEventListener('DOMContentLoaded', function() {
  64.     const recherche = document.getElementById('recherche-input');
  65.     const direction = document.getElementById('direction-filter');
  66.     
  67.     function recharger() {
  68.         const url = new URL(window.location.href);
  69.         url.searchParams.set('page', '1');
  70.         url.searchParams.set('recherche', recherche.value);
  71.         url.searchParams.set('direction', direction.value);
  72.         window.location.href = url.toString();
  73.     }
  74.     
  75.     let timer;
  76.     recherche.addEventListener('input', () => {
  77.         clearTimeout(timer);
  78.         timer = setTimeout(recharger, 500);
  79.     });
  80.     
  81.     direction.addEventListener('change', recharger);
  82. });
  83. </script>
  84. {% endblock %}