templates/partials/_metiers_cards.html.twig line 1

  1. {% for metier in metiers|default([]) %}
  2.     <div class="group bg-white rounded-xl border border-slate-200 p-5 hover:shadow-lg transition-all hover:-translate-y-1 hover:border-indigo-200">
  3.         <!-- En-tête avec nom et secteur -->
  4.         <div class="flex justify-between items-start mb-3">
  5.             <h3 class="text-lg font-semibold text-slate-900 group-hover:text-indigo-600 transition">
  6.                 {{ metier.nom }}
  7.             </h3>
  8.         </div>
  9.         
  10.         <!-- Informations complémentaires (durée et niveau) - dédupliquées -->
  11.         <div class="flex flex-wrap gap-3 mb-2 border-b pb-2 text-xs">
  12.             {% if metier.secteur %}
  13.                 <div class="flex items-center text-purple-600 bg-purple-50 px-2 py-1 rounded-md">
  14.                     {{ metier.secteur.nom }}
  15.                 </div> 
  16.             {% endif %}
  17.             {# Dédupliquer les combinaisons (dureeFormation, niveauRequis) identiques #}
  18.             {% set shownCombinations = [] %}
  19.             {% for em in metier.etablissementMetiers|default([]) %}
  20.                 {% set comboKey = (em.dureeFormation|default('')) ~ '||' ~ (em.niveauRequis|default('')) %}
  21.                 {% if comboKey not in shownCombinations %}
  22.                     {% set shownCombinations = shownCombinations|merge([comboKey]) %}
  23.                     {% if em.dureeFormation %}
  24.                     <div class="flex items-center text-slate-600 bg-slate-50 px-2 py-1 rounded-md">
  25.                         <i class="fas fa-clock mr-1 text-indigo-400"></i>
  26.                         <span>{{ em.dureeFormation }}</span>
  27.                     </div>
  28.                     {% endif %}
  29.                     {% if em.niveauRequis %}
  30.                     <div class="flex items-center text-slate-600 bg-slate-50 px-2 py-1 rounded-md">
  31.                         <i class="fas fa-graduation-cap mr-1 text-indigo-400"></i>
  32.                         <span>{{ em.niveauRequis }}</span>
  33.                     </div>
  34.                     {% endif %}
  35.                 {% endif %}
  36.             {% endfor %}
  37.         </div>
  38.         
  39.         <!-- Badges des établissements (cliquables) -->
  40.         {% if metier.etablissementMetiers|length > 0 %}
  41.         <div class="mb-2">
  42.             <div class="flex flex-wrap gap-1">
  43.                 {% for em in metier.etablissementMetiers|slice(0, 7) %}
  44.                     {% if em.etablissement %}
  45.                         <a href="{{ path('app_candidature_new', {'etablissement': em.etablissement.id, 'metier': metier.id}) }}" 
  46.                            class="px-3 py-1 bg-indigo-50 text-indigo-700 text-sm rounded-full hover:bg-indigo-100 hover:text-indigo-800 transition-colors inline-flex items-center group/badge"
  47.                            title="Postuler pour {{ em.etablissement.nom }}">
  48.                             {{ em.etablissement.nom|length > 25 ? em.etablissement.nom|slice(0, 25) ~ '…' : em.etablissement.nom }}
  49.                         </a>
  50.                     {% endif %}
  51.                 {% endfor %}
  52.                 
  53.                 {% if metier.etablissementMetiers|length > 7 %}
  54.                     {% set autresEtablissements = [] %}
  55.                     {% for em in metier.etablissementMetiers|slice(7) %}
  56.                         {% if em.etablissement %}
  57.                             {% set autresEtablissements = autresEtablissements|merge([{
  58.                                 'id': em.etablissement.id,
  59.                                 'nom': em.etablissement.nom,
  60.                                 'places': em.nbrplace
  61.                             }]) %}
  62.                         {% endif %}
  63.                     {% endfor %}
  64.                     
  65.                     <button type="button"
  66.                             class="px-3 py-1 bg-slate-100 text-slate-600 text-sm rounded-full hover:bg-slate-200 transition-colors cursor-pointer etablissement-modal-btn"
  67.                             data-metier-id="{{ metier.id }}"
  68.                             data-metier-nom="{{ metier.nom }}"
  69.                             data-etablissements="{{ autresEtablissements|json_encode|e('html_attr') }}">
  70.                         voir la suite (+{{ metier.etablissementMetiers|length - 7 }})
  71.                     </button>
  72.                 {% endif %}
  73.             </div>
  74.         </div>
  75.         {% else %}
  76.             <p class="text-xs text-slate-400 italic mb-2">Aucun établissement de formation</p>
  77.         {% endif %}
  78.     </div>
  79. {% else %}
  80.     <div class="col-span-full text-center py-12 bg-white/10 backdrop-blur-sm rounded-xl">
  81.         <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
  82.             <i class="fas fa-briefcase text-2xl text-white"></i>
  83.         </div>
  84.         <p class="text-lg text-white">Aucun métier trouvé</p>
  85.         <p class="text-sm text-white/70">Modifiez vos filtres</p>
  86.     </div>
  87. {% endfor %}