templates/metier/list.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}Tous les métiers | DAIP{% endblock %}
  5. {% block body %}
  6. <section class="min-h-screen bg-gradient-to-br from-indigo-50 to-purple-50 py-12 sm:py-20">
  7.     <div class="container mx-auto px-4 w-full max-w-full">
  9.         {# En-tête #}
  10.         <div class="text-center mb-8 sm:mb-12">
  11.             <a href="{{ path('app_home') }}" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 mb-4 transition text-sm">
  12.                 <i class="fas fa-arrow-left mr-2"></i> Retour à l'accueil
  13.             </a>
  14.             <div class="inline-flex items-center rounded-full border border-indigo-200 bg-white px-3 sm:px-4 py-1.5 text-xs sm:text-sm font-semibold text-indigo-600 mb-4 shadow-sm">
  15.                 <i class="fas fa-briefcase mr-2"></i>
  16.                 NOS MÉTIERS
  17.             </div>
  18.             <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-slate-900 mb-4">
  19.                 {{ total }} métiers disponibles
  20.             </h1>
  21.         </div>
  23.         {# Filtres #}
  24.         <div class="max-w-3xl 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 métier..." 
  32.                                value="{{ recherche }}"
  33.                                class="w-full pl-10 pr-4 py-2 sm:py-3 rounded-lg border border-indigo-200 bg-white text-slate-700 text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-indigo-500">
  34.                     </div>
  35.                 </div>
  36.                 <div class="flex-1">
  37.                     <select id="secteur-filter" class="w-full px-4 py-2 sm:py-3 rounded-lg border border-indigo-200 bg-white text-slate-700 text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-indigo-500">
  38.                         <option value="">Tous les secteurs</option>
  39.                         {% for secteur in secteurs %}
  40.                             <option value="{{ secteur.id }}" {{ secteurSelectionne == secteur.id ? 'selected' : '' }}>
  41.                                 {{ secteur.nom }}
  42.                             </option>
  43.                         {% endfor %}
  44.                     </select>
  45.                 </div>
  46.             </div>
  47.         </div>
  49.         {# Grille #}
  50.         <div id="metiers-grid" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-6">
  51.             {% include 'partials/_metiers_cards.html.twig' with {'metiers': metiers} %}
  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-indigo-200 border-t-indigo-600 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 secteur = document.getElementById('secteur-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('secteur', secteur.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.     secteur.addEventListener('change', recharger);
  82. });
  83. </script>
  84. {% endblock %}