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

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