templates/application/whileresume/application/jobs/dashboard.html.twig line 1

Open in your IDE?
  1. {% extends 'application/whileresume/application/jobs/layout-social.html.twig' %}
  3. {% trans_default_domain 'whr-public' %}
  5. {% import 'application/whileresume/_macros/promo_card.html.twig' as promo %}
  7. {% block title %}{% if currentSubKeyword is defined and currentSubKeyword is not null and currentCityFilter is defined and currentCityFilter is not null %}{{ currentSubKeyword }} {{ currentCityFilter.label }}{% elseif currentFilter is defined and currentFilter is not null %}{{ currentFilter.shortTitle|default(currentFilter.label) }} — WhileResume{% else %}{{ 'job.dashboard.title'|trans }}{% endif %}{% endblock title %}
  8. {% block description %}{% if currentSubKeyword is defined and currentSubKeyword is not null and currentCityFilter is defined and currentCityFilter is not null %}Découvrez les offres "{{ currentSubKeyword }}" à {{ currentCityFilter.label }}.{% elseif currentFilter is defined and currentFilter is not null and currentFilter.shortDescription is not empty %}{{ currentFilter.shortDescription }}{% else %}{{ 'job.dashboard.description'|trans }}{% endif %}{% endblock description %}
  9. {% block robots %}index,follow{% endblock robots %}
  11. {% block css %}
  12.     <style>
  13.         /* ─── Page dashboard /jobs ─── */
  14.         .jobs-dash{max-width:880px;margin:0 auto}
  15.         .jobs-dash-header{margin-bottom:18px}
  16.         .jobs-dash-title{font-size:24px;font-weight:800;color:#1E1B2E;line-height:1.2;letter-spacing:-0.02em;margin:0 0 6px}
  17.         @media(min-width:768px){.jobs-dash-title{font-size:28px}}
  18.         .jobs-dash-subtitle{font-size:14px;color:#6B7280;margin:0 0 18px}
  20.         /* ─── Bandeau contexte ville (badge + bouton ALL) ─── */
  21.         .city-context-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:10px 14px;background:#F5F3FF;border:1px solid rgba(108,58,237,.15);border-radius:12px}
  22.         .city-context-label{font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase;letter-spacing:.06em}
  23.         .city-context-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:100px;background:#fff;color:var(--theme-color,#6C3AED);font-size:13px;font-weight:600;border:1px solid rgba(108,58,237,.2)}
  24.         .city-context-badge-icon{font-size:14px;line-height:1}
  25.         .city-context-clear-btn{margin-left:auto;display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:100px;background:transparent;color:var(--theme-color,#6C3AED);font-size:12px;font-weight:600;border:1px dashed rgba(108,58,237,.4);cursor:pointer;text-decoration:none;font-family:inherit;transition:background .15s,border-style .15s,border-color .15s}
  26.         .city-context-clear-btn:hover{background:#fff;border-style:solid;border-color:var(--theme-color,#6C3AED);color:var(--theme-color,#6C3AED)}
  27.         .city-context-clear-btn svg{width:11px;height:11px}
  29.         /* Widget recherche */
  30.         .wr-search-widget{background:#fff;border-radius:14px;box-shadow:0 0 20px 0 rgba(0,0,0,0.05);padding:10px;margin-bottom:14px;position:relative;z-index:50}
  31.         .wr-search-input-wrap{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:10px;background:#F9FAFB;border:1px solid #E5E7EB;transition:border-color .2s,background .2s}
  32.         .wr-search-input-wrap:focus-within{border-color:rgba(108,58,237,.3);background:#fff}
  33.         .wr-search-icon{color:#9CA3AF;display:flex;flex-shrink:0}
  34.         .wr-search-input{flex:1;border:none;outline:none;background:transparent;font-size:14px;color:#1E1B2E;padding:4px 0;font-family:inherit;min-width:0}
  35.         .wr-search-input::placeholder{color:#9CA3AF}
  36.         .wr-search-clear{background:none;border:none;color:#9CA3AF;cursor:pointer;padding:4px;display:none;font-family:inherit}
  37.         .wr-search-clear.visible{display:flex;align-items:center}
  38.         .wr-search-clear:hover{color:#6B7280}
  39.         .wr-search-clear svg{width:14px;height:14px}
  40.         .wr-search-kbd-hint{display:none;align-items:center;padding:3px 8px;background:#fff;border:1px solid #E5E7EB;border-radius:6px;font-size:10.5px;font-weight:600;color:#6B7280;font-family:inherit;letter-spacing:.02em;white-space:nowrap;flex-shrink:0}
  41.         .wr-search-input-wrap:focus-within .wr-search-kbd-hint{display:inline-flex}
  43.         /* Chips keywords */
  44.         .search-keywords{display:flex;flex-wrap:wrap;gap:6px;margin:0 4px 18px}
  45.         .search-keyword-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:100px;background:#F5F3FF;color:var(--theme-color,#6C3AED);font-size:12.5px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:background .15s,border-color .15s,transform .15s;font-family:inherit}
  46.         .search-keyword-chip:hover{background:#EDE9FE;border-color:rgba(108,58,237,.2);transform:translateY(-1px);color:var(--theme-color,#6C3AED)}
  47.         .search-keyword-chip.active{background:var(--theme-color,#6C3AED);color:#fff;border-color:var(--theme-color,#6C3AED)}
  48.         .search-keyword-chip-icon{font-size:13px;line-height:1}
  49.         .search-keywords-label{font-size:11px;font-weight:600;color:#9CA3AF;text-transform:uppercase;letter-spacing:.06em;margin-right:4px;align-self:center}
  51.         /* ─── Sections de filtres SEO (chips → liens directs vers /jobs/{slug}) ─── */
  52.         .filter-section{margin:0 0 14px}
  53.         .filter-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;padding:0 4px;flex-wrap:wrap}
  54.         @media(max-width:540px){
  55.             .dash-filter-search{max-width:100%;width:100%}
  56.         }
  57.         .filter-section-title{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:#6B7280;text-transform:uppercase;letter-spacing:.06em;margin:0}
  58.         .filter-section-title-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:#F5F3FF;color:var(--theme-color,#6C3AED)}
  59.         .filter-section-title-icon svg{width:11px;height:11px}
  60.         .filter-section-toggle{background:none;border:none;font-size:11px;color:var(--theme-color,#6C3AED);font-weight:600;cursor:pointer;font-family:inherit;padding:4px 8px;border-radius:6px;transition:background .15s}
  61.         .filter-section-toggle:hover{background:#F5F3FF}
  62.         .filter-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 4px}
  63.         .filter-chip{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:100px;background:#fff;color:#374151;font-size:12.5px;font-weight:500;cursor:pointer;border:1px solid #E5E7EB;text-decoration:none;transition:background .15s,border-color .15s,transform .15s,color .15s;font-family:inherit;white-space:nowrap}
  64.         .filter-chip:hover{background:#F5F3FF;border-color:rgba(108,58,237,.3);color:var(--theme-color,#6C3AED);transform:translateY(-1px)}
  65.         .filter-chip.active{background:var(--theme-color,#6C3AED);border-color:var(--theme-color,#6C3AED);color:#fff}
  66.         .filter-chip.active:hover{background:#5B21B6;color:#fff}
  67.         .filter-chip-icon{font-size:14px;line-height:1}
  68.         .filter-chip-arrow{display:inline-flex;color:currentColor;opacity:.5;margin-left:2px}
  69.         .filter-chip-arrow svg{width:10px;height:10px}
  71.         /* Mode "compact" : sections initialement collapsées si > 6 items */
  72.         .filter-chips.collapsed{max-height:80px;overflow:hidden;position:relative}
  73.         .filter-chips.collapsed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30px;background:linear-gradient(to bottom,transparent,#FAFAFA);pointer-events:none}
  75.         /* ─── Bouton "Voir plus" sous les chips villes/métiers ─── */
  76.         .dash-filter-more-wrap{display:flex;justify-content:center;margin-top:10px;padding:0 4px}
  77.         .dash-filter-more-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;background:transparent;color:var(--theme-color,#6C3AED);border:1px dashed rgba(108,58,237,.35);border-radius:100px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s,border-style .15s,border-color .15s}
  78.         .dash-filter-more-btn:hover{background:#F5F3FF;border-style:solid;border-color:var(--theme-color,#6C3AED)}
  79.         .dash-filter-more-icon{display:inline-flex;align-items:center;color:currentColor;transition:transform .2s}
  80.         .dash-filter-more-icon svg{width:12px;height:12px}
  81.         .dash-filter-more-btn.is-expanded .dash-filter-more-icon{transform:rotate(180deg)}
  83.         /* ─── Input de recherche dans le header (toujours visible) ─── */
  84.         .dash-filter-search{display:block;position:relative;flex:1;max-width:240px}
  85.         @keyframes dashFilterFadeIn{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}
  86.         .dash-filter-search-input{width:100%;padding:5px 10px 5px 28px;border:1px solid #E5E7EB;border-radius:100px;font-size:12px;color:#1E1B2E;background:#FAFAFA;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s,background .15s}
  87.         .dash-filter-search-input:focus{border-color:rgba(108,58,237,.4);background:#fff}
  88.         .dash-filter-search-input::placeholder{color:#9CA3AF}
  89.         .dash-filter-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#9CA3AF;pointer-events:none;display:flex}
  90.         .dash-filter-search-icon svg{width:11px;height:11px}
  92.         /* État "aucun résultat" sous le filtre live */
  93.         .dash-filter-empty{display:none;padding:14px 12px;font-size:12.5px;color:#9CA3AF;font-style:italic;text-align:center;width:100%}
  94.         .filter-chips.is-no-results .dash-filter-empty{display:block}
  96.         /* Bandeau résultats */
  97.         .jobs-results-info{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 4px 14px;font-size:12px;color:#6B7280}
  98.         .jobs-results-info strong{color:#1E1B2E;font-weight:700}
  100.         /* Liste cards (style "similar-card" comme dans show.html.twig) */
  101.         .jobs-list{display:flex;flex-direction:column;gap:10px}
  102.         .jobs-card{background:#fff;border-radius:14px;padding:14px;box-shadow:0 0 16px 0 rgba(0,0,0,0.04);display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .2s}
  103.         .jobs-card:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(108,58,237,.1);color:inherit}
  104.         .jobs-card-logo{width:50px;height:50px;border-radius:12px;background:linear-gradient(135deg,#EDE9FE,#DDD6FE);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;color:var(--theme-color,#6C3AED);flex-shrink:0;overflow:hidden}
  105.         .jobs-card-logo img{width:100%;height:100%;object-fit:cover;border-radius:8px}
  106.         .jobs-card-logo svg{width:24px;height:24px;opacity:.85}
  107.         .jobs-card-info{flex:1;min-width:0}
  108.         .jobs-card-title{font-size:14px;font-weight:700;color:#1E1B2E;line-height:1.3;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  109.         .jobs-card-meta{font-size:12px;color:#6B7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  110.         .jobs-card-salary{font-size:11px;font-weight:600;color:var(--theme-color,#6C3AED);background:#F5F3FF;padding:3px 9px;border-radius:100px;white-space:nowrap;flex-shrink:0}
  111.         .jobs-card-arrow{flex-shrink:0;color:#9CA3AF;transition:color .15s,transform .15s}
  112.         .jobs-card:hover .jobs-card-arrow{color:var(--theme-color,#6C3AED);transform:translateX(2px)}
  113.         .jobs-card-arrow svg{width:18px;height:18px}
  115.         /* Skeleton (pendant chargement) */
  116.         .jobs-skeleton{display:flex;flex-direction:column;gap:10px}
  117.         .jobs-skel-card{background:#fff;border-radius:14px;padding:14px;display:flex;align-items:center;gap:14px;box-shadow:0 0 16px 0 rgba(0,0,0,0.04)}
  118.         .jobs-skel-logo{width:50px;height:50px;border-radius:12px;background:linear-gradient(90deg,#F3F4F6 0%,#E5E7EB 50%,#F3F4F6 100%);background-size:200% 100%;animation:jobsSkelShim 1.4s ease-in-out infinite;flex-shrink:0}
  119.         .jobs-skel-info{flex:1}
  120.         .jobs-skel-line{height:14px;background:linear-gradient(90deg,#F3F4F6 0%,#E5E7EB 50%,#F3F4F6 100%);background-size:200% 100%;animation:jobsSkelShim 1.4s ease-in-out infinite;border-radius:4px;margin-bottom:6px}
  121.         .jobs-skel-line.s1{width:60%}
  122.         .jobs-skel-line.s2{width:40%;height:12px;margin-bottom:0}
  123.         @keyframes jobsSkelShim{0%{background-position:200% 0}100%{background-position:-200% 0}}
  125.         /* Bouton charger plus */
  126.         .jobs-load-more{display:flex;width:100%;padding:14px;margin-top:16px;background:#fff;color:var(--theme-color,#6C3AED);border:1.5px dashed rgba(108,58,237,.35);border-radius:12px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;align-items:center;justify-content:center;gap:8px;transition:background .15s,border-color .15s}
  127.         .jobs-load-more:hover{background:#F5F3FF;border-color:var(--theme-color,#6C3AED);border-style:solid;color:var(--theme-color,#6C3AED)}
  128.         .jobs-load-more svg{width:14px;height:14px}
  129.         .jobs-load-more:disabled{opacity:.6;cursor:not-allowed}
  130.         .jobs-load-more.loading{cursor:wait}
  131.         .jobs-load-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(108,58,237,.2);border-top-color:var(--theme-color,#6C3AED);border-radius:50%;animation:jobsLoadSpin .7s linear infinite}
  132.         @keyframes jobsLoadSpin{to{transform:rotate(360deg)}}
  134.         /* État vide */
  135.         .jobs-empty{text-align:center;padding:40px 20px;background:#fff;border-radius:14px;box-shadow:0 0 16px 0 rgba(0,0,0,0.04)}
  136.         .jobs-empty-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;background:#F5F3FF;color:var(--theme-color,#6C3AED);margin-bottom:14px}
  137.         .jobs-empty-icon svg{width:24px;height:24px}
  138.         .jobs-empty-title{font-size:16px;font-weight:700;color:#1E1B2E;margin:0 0 6px}
  139.         .jobs-empty-text{font-size:13px;color:#6B7280;margin:0}
  140.     </style>
  142.     {# Styles partagés de la promo card (définis dans la macro) #}
  143.     {{ promo.styles() }}
  144. {% endblock css %}
  146. {% block body %}
  147.     <div class="jobs-dash">
  149.         <div class="jobs-dash-header">
  150.             {% if currentSubKeyword is defined and currentSubKeyword is not null and currentCityFilter is defined and currentCityFilter is not null %}
  151.                 {# Cas combiné : ville + keyword #}
  152.                 <h1 class="jobs-dash-title">
  153.                     {% if currentCityFilter.icon is not empty %}{{ currentCityFilter.icon }} {% endif %}{{ currentSubKeyword }} {{ 'job.dashboard.cityHeadingIn'|trans }} {{ currentCityFilter.label }}
  154.                 </h1>
  155.                 <p class="jobs-dash-subtitle">{{ 'job.dashboard.cityKeywordSubtitle'|trans({'%keyword%': currentSubKeyword, '%city%': currentCityFilter.label}) }}</p>
  156.             {% elseif currentFilter is defined and currentFilter is not null %}
  157.                 <h1 class="jobs-dash-title">
  158.                     {% if currentFilter.icon is not empty %}{{ currentFilter.icon }} {% endif %}{{ currentFilter.shortTitle|default(currentFilter.label) }}
  159.                 </h1>
  160.                 {% if currentFilter.shortDescription is not empty %}
  161.                     <p class="jobs-dash-subtitle">{{ currentFilter.shortDescription }}</p>
  162.                 {% else %}
  163.                     <p class="jobs-dash-subtitle">{{ 'job.dashboard.subtitle'|trans }}</p>
  164.                 {% endif %}
  165.             {% else %}
  166.                 <h1 class="jobs-dash-title">{{ 'job.dashboard.heading'|trans }}</h1>
  167.                 <p class="jobs-dash-subtitle">{{ 'job.dashboard.subtitle'|trans }}</p>
  168.             {% endif %}
  170.             {# Badge "Ville active" + bouton "Tout voir" / ALL pour reset #}
  171.             {% if currentCityFilter is defined and currentCityFilter is not null %}
  172.                 <div class="city-context-bar">
  173.                     <span class="city-context-label">{{ 'job.dashboard.contextLabel'|trans }}</span>
  174.                     <span class="city-context-badge">
  175.                         {% if currentCityFilter.icon is not empty %}<span class="city-context-badge-icon">{{ currentCityFilter.icon }}</span>{% endif %}
  176.                         <span>{{ currentCityFilter.label }}</span>
  177.                     </span>
  178.                     <a href="{% if app.request.locale == 'en' %}{{ path('whileresume_jobs_list') }}{% else %}{{ path('locale_whileresume_jobs_list',{'_locale':app.request.locale}) }}{% endif %}"
  179.                        class="city-context-clear-btn"
  180.                        title="{{ 'job.dashboard.clearCity'|trans }}">
  181.                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6" transform="rotate(180 12 12)"/></svg>
  182.                         {{ 'job.dashboard.allCities'|trans }}
  183.                     </a>
  184.                 </div>
  185.             {% endif %}
  186.         </div>
  188.         {# ═══ Widget recherche ═══ #}
  189.         <div class="wr-search-widget">
  190.             <div class="wr-search-input-wrap">
  191.                 <span class="wr-search-icon">
  192.                     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
  193.                 </span>
  194.                 <input type="text" id="dashSearchInput" class="wr-search-input"
  195.                        placeholder="{% if currentCityFilter is defined and currentCityFilter is not null %}{{ 'job.dashboard.searchInCity'|trans({'%city%': currentCityFilter.label}) }}{% else %}{{ 'job.show.searchPlaceholder'|trans }}{% endif %}"
  196.                        value="{{ initialQuery|default('') }}"
  197.                        autocomplete="off">
  198.                 <span class="wr-search-kbd-hint" id="dashSearchKbdHint">{{ 'job.dashboard.pressEnter'|trans }}</span>
  199.                 <button type="button" id="dashSearchClear" class="wr-search-clear" aria-label="Clear">
  200.                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
  201.                 </button>
  202.             </div>
  203.         </div>
  205.         {# Chips keywords cliquables #}
  206.         {% if searchKeywords is defined and searchKeywords|length > 0 %}
  207.             <div class="search-keywords">
  208.                 <span class="search-keywords-label">{{ 'job.show.keywordsLabel'|trans }}</span>
  209.                 {% for kw in searchKeywords %}
  210.                     {# Slug pour l'URL : translitération des accents FR + lowercase + remplacement caractères spéciaux #}
  211.                     {% set kwSlug = kw.label
  212.                         |replace({
  213.                         'à':'a','â':'a','ä':'a','á':'a','ã':'a','å':'a',
  214.                         'À':'a','Â':'a','Ä':'a','Á':'a','Ã':'a','Å':'a',
  215.                         'é':'e','è':'e','ê':'e','ë':'e','ẽ':'e',
  216.                         'É':'e','È':'e','Ê':'e','Ë':'e',
  217.                         'î':'i','ï':'i','ì':'i','í':'i',
  218.                         'Î':'i','Ï':'i','Ì':'i','Í':'i',
  219.                         'ô':'o','ö':'o','ò':'o','ó':'o','õ':'o','ø':'o',
  220.                         'Ô':'o','Ö':'o','Ò':'o','Ó':'o','Õ':'o','Ø':'o',
  221.                         'û':'u','ü':'u','ù':'u','ú':'u',
  222.                         'Û':'u','Ü':'u','Ù':'u','Ú':'u',
  223.                         'ÿ':'y','ý':'y','Ÿ':'y','Ý':'y',
  224.                         'ç':'c','Ç':'c',
  225.                         'ñ':'n','Ñ':'n',
  226.                         'œ':'oe','Œ':'oe','æ':'ae','Æ':'ae',
  227.                         "'":'-',' ':'-','/':'-','_':'-','.':'-',',':'-',
  228.                         '(':'','*':'',')':'','&':'-and-','+':'-plus-',
  229.                         '#':'','?':'','!':'','"':'','’':'-','`':'-'
  230.                     })
  231.                         |lower
  232.                         |replace({'--':'-','---':'-'})
  233.                         |trim('-') %}
  235.                     {% if currentCityFilter is defined and currentCityFilter is not null %}
  236.                         {# Contexte ville : chip = lien vers /jobs/ville/keyword #}
  237.                         <a href="{% if app.request.locale == 'en' %}{{ path('cvs_application_jobs_filter_keyword',{'slug':currentCityFilter.slug,'keyword':kwSlug}) }}{% else %}{{ path('locale_cvs_application_jobs_filter_keyword',{'_locale':app.request.locale,'slug':currentCityFilter.slug,'keyword':kwSlug}) }}{% endif %}"
  238.                            class="search-keyword-chip{% if currentSubKeywordSlug is defined and currentSubKeywordSlug == kwSlug %} active{% endif %}">
  239.                             {% if kw.icon is not empty %}<span class="search-keyword-chip-icon">{{ kw.icon }}</span>{% endif %}
  240.                             <span>{{ kw.label }}</span>
  241.                         </a>
  242.                     {% else %}
  243.                         {# Pas de contexte ville : chip pré-remplit la search (comportement existant) #}
  244.                         <button type="button"
  245.                                 class="search-keyword-chip"
  246.                                 data-keyword="{{ kw.searchKeyword|default(kw.label) }}">
  247.                             {% if kw.icon is not empty %}<span class="search-keyword-chip-icon">{{ kw.icon }}</span>{% endif %}
  248.                             <span>{{ kw.label }}</span>
  249.                         </button>
  250.                     {% endif %}
  251.                 {% endfor %}
  252.             </div>
  253.         {% endif %}
  255.         {# ═══ Filtres SEO : Villes (chips → /jobs/{slug}) — 14 visibles + reste cliqué pour révéler ═══ #}
  256.         {% if sidebarFiltersCities is defined and sidebarFiltersCities|length > 0 %}
  257.             {% set citiesInitial = 14 %}
  258.             <div class="filter-section" id="filterSectionCities">
  259.                 <div class="filter-section-head">
  260.                     <h3 class="filter-section-title">
  261.                         <span class="filter-section-title-icon">
  262.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
  263.                         </span>
  264.                         {{ 'job.dashboard.popularCities'|trans }}
  265.                     </h3>
  266.                     {# Input de recherche (visible uniquement quand expanded) #}
  267.                     {% if sidebarFiltersCities|length > citiesInitial %}
  268.                         <div class="dash-filter-search">
  269.                             <span class="dash-filter-search-icon">
  270.                                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
  271.                             </span>
  272.                             <input type="text"
  273.                                    class="dash-filter-search-input"
  274.                                    data-search-target="filterChipsCities"
  275.                                    placeholder="{{ 'job.dashboard.filterSearchCity'|trans }}"
  276.                                    autocomplete="off">
  277.                         </div>
  278.                     {% endif %}
  279.                 </div>
  280.                 <div class="filter-chips dash-filter-chips" id="filterChipsCities" data-initial="{{ citiesInitial }}">
  281.                     {% for f in sidebarFiltersCities %}
  282.                         <a href="{% if app.request.locale == 'en' %}{{ path('cvs_application_jobs_filter',{'slug':f.slug}) }}{% else %}{{ path('locale_cvs_application_jobs_filter',{'_locale':app.request.locale,'slug':f.slug}) }}{% endif %}"
  283.                            class="filter-chip dash-filter-item{% if currentFilter is defined and currentFilter is not null and currentFilter.slug == f.slug %} active{% endif %}"
  284.                            data-filter-slug="{{ f.slug }}"
  285.                            data-filter-label="{{ f.label }}"
  286.                            data-index="{{ loop.index0 }}"{% if loop.index0 >= citiesInitial %} style="display:none"{% endif %}>
  287.                             {% if f.icon is not empty %}<span class="filter-chip-icon">{{ f.icon }}</span>{% endif %}
  288.                             <span>{{ f.label }}</span>
  289.                             <span class="filter-chip-arrow">
  290.                                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
  291.                             </span>
  292.                         </a>
  293.                     {% endfor %}
  294.                     <div class="dash-filter-empty">{{ 'job.dashboard.filterNoResults'|trans }}</div>
  295.                 </div>
  296.                 {% if sidebarFiltersCities|length > citiesInitial %}
  297.                     <div class="dash-filter-more-wrap">
  298.                         <button type="button" class="dash-filter-more-btn" data-target="filterChipsCities" data-section="filterSectionCities">
  299.                             <span class="dash-filter-more-icon">
  300.                                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
  301.                             </span>
  302.                             <span class="dash-filter-more-label" data-more="{{ 'job.dashboard.showMoreCities'|trans({'%n%': sidebarFiltersCities|length - citiesInitial}) }}" data-less="{{ 'job.dashboard.showLessCities'|trans }}">{{ 'job.dashboard.showMoreCities'|trans({'%n%': sidebarFiltersCities|length - citiesInitial}) }}</span>
  303.                         </button>
  304.                     </div>
  305.                 {% endif %}
  306.             </div>
  307.         {% endif %}
  309.         {# ═══ Filtres SEO : Métiers (chips → /jobs/{slug}) — 8 visibles + reste cliqué pour révéler ═══ #}
  310.         {% if sidebarFiltersCategories is defined and sidebarFiltersCategories|length > 0 %}
  311.             {% set categoriesInitial = 8 %}
  312.             <div class="filter-section" id="filterSectionCategories">
  313.                 <div class="filter-section-head">
  314.                     <h3 class="filter-section-title">
  315.                         <span class="filter-section-title-icon">
  316.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a4 4 0 00-8 0v2"/></svg>
  317.                         </span>
  318.                         {{ 'job.dashboard.popularCategories'|trans }}
  319.                     </h3>
  320.                     {# Input de recherche (visible uniquement quand expanded) #}
  321.                     {% if sidebarFiltersCategories|length > categoriesInitial %}
  322.                         <div class="dash-filter-search">
  323.                             <span class="dash-filter-search-icon">
  324.                                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
  325.                             </span>
  326.                             <input type="text"
  327.                                    class="dash-filter-search-input"
  328.                                    data-search-target="filterChipsCategories"
  329.                                    placeholder="{{ 'job.dashboard.filterSearchCategory'|trans }}"
  330.                                    autocomplete="off">
  331.                         </div>
  332.                     {% endif %}
  333.                 </div>
  334.                 <div class="filter-chips dash-filter-chips" id="filterChipsCategories" data-initial="{{ categoriesInitial }}">
  335.                     {% for f in sidebarFiltersCategories %}
  336.                         <a href="{% if app.request.locale == 'en' %}{{ path('cvs_application_jobs_filter',{'slug':f.slug}) }}{% else %}{{ path('locale_cvs_application_jobs_filter',{'_locale':app.request.locale,'slug':f.slug}) }}{% endif %}"
  337.                            class="filter-chip dash-filter-item{% if currentFilter is defined and currentFilter is not null and currentFilter.slug == f.slug %} active{% endif %}"
  338.                            data-filter-slug="{{ f.slug }}"
  339.                            data-filter-label="{{ f.label }}"
  340.                            data-index="{{ loop.index0 }}"{% if loop.index0 >= categoriesInitial %} style="display:none"{% endif %}>
  341.                             {% if f.icon is not empty %}<span class="filter-chip-icon">{{ f.icon }}</span>{% endif %}
  342.                             <span>{{ f.label }}</span>
  343.                             <span class="filter-chip-arrow">
  344.                                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
  345.                             </span>
  346.                         </a>
  347.                     {% endfor %}
  348.                     <div class="dash-filter-empty">{{ 'job.dashboard.filterNoResults'|trans }}</div>
  349.                 </div>
  350.                 {% if sidebarFiltersCategories|length > categoriesInitial %}
  351.                     <div class="dash-filter-more-wrap">
  352.                         <button type="button" class="dash-filter-more-btn" data-target="filterChipsCategories" data-section="filterSectionCategories">
  353.                             <span class="dash-filter-more-icon">
  354.                                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
  355.                             </span>
  356.                             <span class="dash-filter-more-label" data-more="{{ 'job.dashboard.showMoreCategories'|trans({'%n%': sidebarFiltersCategories|length - categoriesInitial}) }}" data-less="{{ 'job.dashboard.showLessCategories'|trans }}">{{ 'job.dashboard.showMoreCategories'|trans({'%n%': sidebarFiltersCategories|length - categoriesInitial}) }}</span>
  357.                         </button>
  358.                     </div>
  359.                 {% endif %}
  360.             </div>
  361.         {% endif %}
  363.         {# Bandeau d'info (compteur de résultats) #}
  364.         <div class="jobs-results-info" id="jobsResultsInfo">
  365.             <span id="jobsResultsCount">{{ 'job.dashboard.loading'|trans }}</span>
  366.         </div>
  368.         {# Liste des offres (peuplée en JS) #}
  369.         <div class="jobs-list" id="jobsList">
  370.             <div class="jobs-skeleton">
  371.                 {% for i in 1..5 %}
  372.                     <div class="jobs-skel-card">
  373.                         <div class="jobs-skel-logo"></div>
  374.                         <div class="jobs-skel-info">
  375.                             <div class="jobs-skel-line s1"></div>
  376.                             <div class="jobs-skel-line s2"></div>
  377.                         </div>
  378.                     </div>
  379.                 {% endfor %}
  380.             </div>
  381.         </div>
  383.         {# Bouton "Charger plus" #}
  384.         <button type="button" class="jobs-load-more" id="jobsLoadMore" style="display:none;">
  385.             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
  386.             <span id="jobsLoadMoreLabel">{{ 'job.dashboard.loadMore'|trans }}</span>
  387.         </button>
  389.         {# Template HTML invisible cloné par le JS pour intercaler la promo card.
  390.            Affiché uniquement aux utilisateurs non connectés via la logique JS.
  391.            Les textes/bullets viennent automatiquement des clés job.show.promo* du YAML. #}
  392.         {% if app.user is null %}
  393.             {{ promo.card_template({
  394.                 template_id: 'jobs-promo-card-template',
  395.                 login_url: app.request.locale == 'en'
  396.                 ? path('cvs_gestion_candidates_dashboard')
  397.                 : path('locale_cvs_gestion_candidates_dashboard',{'_locale':app.request.locale})
  398.             }) }}
  399.         {% endif %}
  401.     </div>
  402. {% endblock body %}
  404. {% block footerjs %}
  405.     <script>
  406.         (function(){
  407.             'use strict';
  408.             try {
  410.                 var LOCALE = '{{ app.request.locale }}';
  411.                 var IS_AUTHENTICATED = {{ app.user ? 'true' : 'false' }};
  413.                 var SEARCH_API_URL = '{{ app.request.locale == "en" ? path("cvs_application_jobs_api_search") : path("locale_cvs_application_jobs_api_search",{"_locale":app.request.locale}) }}';
  414.                 var JOB_SHOW_URL_TEMPLATE = '{{ app.request.locale == "en" ? path("cvs_application_jobs_api_search",{"slug":"__SLUG__"}) : path("locale_cvs_application_job_show",{"_locale":app.request.locale,"slug":"__SLUG__"}) }}';
  416.                 var PAGE_SIZE = 10;
  417.                 var currentQuery = {{ initialQuery|default('')|json_encode|raw }};
  418.                 var currentOffset = 0;
  419.                 var currentTotal = 0;
  420.                 var isFetching = false;
  422.                 // Contexte ville (vient du serveur si on est sur /jobs/paris/... sinon vide)
  423.                 var CITY_KEYWORD = {{ currentCityKeyword|default('')|json_encode|raw }};
  425.                 // Slug ville pour générer les URLs de redirection au submit
  426.                 var CITY_SLUG = {{ currentCityFilter is defined and currentCityFilter is not null ? currentCityFilter.slug|json_encode|raw : 'null' }};
  428.                 // URL pour le dashboard global (sans ville)
  429.                 var DASHBOARD_URL = '{{ app.request.locale == "en" ? path("whileresume_jobs_list") : path("locale_whileresume_jobs_list",{"_locale":app.request.locale}) }}';
  431.                 // Templates URL pour /jobs/{citySlug} et /jobs/{citySlug}/{keyword}
  432.                 var CITY_LANDING_URL_TEMPLATE = {{ currentCityFilter is defined and currentCityFilter is not null
  433.                 ? (app.request.locale == 'en'
  434.                 ? path('cvs_application_jobs_filter',{'slug':currentCityFilter.slug})
  435.                 : path('locale_cvs_application_jobs_filter',{'_locale':app.request.locale,'slug':currentCityFilter.slug}))|json_encode|raw
  436.                 : 'null' }};
  437.                 var CITY_KEYWORD_URL_TEMPLATE = {{ currentCityFilter is defined and currentCityFilter is not null
  438.                 ? (app.request.locale == 'en'
  439.                 ? path('cvs_application_jobs_filter_keyword',{'slug':currentCityFilter.slug,'keyword':'kwplaceholder'})
  440.                 : path('locale_cvs_application_jobs_filter_keyword',{'_locale':app.request.locale,'slug':currentCityFilter.slug,'keyword':'kwplaceholder'}))|json_encode|raw
  441.                 : 'null' }};
  443.                 // Liste des keywords BDD avec leur slug (pour le matching côté client au submit)
  444.                 var KEYWORDS_DATA = [
  445.                     {% for kw in searchKeywords|default([]) %}
  446.                     {% set kwSlugForJs = kw.label
  447.                         |replace({
  448.                         'à':'a','â':'a','ä':'a','á':'a','ã':'a','å':'a',
  449.                         'À':'a','Â':'a','Ä':'a','Á':'a','Ã':'a','Å':'a',
  450.                         'é':'e','è':'e','ê':'e','ë':'e','ẽ':'e',
  451.                         'É':'e','È':'e','Ê':'e','Ë':'e',
  452.                         'î':'i','ï':'i','ì':'i','í':'i',
  453.                         'Î':'i','Ï':'i','Ì':'i','Í':'i',
  454.                         'ô':'o','ö':'o','ò':'o','ó':'o','õ':'o','ø':'o',
  455.                         'Ô':'o','Ö':'o','Ò':'o','Ó':'o','Õ':'o','Ø':'o',
  456.                         'û':'u','ü':'u','ù':'u','ú':'u',
  457.                         'Û':'u','Ü':'u','Ù':'u','Ú':'u',
  458.                         'ÿ':'y','ý':'y','Ÿ':'y','Ý':'y',
  459.                         'ç':'c','Ç':'c','ñ':'n','Ñ':'n',
  460.                         'œ':'oe','Œ':'oe','æ':'ae','Æ':'ae',
  461.                         "'":'-',' ':'-','/':'-','_':'-','.':'-',',':'-',
  462.                         '(':'','*':'',')':'','&':'-and-','+':'-plus-',
  463.                         '#':'','?':'','!':'','"':'','’':'-','`':'-'
  464.                     })
  465.                         |lower
  466.                         |replace({'--':'-','---':'-'})
  467.                         |trim('-') %}
  468.                     { label: {{ kw.label|json_encode|raw }}, searchKeyword: {{ (kw.searchKeyword ?: kw.label)|json_encode|raw }}, slug: {{ kwSlugForJs|json_encode|raw }} }{% if not loop.last %},{% endif %}
  469.                     {% endfor %}
  470.                 ];
  472.                 var input = document.getElementById('dashSearchInput');
  473.                 var clearBtn = document.getElementById('dashSearchClear');
  474.                 var listEl = document.getElementById('jobsList');
  475.                 var infoEl = document.getElementById('jobsResultsCount');
  476.                 var loadMoreBtn = document.getElementById('jobsLoadMore');
  477.                 var loadMoreLabel = document.getElementById('jobsLoadMoreLabel');
  479.                 function escapeHtml(s){
  480.                     if(s == null) return '';
  481.                     return String(s).replace(/[&<>"']/g, function(c){
  482.                         return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];
  483.                     });
  484.                 }
  486.                 function buildJobCard(item){
  487.                     // Fallback logo : icône "immeuble" stylisée si pas de logo entreprise
  488.                     var fallbackLogo =
  489.                         '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
  490.                         '<path d="M3 21h18"/>' +
  491.                         '<path d="M5 21V7l8-4v18"/>' +
  492.                         '<path d="M19 21V11l-6-4"/>' +
  493.                         '<path d="M9 9h.01"/>' +
  494.                         '<path d="M9 13h.01"/>' +
  495.                         '<path d="M9 17h.01"/>' +
  496.                         '</svg>';
  497.                     var logoHtml = item.logo
  498.                         ? '<img src="' + escapeHtml(item.logo) + '" alt="" onerror="this.parentNode.innerHTML=\'' + fallbackLogo.replace(/'/g, "\\'") + '\';">'
  499.                         : fallbackLogo;
  500.                     var meta = [];
  501.                     if(item.companyName) meta.push(escapeHtml(item.companyName));
  502.                     if(item.city) meta.push(escapeHtml(item.city));
  503.                     if(item.employmentType) meta.push(escapeHtml(item.employmentType));
  505.                     var salaryHtml = (item.salaryMin && item.salaryMax)
  506.                         ? '<span class="jobs-card-salary">' + item.salaryMin + '–' + item.salaryMax + ' ' + escapeHtml(item.devise || '') + '</span>'
  507.                         : '';
  509.                     var url = item.url || JOB_SHOW_URL_TEMPLATE.replace('__SLUG__', encodeURIComponent(item.slug));
  511.                     var a = document.createElement('a');
  512.                     a.href = url;
  513.                     a.className = 'jobs-card';
  514.                     a.innerHTML =
  515.                         '<div class="jobs-card-logo">' + logoHtml + '</div>' +
  516.                         '<div class="jobs-card-info">' +
  517.                         '<div class="jobs-card-title">' + escapeHtml(item.title || '') + '</div>' +
  518.                         '<div class="jobs-card-meta">' + meta.join(' · ') + '</div>' +
  519.                         '</div>' +
  520.                         salaryHtml +
  521.                         '<span class="jobs-card-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg></span>';
  522.                     return a;
  523.                 }
  525.                 /**
  526.                  * Clone la promo card depuis le <template> rendu par la macro Twig.
  527.                  * Le HTML est défini une seule fois dans _macros/promo_card.html.twig.
  528.                  * Retourne null si le template n'est pas présent (ex: user connecté).
  529.                  */
  530.                 function buildPromoCard(){
  531.                     var tpl = document.getElementById('jobs-promo-card-template');
  532.                     if(!tpl || !tpl.content) return null;
  533.                     var node = tpl.content.firstElementChild;
  534.                     return node ? node.cloneNode(true) : null;
  535.                 }
  537.                 function renderEmpty(){
  538.                     listEl.innerHTML =
  539.                         '<div class="jobs-empty">' +
  540.                         '<div class="jobs-empty-icon">' +
  541.                         '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>' +
  542.                         '</div>' +
  543.                         '<div class="jobs-empty-title">{{ 'job.dashboard.emptyTitle'|trans|escape('js') }}</div>' +
  544.                         '<div class="jobs-empty-text">{{ 'job.dashboard.emptyText'|trans|escape('js') }}</div>' +
  545.                         '</div>';
  546.                 }
  548.                 function setLoadMoreState(state){
  549.                     if(!loadMoreBtn) return;
  550.                     if(state === 'loading'){
  551.                         loadMoreBtn.classList.add('loading');
  552.                         loadMoreBtn.disabled = true;
  553.                         loadMoreLabel.innerHTML = '<span class="jobs-load-spinner"></span> {{ 'job.dashboard.loadingMore'|trans|escape('js') }}';
  554.                     } else {
  555.                         loadMoreBtn.classList.remove('loading');
  556.                         loadMoreBtn.disabled = false;
  557.                         loadMoreLabel.textContent = '{{ 'job.dashboard.loadMore'|trans|escape('js') }}';
  558.                     }
  559.                 }
  561.                 function fetchJobs(query, offset, append){
  562.                     if(isFetching) return;
  563.                     isFetching = true;
  565.                     if(!append){
  566.                         // Nouvelle recherche : on remet à zéro et affiche skeleton
  567.                         listEl.innerHTML =
  568.                             '<div class="jobs-skeleton">' +
  569.                             Array(5).fill(0).map(function(){
  570.                                 return '<div class="jobs-skel-card"><div class="jobs-skel-logo"></div><div class="jobs-skel-info"><div class="jobs-skel-line s1"></div><div class="jobs-skel-line s2"></div></div></div>';
  571.                             }).join('') +
  572.                             '</div>';
  573.                         if(infoEl) infoEl.textContent = '{{ 'job.dashboard.loading'|trans|escape('js') }}';
  574.                         if(loadMoreBtn) loadMoreBtn.style.display = 'none';
  575.                     } else {
  576.                         setLoadMoreState('loading');
  577.                     }
  579.                     var url = SEARCH_API_URL + '?q=' + encodeURIComponent(query || '') + '&locale=' + LOCALE + '&limit=' + PAGE_SIZE + '&offset=' + offset;
  580.                     if(CITY_KEYWORD){ url += '&city=' + encodeURIComponent(CITY_KEYWORD); }
  581.                     // Dashboard sans filtre : on demande explicitement les dernières offres
  582.                     if(!query && !CITY_KEYWORD){ url += '&all=1'; }
  583.                     fetch(url, {headers:{'Accept':'application/json'}})
  584.                         .then(function(r){ return r.ok ? r.json() : null; })
  585.                         .then(function(data){
  586.                             isFetching = false;
  587.                             if(!data){
  588.                                 if(!append) renderEmpty();
  589.                                 setLoadMoreState('idle');
  590.                                 return;
  591.                             }
  593.                             var items = data.items || [];
  594.                             currentTotal = data.total || 0;
  596.                             if(!append){
  597.                                 listEl.innerHTML = '';
  598.                                 if(items.length === 0){
  599.                                     renderEmpty();
  600.                                     if(infoEl) infoEl.innerHTML = '<strong>0</strong> {{ 'job.dashboard.resultsCount'|trans|escape('js') }}';
  601.                                     if(loadMoreBtn) loadMoreBtn.style.display = 'none';
  602.                                     return;
  603.                                 }
  604.                             }
  606.                             // Insérer la promo card après la 5ème offre (uniquement au 1er chargement,
  607.                             // si user non connecté et qu'on a au moins 5 offres)
  608.                             var insertPromoAt = (!append && !IS_AUTHENTICATED && items.length >= 5) ? 5 : -1;
  610.                             items.forEach(function(item, idx){
  611.                                 listEl.appendChild(buildJobCard(item));
  612.                                 if(idx === insertPromoAt - 1){
  613.                                     var promoNode = buildPromoCard();
  614.                                     if(promoNode) listEl.appendChild(promoNode);
  615.                                 }
  616.                             });
  618.                             currentOffset = offset + items.length;
  620.                             if(infoEl){
  621.                                 infoEl.innerHTML = '<strong>' + currentTotal + '</strong> {{ 'job.dashboard.resultsCount'|trans|escape('js') }}';
  622.                             }
  624.                             // Afficher / cacher "Charger plus"
  625.                             if(loadMoreBtn){
  626.                                 if(currentOffset < currentTotal){
  627.                                     loadMoreBtn.style.display = 'flex';
  628.                                 } else {
  629.                                     loadMoreBtn.style.display = 'none';
  630.                                 }
  631.                                 setLoadMoreState('idle');
  632.                             }
  633.                         })
  634.                         .catch(function(err){
  635.                             isFetching = false;
  636.                             console.error('[whr-dash] fetch error', err);
  637.                             setLoadMoreState('idle');
  638.                         });
  639.                 }
  641.                 /**
  642.                  * Slugifie un texte côté client. DOIT produire EXACTEMENT le même slug
  643.                  * que la méthode PHP slugify() du JobsController et que le filtre Twig
  644.                  * utilisé pour rendre les chips.
  645.                  */
  646.                 function slugify(text){
  647.                     if(!text) return '';
  648.                     var t = String(text);
  649.                     // Pré-remplacements sémantiques
  650.                     t = t.replace(/&/g, '-and-').replace(/\+/g, '-plus-')
  651.                         .replace(/[œŒ]/g, 'oe').replace(/[æÆ]/g, 'ae');
  652.                     // Translitération accents → ASCII via NFD + strip diacritics
  653.                     t = t.normalize ? t.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : t;
  654.                     t = t.toLowerCase();
  655.                     // Tout ce qui n'est pas a-z 0-9 → tiret
  656.                     t = t.replace(/[^a-z0-9]+/g, '-');
  657.                     return t.replace(/^-+|-+$/g, '');
  658.                 }
  660.                 /**
  661.                  * Tente de matcher un texte tapé avec un keyword en BDD (par slug ou label).
  662.                  * Retourne l'objet keyword si trouvé, null sinon.
  663.                  */
  664.                 function findMatchingKeyword(text){
  665.                     if(!text || !KEYWORDS_DATA || !KEYWORDS_DATA.length) return null;
  666.                     var slug = slugify(text);
  667.                     if(!slug) return null;
  668.                     for(var i = 0; i < KEYWORDS_DATA.length; i++){
  669.                         var kw = KEYWORDS_DATA[i];
  670.                         // Match sur slug exact OU label/searchKeyword exact (case insensitive)
  671.                         if(kw.slug === slug) return kw;
  672.                         if(slugify(kw.searchKeyword) === slug) return kw;
  673.                     }
  674.                     return null;
  675.                 }
  677.                 /**
  678.                  * Au submit : décide où rediriger l'utilisateur en fonction du contexte.
  679.                  *  - Si on est sur une ville et le texte matche un keyword BDD → /jobs/{ville}/{slug-kw}
  680.                  *  - Sinon si on est sur une ville → /jobs/{ville}?search={texte}
  681.                  *  - Sinon (pas de ville) → /jobs?q={texte}
  682.                  *  - Si texte vide ET ville définie → /jobs/{ville} (reset)
  683.                  *  - Si texte vide ET pas de ville → /jobs (reset)
  684.                  */
  685.                 function submitSearch(query){
  686.                     query = (query || '').trim();
  688.                     // Reset (recherche vide)
  689.                     if(!query){
  690.                         if(CITY_SLUG && CITY_LANDING_URL_TEMPLATE){
  691.                             window.location.href = CITY_LANDING_URL_TEMPLATE;
  692.                         } else {
  693.                             window.location.href = DASHBOARD_URL;
  694.                         }
  695.                         return;
  696.                     }
  698.                     // Cas 1 : on est sur une ville
  699.                     if(CITY_SLUG && CITY_KEYWORD_URL_TEMPLATE){
  700.                         var matched = findMatchingKeyword(query);
  701.                         if(matched && matched.slug){
  702.                             // Match BDD → URL slug propre /jobs/paris/developpeur
  703.                             window.location.href = CITY_KEYWORD_URL_TEMPLATE.replace('kwplaceholder', encodeURIComponent(matched.slug));
  704.                             return;
  705.                         }
  706.                         // Pas de match → fallback ?search=texte
  707.                         window.location.href = CITY_LANDING_URL_TEMPLATE + '?search=' + encodeURIComponent(query);
  708.                         return;
  709.                     }
  711.                     // Cas 2 : pas de ville → dashboard global avec ?q=
  712.                     window.location.href = DASHBOARD_URL + '?q=' + encodeURIComponent(query);
  713.                 }
  715.                 /**
  716.                  * Lance la search côté UI (sans redirection — utilisée pour les chips et
  717.                  * pour la "Charger plus").
  718.                  */
  719.                 function startSearch(query){
  720.                     currentQuery = query;
  721.                     currentOffset = 0;
  722.                     currentTotal = 0;
  723.                     fetchJobs(query, 0, false);
  724.                     // Update clear button
  725.                     if(clearBtn){
  726.                         if(query) clearBtn.classList.add('visible');
  727.                         else clearBtn.classList.remove('visible');
  728.                     }
  729.                     // Update active chip (uniquement les chips qui sont des <button>, pas les <a>)
  730.                     document.querySelectorAll('button.search-keyword-chip').forEach(function(c){
  731.                         if(c.getAttribute('data-keyword') === query) c.classList.add('active');
  732.                         else c.classList.remove('active');
  733.                     });
  734.                 }
  736.                 // ═══ Submit-only : Entrée déclenche la search ET change l'URL ═══
  737.                 if(input){
  738.                     input.addEventListener('keydown', function(e){
  739.                         if(e.key === 'Enter' || e.keyCode === 13){
  740.                             e.preventDefault();
  741.                             submitSearch(input.value);
  742.                         }
  743.                     });
  744.                     // Affiche bouton clear si query initiale
  745.                     if(input.value.trim()){
  746.                         if(clearBtn) clearBtn.classList.add('visible');
  747.                     }
  748.                 }
  750.                 // Bouton clear : reset complet → redirection vers /jobs ou /jobs/{ville}
  751.                 if(clearBtn){
  752.                     clearBtn.addEventListener('click', function(){
  753.                         submitSearch('');
  754.                     });
  755.                 }
  757.                 // Chips keywords (cas dashboard global, sans contexte ville → comportement local)
  758.                 // En contexte ville, les chips sont des <a href> directs gérés par le navigateur.
  759.                 document.querySelectorAll('button.search-keyword-chip').forEach(function(chip){
  760.                     chip.addEventListener('click', function(){
  761.                         var kw = chip.getAttribute('data-keyword');
  762.                         if(!kw) return;
  763.                         // Sur dashboard global : on submit (redirige vers /jobs?q=kw)
  764.                         submitSearch(kw);
  765.                     });
  766.                 });
  768.                 // Bouton "Charger plus"
  769.                 if(loadMoreBtn){
  770.                     loadMoreBtn.addEventListener('click', function(){
  771.                         if(isFetching) return;
  772.                         fetchJobs(currentQuery, currentOffset, true);
  773.                     });
  774.                 }
  776.                 // ═══ Bouton "Voir plus" + Recherche live des chips ═══
  777.                 /**
  778.                  * Slugify simple côté UI pour matching tolérant aux accents
  779.                  * (ex: "developpeur" matche "Développeur")
  780.                  */
  781.                 function dashSlug(str){
  782.                     if(!str) return '';
  783.                     var t = String(str);
  784.                     t = t.normalize ? t.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : t;
  785.                     return t.toLowerCase().trim();
  786.                 }
  788.                 document.querySelectorAll('.dash-filter-more-btn').forEach(function(btn){
  789.                     var targetId = btn.getAttribute('data-target');
  790.                     var sectionId = btn.getAttribute('data-section');
  791.                     var container = document.getElementById(targetId);
  792.                     var section = sectionId ? document.getElementById(sectionId) : null;
  793.                     if(!container) return;
  794.                     var label = btn.querySelector('.dash-filter-more-label');
  795.                     if(!label) return;
  797.                     var initial = parseInt(container.getAttribute('data-initial'), 10) || 14;
  798.                     var items = container.querySelectorAll('.dash-filter-item');
  799.                     var searchInput = section ? section.querySelector('.dash-filter-search-input') : null;
  801.                     // 2 états indépendants :
  802.                     //  - userExpanded : l'utilisateur a cliqué sur "Voir plus"
  803.                     //  - searchActive : l'input contient du texte (auto-expand temporaire)
  804.                     // Mode développé = userExpanded || searchActive
  805.                     var userExpanded = false;
  807.                     function isEffectivelyExpanded(){
  808.                         var hasSearch = searchInput && searchInput.value.trim().length > 0;
  809.                         return userExpanded || hasSearch;
  810.                     }
  812.                     function applyDisplay(){
  813.                         var filterText = searchInput ? searchInput.value : '';
  814.                         var query = dashSlug(filterText || '');
  815.                         var expanded = isEffectivelyExpanded();
  816.                         var visibleCount = 0;
  818.                         items.forEach(function(it, i){
  819.                             var label = it.getAttribute('data-filter-label') || '';
  820.                             var matches = !query || dashSlug(label).indexOf(query) !== -1;
  822.                             if(expanded){
  823.                                 // Mode développé : on affiche tous les items qui matchent la recherche
  824.                                 it.style.display = matches ? '' : 'none';
  825.                                 if(matches) visibleCount++;
  826.                             } else {
  827.                                 // Mode collapsé : on affiche les N premiers (pas de filtrage)
  828.                                 it.style.display = (i < initial) ? '' : 'none';
  829.                                 if(i < initial) visibleCount++;
  830.                             }
  831.                         });
  833.                         // Toggle "aucun résultat" (uniquement quand recherche active)
  834.                         if(query && visibleCount === 0){
  835.                             container.classList.add('is-no-results');
  836.                         } else {
  837.                             container.classList.remove('is-no-results');
  838.                         }
  840.                         // Synchroniser le bouton "Voir plus/moins" avec l'état effectif
  841.                         if(expanded){
  842.                             btn.classList.add('is-expanded');
  843.                             label.textContent = label.getAttribute('data-less');
  844.                         } else {
  845.                             btn.classList.remove('is-expanded');
  846.                             label.textContent = label.getAttribute('data-more');
  847.                         }
  848.                     }
  850.                     btn.addEventListener('click', function(){
  851.                         userExpanded = !userExpanded;
  852.                         if(!userExpanded){
  853.                             // Reset input quand l'utilisateur collapse manuellement
  854.                             if(searchInput){ searchInput.value = ''; }
  855.                             // Scroll vers le bouton
  856.                             btn.scrollIntoView({behavior:'smooth', block:'nearest'});
  857.                         }
  858.                         applyDisplay();
  859.                     });
  861.                     // Recherche live dans les chips quand on tape dans l'input
  862.                     // → auto-expand pendant la recherche, retour à l'état userExpanded quand on vide
  863.                     if(searchInput){
  864.                         searchInput.addEventListener('input', function(){
  865.                             applyDisplay();
  866.                         });
  867.                     }
  868.                 });
  870.                 // Premier chargement (vide ou avec query initiale)
  871.                 fetchJobs(currentQuery, 0, false);
  873.             } catch(err){
  874.                 console.error('[whr-dash] init error', err);
  875.             }
  876.         })();
  877.     </script>
  878. {% endblock footerjs %}