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

Open in your IDE?
  1. {% extends 'vitrine/lexend/layout.html.twig' %}
  3. {% block title %}{{ job.shortTitle }}{% endblock title %}
  4. {% block description %}{{ job.shortDescription }}{% endblock description %}
  5. {% block robots %}index,follow{% endblock robots %}
  7. {#% block meta_social %}{{ parent() }}{% include "/vitrine/components/socialmedia.html.twig" with { 'page':page,'social_type':'website' } %}{% endblock meta_social %}
  8. {% block meta %}{{ parent() }}{% include "/vitrine/components/author.html.twig" with {'page':page } %}{% endblock meta %#}
  9. {#% block canonical %}{% include "/vitrine/lexend/components/languages/canonical_classic.html.twig" %}{% endblock canonical %#}
  11. {% block css %}
  12.     <style>
  13.         .wr-search-section{position:relative;z-index:2;width:100%;max-width:720px;margin:0 auto}
  14.         .wr-search-bar{display:flex;align-items:center;background:#fff;border-radius:16px;padding:6px;box-shadow:0 4px 24px rgba(108,58,237,.08),0 1px 3px rgba(0,0,0,.04);border:2px solid transparent;transition:border-color .3s,box-shadow .3s;cursor:pointer}
  15.         .wr-search-bar:hover,.wr-search-bar.active{border-color:rgba(108,58,237,.2);box-shadow:0 8px 32px rgba(108,58,237,.12),0 2px 6px rgba(0,0,0,.04)}
  16.         .wr-search-icon{padding:12px 14px;color:#9CA3AF;display:flex;align-items:center;flex-shrink:0}
  17.         .wr-search-input-wrapper{flex:1;position:relative;height:48px;display:flex;align-items:center;overflow:hidden}
  18.         .wr-search-real-input{width:100%;border:none;outline:none;font-size:16px;color:#1E1B2E;background:transparent;font-family:inherit}
  19.         .wr-search-real-input::placeholder{color:#9CA3AF}
  20.         .wr-search-btn{background:var(--color-primary,#6C3AED);color:#fff;border:none;padding:12px 24px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .2s,transform .15s;flex-shrink:0;font-family:inherit}
  21.         .wr-search-btn:hover{filter:brightness(1.1);transform:scale(1.02)}
  22.         @media(max-width:640px){.wr-search-btn span{display:none}.wr-search-btn{padding:12px 14px}}
  23.         .wr-search-results{position:relative;background:#fff;border-radius:16px;box-shadow:0 12px 48px rgba(0,0,0,.1),0 2px 8px rgba(0,0,0,.04);padding:0;max-height:0;overflow:hidden;transition:max-height .5s ease,padding .5s ease,margin .5s ease,opacity .4s ease;z-index:10;opacity:0;margin-top:0}
  24.         .wr-search-results.visible{max-height:2000px;padding:8px;margin-top:12px;opacity:1}
  25.         .wr-result-item{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:12px;cursor:pointer;transition:background .2s,opacity .3s ease,transform .3s ease;opacity:0;transform:translateY(8px);text-decoration:none;color:inherit}
  26.         .wr-result-item.show{opacity:1;transform:translateY(0)}
  27.         .wr-result-item:hover{background:#F5F3FF}
  28.         .wr-result-item+.wr-result-item{border-top:1px solid rgba(0,0,0,.04)}
  29.         .wr-result-logo{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;font-weight:700}
  30.         .wr-result-logo img{width:100%;height:100%;object-fit:cover;border-radius:10px}
  31.         .wr-result-info{flex:1;text-align:left;min-width:0}
  32.         .wr-result-title{font-size:14px;font-weight:600;color:#1E1B2E;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  33.         .wr-result-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:#9CA3AF;flex-wrap:wrap}
  34.         .wr-result-company{color:#4B5563;font-weight:500}
  35.         .wr-result-badge{display:inline-flex;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600}
  36.         .wr-badge-new{background:#DCFCE7;color:#16A34A}
  37.         .wr-result-salary{font-size:13px;font-weight:600;color:var(--color-primary,#6C3AED);white-space:nowrap}
  38.         .wr-result-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
  39.         .wr-loading{text-align:center;padding:30px 20px}
  40.         .wr-spinner{display:inline-block;width:28px;height:28px;border:3px solid rgba(108,58,237,.15);border-top-color:var(--color-primary,#6C3AED);border-radius:50%;animation:wrSpin .7s linear infinite}
  41.         @keyframes wrSpin{to{transform:rotate(360deg)}}
  42.         .wr-empty-state{text-align:center;padding:40px 20px}
  43.         .wr-empty-icon{font-size:40px;margin-bottom:12px}
  44.         .wr-empty-title{font-size:16px;font-weight:600;color:#1E1B2E;margin:0 0 6px}
  45.         .wr-empty-text{font-size:14px;color:#9CA3AF;margin:0}
  46.         .wr-load-more{display:flex;justify-content:center;padding:12px 8px 4px}
  47.         .wr-load-more-btn{background:none;border:2px solid var(--color-primary,#6C3AED);color:var(--color-primary,#6C3AED);padding:8px 24px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit}
  48.         .wr-load-more-btn:hover{background:var(--color-primary,#6C3AED);color:#fff}
  49.         .wr-load-more-btn:disabled{opacity:.5;cursor:not-allowed}
  50.         .wr-results-count{text-align:center;padding:10px;font-size:13px;color:#9CA3AF;border-top:1px solid rgba(0,0,0,.04);margin-top:4px}
  51.         .wr-results-count strong{color:var(--color-primary,#6C3AED)}
  52.         .wr-search-close-wrap{text-align:right;padding:4px 8px 0}
  53.         .wr-search-close-btn{background:none;border:1px solid rgba(0,0,0,.1);color:#9CA3AF;padding:4px 12px;border-radius:8px;font-size:12px;cursor:pointer;transition:all .2s;font-family:inherit}
  54.         .wr-search-close-btn:hover{background:#F5F3FF;color:var(--color-primary,#6C3AED);border-color:rgba(108,58,237,.2)}
  56.         {# === Job body redesign === #}
  57.         .job-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
  58.         .job-tag{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:100px;font-size:13px;font-weight:500;background:#fff;border:1px solid rgba(0,0,0,.08);color:#4B5563}
  59.         .job-tag i,.job-tag svg{font-size:13px;color:var(--color-primary,#6C3AED);width:14px;height:14px}
  60.         .job-tag-salary{background:linear-gradient(135deg,#EDE9FE,#F5F3FF);border-color:rgba(108,58,237,.15);color:var(--color-primary,#6C3AED);font-weight:600}
  61.         .job-tag-external{background:#FFFBEB;border-color:rgba(245,158,11,.2);color:#92400E;font-size:12px}
  62.         .job-body-card{background:#fff;border-radius:20px;box-shadow:0 4px 32px rgba(0,0,0,.06),0 1px 4px rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.05);padding:32px;max-width:780px;margin:0 auto}
  63.         @media(max-width:640px){.job-body-card{padding:20px;border-radius:16px}}
  64.         .job-section-title{font-size:15px;font-weight:700;color:var(--color-primary,#6C3AED);text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px;display:flex;align-items:center;gap:8px}
  65.         .job-section-title::before{content:'';display:inline-block;width:4px;height:18px;border-radius:2px;background:var(--color-primary,#6C3AED)}
  66.         .job-section-text{font-size:16px;line-height:1.75;color:#374151;margin:0}
  67.         .job-section-divider{border:none;border-top:1px solid rgba(0,0,0,.06);margin:24px 0}
  68.         .job-cta-bar{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:24px 0 0}
  69.         .job-cta-main{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:14px;font-size:16px;font-weight:700;border:none;cursor:pointer;transition:all .2s;text-decoration:none;font-family:inherit}
  70.         .job-cta-main.active{background:var(--color-primary,#6C3AED);color:#fff;box-shadow:0 4px 16px rgba(108,58,237,.25)}
  71.         .job-cta-main.active:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 6px 24px rgba(108,58,237,.3)}
  72.         .job-cta-main.disabled{background:#E5E7EB;color:#9CA3AF;cursor:default;box-shadow:none;pointer-events:none}
  73.         .job-cta-company{display:inline-flex;align-items:center;gap:6px;padding:14px 24px;border-radius:14px;font-size:15px;font-weight:600;border:2px solid rgba(0,0,0,.08);background:#fff;color:#374151;cursor:pointer;transition:all .2s;text-decoration:none;font-family:inherit}
  74.         .job-cta-company:hover{border-color:rgba(108,58,237,.2);color:var(--color-primary,#6C3AED)}
  75.         .job-locked-overlay{position:relative;margin-top:24px}
  76.         .job-locked-blur{filter:blur(6px);opacity:.4;pointer-events:none;user-select:none}
  77.         .job-locked-cta{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(255,255,255,.7);backdrop-filter:blur(3px);border-radius:16px;padding:20px}
  78.         .job-locked-title{font-size:18px;font-weight:700;color:#1E1B2E;text-align:center}
  79.         .job-locked-text{font-size:14px;color:#6B7280;text-align:center;max-width:360px}
  80.         .job-locked-btn{display:inline-flex;align-items:center;gap:6px;padding:12px 28px;background:var(--color-primary,#6C3AED);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none;font-family:inherit}
  81.         .job-locked-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
  82.         .job-locked-login{font-size:13px;color:#6B7280}
  83.         .job-locked-login a{color:var(--color-primary,#6C3AED);font-weight:600;text-decoration:none}
  84.         .job-locked-login a:hover{text-decoration:underline}
  85.     </style>
  86. {% endblock css %}
  88. {% block body %}
  90.     <div id="hero_header" class="hero-header section panel overflow-hidden">
  91.         <div class="position-absolute top-0 start-0 end-0 h-screen dark:bg-gray-300 dark:bg-opacity-15 rounded-bottom-2 lg:rounded-bottom-5"></div>
  92.         <div class="section-outer panel py-8 lg:py-9 xl:py-10">
  93.             <div class="container">
  94.                 <div class="section-inner panel">
  95.                     <div class="d-none xl:d-block">
  96.                         <div class="position-absolute rounded-circle border border-dashed border-primary-300 dark:border-white dark:border-opacity-15 cstack w-56px h-56px d-none lg:d-block" style="top: 5%; left: 5%" data-anime="translateY: [0, 10]; easing: linear; loop: true; direction: alternate; delay: 0;"><img class="p-narrow rounded-circle" src="/uploads/no_avatar.png" alt="Candidat anonyme"></div>
  97.                         <div class="position-absolute rounded-circle border border-dashed border-primary-300 dark:border-white dark:border-opacity-15 cstack w-56px h-56px d-none lg:d-block" style="top: 20%; left: 10%" data-anime="translateY: [0, 15]; easing: linear; loop: true; direction: alternate; delay: 25;"><img class="p-narrow rounded-circle" src="/uploads/no_avatar.png" alt="Candidat anonyme"></div>
  98.                         <div class="position-absolute rounded-circle border border-dashed border-primary-300 dark:border-white dark:border-opacity-15 cstack w-56px h-56px d-none lg:d-block" style="top: 35%; left: 0%" data-anime="translateY: [0, 5]; easing: linear; loop: true; direction: alternate; delay: 25;"><img class="p-narrow rounded-circle" src="/uploads/no_avatar.png" alt="Candidat anonyme"></div>
  99.                         <div class="position-absolute rounded-circle border border-dashed border-primary-300 dark:border-white dark:border-opacity-15 cstack w-56px h-56px d-none lg:d-block" style="top: 5%; right: 5%" data-anime="translateY: [0, 10]; easing: linear; loop: true; direction: alternate; delay: 0;"><img class="p-narrow rounded-circle" src="/uploads/no_avatar.png" alt="Candidat anonyme"></div>
  100.                         <div class="position-absolute rounded-circle border border-dashed border-primary-300 dark:border-white dark:border-opacity-15 cstack w-56px h-56px d-none lg:d-block" style="top: 20%; right: 10%" data-anime="translateY: [0, 15]; easing: linear; loop: true; direction: alternate; delay: 25;"><img class="p-narrow rounded-circle" src="/uploads/no_avatar.png" alt="Candidat anonyme"></div>
  101.                         <div class="position-absolute rounded-circle border border-dashed border-primary-300 dark:border-white dark:border-opacity-15 cstack w-56px h-56px d-none lg:d-block" style="top: 35%; right: 0%" data-anime="translateY: [0, 5]; easing: linear; loop: true; direction: alternate; delay: 25;"><img class="p-narrow rounded-circle" src="/uploads/no_avatar.png" alt="Candidat anonyme"></div>
  102.                     </div>
  103.                     <div class="row child-cols-12 justify-center items-center g-8">
  104.                         <div class="lg:col-12">
  105.                             <div class="panel vstack gap-4 lg:gap-6">
  106.                                 <div class="panel vstack justify-center items-center gap-2 px-2 pt-4 text-center">
  107.                                     <span class="fs-6 fw-bold text-uppercase text-primary">{{ job.companyName }} recherche</span>
  108.                                     <h1 class="h3 md:h2 lg:display-4 m-0">{{ job.jobtitle }}</h1>
  109.                                 </div>
  111.                                 <div class="wr-search-section" id="wrSearchSection">
  112.                                     <div class="wr-search-bar" id="wrSearchBar">
  113.                                         <div class="wr-search-icon">
  114.                                             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
  115.                                         </div>
  116.                                         <div class="wr-search-input-wrapper">
  117.                                             <input type="text" id="wrSearchInput" class="wr-search-real-input" placeholder="Rechercher un poste, une entreprise, une ville..." autocomplete="off">
  118.                                         </div>
  119.                                         <button class="wr-search-btn" id="wrSearchBtn">
  120.                                             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
  121.                                             <span>Rechercher</span>
  122.                                         </button>
  123.                                     </div>
  124.                                 </div>
  126.                                 <div class="wr-search-results" id="wrSearchResults">
  127.                                     <div class="wr-search-close-wrap">
  128.                                         <button class="wr-search-close-btn" id="wrSearchClose">✕ Fermer</button>
  129.                                     </div>
  130.                                     <div id="wrJobsList"></div>
  131.                                     <div id="wrLoading" class="wr-loading" style="display:none;">
  132.                                         <div class="wr-spinner"></div>
  133.                                     </div>
  134.                                     <div id="wrEmptyState" class="wr-empty-state" style="display:none;">
  135.                                         <div class="wr-empty-icon">🔍</div>
  136.                                         <p class="wr-empty-title">Aucune offre ne correspond à votre recherche</p>
  137.                                         <p class="wr-empty-text">Essayez avec d'autres mots-clés</p>
  138.                                     </div>
  139.                                     <div id="wrLoadMore" class="wr-load-more" style="display:none;">
  140.                                         <button class="wr-load-more-btn" id="wrLoadMoreBtn">Voir plus d'offres</button>
  141.                                     </div>
  142.                                     <div class="wr-results-count" id="wrResultsCount" style="display:none;">
  143.                                         <strong id="wrTotalCount">0</strong> offres trouvées
  144.                                     </div>
  145.                                 </div>
  147.                             </div>
  148.                         </div>
  149.                     </div>
  150.                 </div>
  151.             </div>
  152.         </div>
  153.     </div>
  155.     {# ═══════════════════════════════════════════════════════════════
  156.        CORPS DE L'ANNONCE — full width, pas de sidebar
  157.     ═══════════════════════════════════════════════════════════════ #}
  158.     <div id="job_details" class="job-details section panel pb-6 xl:pb-9">
  159.         <div class="section-outer panel">
  160.             <div class="container max-w-lg">
  161.                 <div class="section-inner panel">
  163.                     {# ── Métadonnées en tags ── #}
  164.                     <div class="job-tags mb-4" style="margin-top:-10px;">
  165.                         {% if job.companyName is not empty %}
  166.                             <span class="job-tag">
  167.                                 <svg width="14" height="14" 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>
  168.                                 {{ job.companyName }}
  169.                             </span>
  170.                         {% endif %}
  171.                         {% if job.employmentType is not empty %}
  172.                             <span class="job-tag">
  173.                                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
  174.                                 {{ job.employmentType }}
  175.                             </span>
  176.                         {% endif %}
  177.                         {% if job.city is not empty %}
  178.                             <span class="job-tag">
  179.                                 <svg width="14" height="14" 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>
  180.                                 {{ job.city }}{% if job.country is not null %}, {{ job.country }}{% endif %}
  181.                             </span>
  182.                         {% endif %}
  183.                         {% if job.remoteWork is not empty %}
  184.                             <span class="job-tag">
  185.                                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
  186.                                 {{ job.remoteWork }}
  187.                             </span>
  188.                         {% endif %}
  189.                         {% if job.experienceLevel is not empty %}
  190.                             <span class="job-tag">
  191.                                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg>
  192.                                 +{{ job.experienceLevel }} ans d'expérience
  193.                             </span>
  194.                         {% endif %}
  195.                         {% if job.salaryPeriod is not null %}
  196.                             <span class="job-tag job-tag-salary">
  197.                                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg>
  198.                                 {{ job.salaryMin }} – {{ job.salaryMax }} {{ job.devise }}/{{ job.salaryPeriod }}
  199.                             </span>
  200.                         {% endif %}
  201.                         {% if job.verification == 0 %}
  202.                             <span class="job-tag job-tag-external">
  203.                                 ⚡ Offre indexée — source externe
  204.                             </span>
  205.                         {% endif %}
  206.                     </div>
  208.                     {# ── Card principale ── #}
  209.                     <div class="job-body-card">
  211.                         {# — Résumé (toujours visible) — #}
  212.                         {% if job.jobSummary is not null %}
  213.                             <div class="job-section-title">Présentation du poste</div>
  214.                             <p class="job-section-text">{{ job.jobSummary }}</p>
  215.                         {% endif %}
  217.                         {% if app.user is null %}
  218.                             <hr class="job-section-divider">
  219.                             <div class="job-section-title">Missions</div>
  220.                             <p class="job-section-text">Retrouvez ici le détail complet des missions proposées pour ce poste : responsabilités quotidiennes, projets à mener, objectifs à atteindre et périmètre d'intervention au sein de l'équipe. Toutes les informations pour vous projeter concrètement dans le poste et savoir exactement ce qui vous attend dès votre prise de fonction.</p>
  222.                             <hr class="job-section-divider">
  223.                             <div class="job-section-title">Profil recherché</div>
  224.                             <p class="job-section-text">Accédez aux compétences techniques et humaines attendues par le recruteur, au niveau d'expérience requis, aux formations valorisées et aux qualités personnelles recherchées. Vérifiez en un coup d'œil si votre profil correspond à cette opportunité avant de candidater.</p>
  226.                             <hr class="job-section-divider">
  227.                             <div class="job-section-title">Avantages</div>
  228.                             <p class="job-section-text">Découvrez ce que l'entreprise propose à ses collaborateurs : politique de télétravail, couverture santé, primes, formation continue, ambiance de travail et perspectives d'évolution. Toutes les informations pour comparer cette offre avec vos attentes et faire le bon choix.</p>
  230.                         {% endif %}
  232.                         {% if app.user is not null %}
  233.                             {# ══════ CONTENU COMPLET (connecté) ══════ #}
  235.                             {% if job.keyResponsabilities is not null %}
  236.                                 <hr class="job-section-divider">
  237.                                 <div class="job-section-title">Missions</div>
  238.                                 <p class="job-section-text">{{ job.keyResponsabilities }}</p>
  239.                             {% endif %}
  241.                             {% if job.requirements is not null %}
  242.                                 <hr class="job-section-divider">
  243.                                 <div class="job-section-title">Profil recherché</div>
  244.                                 <p class="job-section-text">{{ job.requirements }}</p>
  245.                             {% endif %}
  247.                             {% if job.benefits is not null %}
  248.                                 <hr class="job-section-divider">
  249.                                 <div class="job-section-title">Avantages</div>
  250.                                 <p class="job-section-text">{{ job.benefits }}</p>
  251.                             {% endif %}
  253.                             {# — Boutons CTA — #}
  254.                             <div class="job-cta-bar">
  256.                                 {% if app.user.candidate is not null %}
  257.                                     <a href="{{ path('locale_cvs_application_job_like', {'_locale': app.request.locale, 'slug': job.slug}) }}" class="job-cta-main active">
  258.                                         <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
  259.                                         Je suis intéressé(e)
  260.                                     </a>
  261.                                 {% endif %}
  263.                                 {% if job.websearch == 1 and job.website is not empty %}
  264.                                     <a href="{{ job.website }}" target="_blank" class="job-cta-main active">
  265.                                         <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
  266.                                         Candidater
  267.                                     </a>
  268.                                 {% endif %}
  270.                                 {% if job.enterprise is not null %}
  271.                                     <a href="{{ path('locale_cvs_application_company_show', {'_locale': app.request.locale, 'slug': job.enterprise.slug}) }}" class="job-cta-company">
  272.                                         <svg width="16" height="16" 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>
  273.                                         Voir les autres offres
  274.                                     </a>
  275.                                 {% endif %}
  276.                             </div>
  278.                         {% else %}
  279.                             {# ══════ CONTENU VERROUILLÉ (non connecté) ══════ #}
  281.                             {# Zone floutée qui donne envie #}
  282.                             <div class="job-locked-overlay">
  283.                                 <div class="job-locked-blur">
  284.                                     <hr class="job-section-divider">
  285.                                     <div class="job-section-title">Missions</div>
  286.                                     <p class="job-section-text">Découvrez les missions principales de ce poste, les responsabilités quotidiennes et les projets sur lesquels vous interviendrez au sein de l'équipe...</p>
  287.                                     <hr class="job-section-divider">
  288.                                     <div class="job-section-title">Profil recherché</div>
  289.                                     <p class="job-section-text">Compétences techniques et soft skills recherchées, niveau d'expérience attendu, formations et certifications appréciées pour ce poste...</p>
  290.                                     <hr class="job-section-divider">
  291.                                     <div class="job-section-title">Avantages</div>
  292.                                     <p class="job-section-text">Télétravail, mutuelle, tickets restaurant, formation continue, ambiance de travail et perspectives d'évolution au sein de l'entreprise...</p>
  293.                                 </div>
  294.                                 <div class="job-locked-cta">
  295.                                     <div style="font-size:32px;">🔓</div>
  296.                                     <div class="job-locked-title">Débloquez l'offre complète</div>
  297.                                     <div class="job-locked-text">Créez votre profil en 2 minutes pour accéder aux missions, avantages et candidater directement</div>
  298.                                     <a href="{{ path('locale_app_register', {'_locale': app.request.locale}) }}" class="job-locked-btn">
  299.                                         Créer mon profil gratuitement
  300.                                         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17l9.2-9.2M17 17V7H7"/></svg>
  301.                                     </a>
  302.                                     <div class="job-locked-login">Déjà inscrit ? <a href="{{ path('locale_app_login', {'_locale': app.request.locale}) }}">Se connecter</a></div>
  303.                                 </div>
  304.                             </div>
  306.                         {% endif %}
  310.                     </div>
  312.                 </div>
  313.             </div>
  314.         </div>
  315.     </div>
  318.     {% if othersJobs is not null %}
  319.         <div id="openings" class="career-openings section panel overflow-hidden pb-6 xl:pb-9">
  320.             <div class="section-outer panel py-6 xl:py-9 bg-secondary dark:bg-gray-800">
  321.                 <div class="container max-w-lg">
  322.                     <div class="section-inner panel">
  323.                         <div class="panel vstack justify-center gap-4 sm:gap-6 xl:gap-8">
  325.                             <h2 class="h4 sm:h2 m-0 text-center" data-anime="onview: -100; translateY: [48, 0]; opacity: [0, 1]; easing: spring(1, 80, 10, 0); duration: 450; delay: 100;">
  326.                                 Offres d'emploi de {{ job.enterprise.companyName|lower|capitalize }}
  327.                             </h2>
  329.                             <div class="panel">
  331.                                 <div class="panel">
  332.                                     <div class="row child-cols-12 sm:child-cols-6 col-match g-2 sm:g-3 uc-grid">
  333.                                         {% for oj in othersJobs %}
  334.                                             <div class="panel">
  335.                                                 <div class="panel vstack justify-end items-end gap-1 p-3 rounded lg:rounded-2 bg-white dark:bg-gray-800">
  336.                                                     <div class="vstack gap-narrow">
  337.                                                         <h5 class="h6 lg:h5 m-0">{{ oj.jobTitle }}</h5>
  338.                                                         <span class="fs-6 text-dark dark:text-white text-opacity-70">{{ oj.city }}</span>
  339.                                                     </div>
  340.                                                     <a href="{{ path('locale_cvs_application_job_show', {'_locale': app.request.locale, 'slug': oj.slug}) }}" class="uc-link fs-7 fw-bold d-inline-flex items-center gap-narrow border-bottom pb-narrow">
  341.                                                         <span>Postuler</span>
  342.                                                         <i class="icon icon-narrow unicon-arrow-up-right fw-bold rtl:-rotate-90"></i>
  343.                                                     </a>
  344.                                                 </div>
  345.                                             </div>
  347.                                         {% endfor %}
  348.                                     </div>
  349.                                 </div>
  351.                             </div>
  352.                         </div>
  353.                     </div>
  354.                 </div>
  355.             </div>
  356.         </div>
  357.     {% endif %}
  360.     {% if similarJobs is defined and similarJobs is not empty %}
  361.         <div id="similar_jobs" class="similar-jobs section panel overflow-hidden pb-6 xl:pb-9">
  362.             <div class="section-outer panel py-6 xl:py-9">
  363.                 <div class="container max-w-lg">
  364.                     <div class="section-inner panel">
  365.                         <div class="panel vstack justify-center gap-4 sm:gap-6 xl:gap-8">
  367.                             <div class="vstack items-center text-center gap-1">
  368.                                 <h2 class="h4 sm:h2 m-0">Offres similaires</h2>
  369.                             </div>
  371.                             <div class="panel">
  372.                                 <div class="row child-cols-12 sm:child-cols-6 lg:child-cols-4 col-match g-2 sm:g-3">
  373.                                     {% for sj in similarJobs %}
  374.                                         <div class="panel">
  375.                                             <a href="{{ path('locale_cvs_application_job_show', {'_locale': app.request.locale, 'slug': sj.slug}) }}" class="panel vstack gap-2 p-3 rounded-2 bg-white dark:bg-gray-800 h-100" style="box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.06); text-decoration: none; color: inherit; transition: box-shadow 0.2s ease, transform 0.2s ease;" onmouseover="this.style.boxShadow='0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06)'; this.style.transform='translateY(-2px)';" onmouseout="this.style.boxShadow='0 2px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04)'; this.style.transform='translateY(0)';">
  377.                                                 {# En-tête : entreprise #}
  378.                                                 {% if sj.companyName is not empty %}
  379.                                                     <div class="hstack gap-1 items-center">
  380.                                                         <div class="cstack w-32px h-32px rounded-1 bg-secondary" style="min-width: 32px;">
  381.                                                             <i class="icon-narrow unicon-portfolio text-primary" style="font-size: 14px;"></i>
  382.                                                         </div>
  383.                                                         <span class="fs-7 fw-bold text-dark text-opacity-50" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ sj.companyName }}</span>
  384.                                                     </div>
  385.                                                 {% endif %}
  387.                                                 {# Titre du poste #}
  388.                                                 <h5 class="h6 lg:h5 m-0" style="line-height: 1.4;">{{ sj.jobTitle }}</h5>
  390.                                                 {# Infos clés #}
  391.                                                 <div class="vstack gap-narrow mt-auto">
  392.                                                     {% if sj.city is not empty %}
  393.                                                         <div class="hstack gap-narrow items-center fs-7 text-dark text-opacity-60">
  394.                                                             <i class="icon-narrow unicon-location" style="font-size: 12px;"></i>
  395.                                                             <span>{{ sj.city }}{% if sj.country is not null %}, {{ sj.country }}{% endif %}</span>
  396.                                                         </div>
  397.                                                     {% endif %}
  398.                                                     {% if sj.employmentType is not empty %}
  399.                                                         <div class="hstack gap-narrow items-center fs-7 text-dark text-opacity-60">
  400.                                                             <i class="icon-narrow unicon-portfolio" style="font-size: 12px;"></i>
  401.                                                             <span>{{ sj.employmentType }}</span>
  402.                                                         </div>
  403.                                                     {% endif %}
  404.                                                     {% if sj.remoteWork is not empty %}
  405.                                                         <div class="hstack gap-narrow items-center fs-7 text-dark text-opacity-60">
  406.                                                             <i class="icon-narrow unicon-laptop" style="font-size: 12px;"></i>
  407.                                                             <span>{{ sj.remoteWork }}</span>
  408.                                                         </div>
  409.                                                     {% endif %}
  410.                                                 </div>
  412.                                                 {# Tags catégorie #}
  413.                                                 {% if sj.category is not empty %}
  414.                                                     <div class="hstack gap-narrow flex-wrap mt-1">
  415.                                                         <span class="px-1 py-narrow fs-8 fw-bold rounded bg-secondary text-primary" style="white-space: nowrap;">{{ sj.category }}</span>
  416.                                                     </div>
  417.                                                 {% endif %}
  419.                                                 {# Lien CTA #}
  420.                                                 <div class="hstack items-center gap-narrow mt-1 fs-7 fw-bold text-primary">
  421.                                                     <span>Voir l'offre</span>
  422.                                                     <i class="icon icon-narrow unicon-arrow-up-right fw-bold" style="font-size: 12px;"></i>
  423.                                                 </div>
  425.                                             </a>
  426.                                         </div>
  427.                                     {% endfor %}
  428.                                 </div>
  429.                             </div>
  431.                         </div>
  432.                     </div>
  433.                 </div>
  434.             </div>
  435.         </div>
  436.     {% endif %}
  440. {% endblock body %}
  442. {% block footerjs %}
  443.     <script>
  444.         (function(){
  446.             var JOB_BASE_URL = '/{{ app.request.locale }}/job/';
  447.     var SEARCH_API = '{{ path("locale_api_jobs_search", {"_locale": app.request.locale}) }}';
  449.     var palette = [
  450.         {bg:'#EDE9FE',color:'#7C3AED'},{bg:'#DBEAFE',color:'#2563EB'},
  451.         {bg:'#D1FAE5',color:'#059669'},{bg:'#FEF3C7',color:'#D97706'},
  452.         {bg:'#FCE7F3',color:'#DB2777'},{bg:'#FEE2E2',color:'#DC2626'},
  453.         {bg:'#E0E7FF',color:'#4338CA'},{bg:'#CCFBF1',color:'#0D9488'}
  454.     ];
  455.     function getColor(name){
  456.         var h=0;for(var i=0;i<name.length;i++) h=name.charCodeAt(i)+((h<<5)-h);
  457.         return palette[Math.abs(h)%palette.length];
  458.     }
  460.     var searchInput = document.getElementById('wrSearchInput');
  461.     var searchBtn = document.getElementById('wrSearchBtn');
  462.     var searchResults = document.getElementById('wrSearchResults');
  463.     var searchClose = document.getElementById('wrSearchClose');
  464.     var jobsList = document.getElementById('wrJobsList');
  465.     var loading = document.getElementById('wrLoading');
  466.     var emptyState = document.getElementById('wrEmptyState');
  467.     var loadMoreWrap = document.getElementById('wrLoadMore');
  468.     var loadMoreBtn = document.getElementById('wrLoadMoreBtn');
  469.     var resultsCount = document.getElementById('wrResultsCount');
  470.     var totalCountEl = document.getElementById('wrTotalCount');
  472.     var currentQuery = '';
  473.     var currentOffset = 0;
  474.     var LIMIT = 10;
  475.     var isLoading = false;
  476.     var debounceTimer;
  478.     function renderJob(job){
  479.         var col = getColor(job.companyName);
  480.         var logoHtml;
  481.         if(job.image){
  482.             logoHtml = '<div class="wr-result-logo"><img src="'+job.image+'" alt="'+job.companyName+'"></div>';
  483.         } else {
  484.             logoHtml = '<div class="wr-result-logo" style="background:'+col.bg+';color:'+col.color+';">'+(job.logo || job.companyName.charAt(0).toUpperCase())+'</div>';
  485.         }
  487.         var badgeHtml = '';
  488.         if(job.isNew) badgeHtml = '<span class="wr-result-badge wr-badge-new">Nouveau</span>';
  490.         var salaryHtml = job.salary ? '<span class="wr-result-salary">'+job.salary+'</span>' : '';
  492.         var remoteHtml = '';
  493.         if(job.remoteWork && job.remoteWork !== '' && job.remoteWork !== 'no'){
  494.             var remoteLabel = job.remoteWork === 'full' ? 'Full remote' : (job.remoteWork === 'hybrid' ? 'Hybride' : job.remoteWork);
  495.             remoteHtml = '<span>·</span><span>'+remoteLabel+'</span>';
  496.         }
  498.         var div = document.createElement('a');
  499.         div.className = 'wr-result-item';
  500.         div.href = JOB_BASE_URL + job.slug;
  501.         div.innerHTML = logoHtml +
  502.             '<div class="wr-result-info">' +
  503.             '<div class="wr-result-title">' + job.jobTitle + '</div>' +
  504.             '<div class="wr-result-meta">' +
  505.             '<span class="wr-result-company">' + job.companyName + '</span>' +
  506.             (job.city ? '<span>·</span><span>' + job.city + '</span>' : '') +
  507.             '<span>·</span><span>' + (job.employmentType || '') + '</span>' +
  508.             remoteHtml +
  509.             badgeHtml +
  510.             '</div>' +
  511.             '</div>' +
  512.             '<div class="wr-result-actions">' + salaryHtml + '</div>';
  514.         return div;
  515.     }
  517.     function fetchJobs(query, offset, append){
  518.         if(isLoading) return;
  519.         if(query.length < 2) return;
  520.         isLoading = true;
  522.         if(!append){
  523.             jobsList.innerHTML = '';
  524.             loadMoreWrap.style.display = 'none';
  525.             resultsCount.style.display = 'none';
  526.         }
  528.         searchResults.classList.add('visible');
  529.         loading.style.display = 'block';
  530.         emptyState.style.display = 'none';
  532.         var url = SEARCH_API + '?q=' + encodeURIComponent(query) + '&offset=' + offset + '&limit=' + LIMIT;
  534.         fetch(url, {credentials:'same-origin'})
  535.             .then(function(r){ return r.json(); })
  536.             .then(function(data){
  537.                 loading.style.display = 'none';
  538.                 isLoading = false;
  540.                 if(data.total === 0){
  541.                     emptyState.style.display = 'block';
  542.                     return;
  543.                 }
  545.                 data.jobs.forEach(function(job, i){
  546.                     var el = renderJob(job);
  547.                     jobsList.appendChild(el);
  548.                     setTimeout(function(){ el.classList.add('show'); }, 50 + i * 60);
  549.                 });
  551.                 totalCountEl.textContent = data.total;
  552.                 resultsCount.style.display = 'block';
  554.                 if(data.hasMore){
  555.                     loadMoreWrap.style.display = 'flex';
  556.                 } else {
  557.                     loadMoreWrap.style.display = 'none';
  558.                 }
  560.                 currentOffset = offset + data.jobs.length;
  561.             })
  562.             .catch(function(err){
  563.                 console.error('Erreur recherche:', err);
  564.                 loading.style.display = 'none';
  565.                 isLoading = false;
  566.             });
  567.     }
  569.     searchClose.addEventListener('click', function(){
  570.         searchResults.classList.remove('visible');
  571.         jobsList.innerHTML = '';
  572.         searchInput.value = '';
  573.         loadMoreWrap.style.display = 'none';
  574.         resultsCount.style.display = 'none';
  575.         emptyState.style.display = 'none';
  576.     });
  578.     searchInput.addEventListener('input', function(){
  579.         clearTimeout(debounceTimer);
  580.         var q = searchInput.value.trim();
  581.         if(q.length < 2){
  582.             searchResults.classList.remove('visible');
  583.             jobsList.innerHTML = '';
  584.             return;
  585.         }
  586.         debounceTimer = setTimeout(function(){
  587.             currentQuery = q;
  588.             currentOffset = 0;
  589.             fetchJobs(currentQuery, 0, false);
  590.         }, 350);
  591.     });
  593.     searchBtn.addEventListener('click', function(e){
  594.         e.preventDefault();
  595.         clearTimeout(debounceTimer);
  596.         currentQuery = searchInput.value.trim();
  597.         currentOffset = 0;
  598.         fetchJobs(currentQuery, 0, false);
  599.     });
  601.     searchInput.addEventListener('keydown', function(e){
  602.         if(e.key === 'Enter'){
  603.             e.preventDefault();
  604.             clearTimeout(debounceTimer);
  605.             currentQuery = searchInput.value.trim();
  606.             currentOffset = 0;
  607.             fetchJobs(currentQuery, 0, false);
  608.         }
  609.     });
  611.     loadMoreBtn.addEventListener('click', function(){
  612.         fetchJobs(currentQuery, currentOffset, true);
  613.     });
  615. })();
  616.     </script>
  617. {% endblock footerjs %}