templates/application/whileresume/application/jobs/show_en.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="Anonymous candidate"></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="Anonymous candidate"></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="Anonymous candidate"></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="Anonymous candidate"></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="Anonymous candidate"></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="Anonymous candidate"></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 }} is hiring</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="Search for a job, company, or city..." 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>Search</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">✕ Close</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">No jobs match your search</p>
  137.                                         <p class="wr-empty-text">Try different keywords</p>
  138.                                     </div>
  139.                                     <div id="wrLoadMore" class="wr-load-more" style="display:none;">
  140.                                         <button class="wr-load-more-btn" id="wrLoadMoreBtn">Show more jobs</button>
  141.                                     </div>
  142.                                     <div class="wr-results-count" id="wrResultsCount" style="display:none;">
  143.                                         <strong id="wrTotalCount">0</strong> jobs found
  144.                                     </div>
  145.                                 </div>
  147.                             </div>
  148.                         </div>
  149.                     </div>
  150.                 </div>
  151.             </div>
  152.         </div>
  153.     </div>
  155.     {# ═══════════════════════════════════════════════════════════════
  156.        JOB BODY — full width, no 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.                     {# ── Metadata 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 }} years experience
  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.                                 ⚡ Indexed listing — external source
  204.                             </span>
  205.                         {% endif %}
  206.                     </div>
  208.                     {# ── Main card ── #}
  209.                     <div class="job-body-card">
  211.                         {# — Résumé (toujours visible) — #}
  212.                         {% if job.jobSummary is not null %}
  213.                             <div class="job-section-title">Job overview</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">Responsibilities</div>
  220.                             <p class="job-section-text">Find here the full details of the responsibilities for this role: daily tasks, projects to lead, goals to achieve and scope of work within the team. Everything you need to picture yourself in the role and know exactly what to expect from day one.</p>
  222.                             <hr class="job-section-divider">
  223.                             <div class="job-section-title">Required profile</div>
  224.                             <p class="job-section-text">Access the technical and interpersonal skills expected by the recruiter, the required experience level, valued qualifications and personal qualities sought. Check at a glance whether your profile matches this opportunity before applying.</p>
  226.                             <hr class="job-section-divider">
  227.                             <div class="job-section-title">Benefits</div>
  228.                             <p class="job-section-text">Discover what the company offers its employees: remote work policy, health coverage, bonuses, continuous training, work environment and growth opportunities. All the information you need to compare this offer with your expectations and make the right choice.</p>
  230.                         {% endif %}
  232.                         {% if app.user is not null %}
  233.                             {# ══════ FULL CONTENT (logged in) ══════ #}
  235.                             {% if job.keyResponsabilities is not null %}
  236.                                 <hr class="job-section-divider">
  237.                                 <div class="job-section-title">Responsibilities</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">Required profile</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">Benefits</div>
  250.                                 <p class="job-section-text">{{ job.benefits }}</p>
  251.                             {% endif %}
  253.                             {# — CTA Buttons — #}
  254.                             <div class="job-cta-bar">
  256.                                 {% if app.user.candidate is not null %}
  257.                                     <a href="{{ path('cvs_application_job_like', {'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.                                         I'm interested
  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.                                         Apply
  267.                                     </a>
  268.                                 {% endif %}
  270.                                 {% if job.enterprise is not null %}
  271.                                     <a href="{{ path('cvs_application_company_show', {'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.                                         View other listings
  274.                                     </a>
  275.                                 {% endif %}
  276.                             </div>
  278.                         {% else %}
  279.                             {# ══════ LOCKED CONTENT (not logged in) ══════ #}
  281.                             {# Blurred teaser zone #}
  282.                             <div class="job-locked-overlay">
  283.                                 <div class="job-locked-blur">
  284.                                     <hr class="job-section-divider">
  285.                                     <div class="job-section-title">Responsibilities</div>
  286.                                     <p class="job-section-text">Discover the main responsibilities of this role, daily tasks and projects you will be working on within the team...</p>
  287.                                     <hr class="job-section-divider">
  288.                                     <div class="job-section-title">Required profile</div>
  289.                                     <p class="job-section-text">Technical and soft skills required, expected experience level, valued qualifications and certifications for this role...</p>
  290.                                     <hr class="job-section-divider">
  291.                                     <div class="job-section-title">Benefits</div>
  292.                                     <p class="job-section-text">Remote work, health insurance, meal vouchers, continuous training, work environment and career growth within the company...</p>
  293.                                 </div>
  294.                                 <div class="job-locked-cta">
  295.                                     <div style="font-size:32px;">🔓</div>
  296.                                     <div class="job-locked-title">Unlock the full listing</div>
  297.                                     <div class="job-locked-text">Create your profile in 2 minutes to access responsibilities, benefits and apply directly</div>
  298.                                     <a href="{{ path('app_register') }}" class="job-locked-btn">
  299.                                         Create my profile for free
  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">Already registered? <a href="{{ path('app_login') }}">Log in</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.                                 Job openings at {{ 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('cvs_application_job_show', {'slug': oj.slug}) }}" class="uc-link fs-7 fw-bold d-inline-flex items-center gap-narrow border-bottom pb-narrow">
  341.                                                         <span>Apply</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">Similar jobs</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('cvs_application_job_show', {'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.                                                 {# Header: company #}
  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.                                                 {# Job title #}
  388.                                                 <h5 class="h6 lg:h5 m-0" style="line-height: 1.4;">{{ sj.jobTitle }}</h5>
  390.                                                 {# Key info #}
  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.                                                 {# Category tags #}
  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.                                                 {# CTA link #}
  420.                                                 <div class="hstack items-center gap-narrow mt-1 fs-7 fw-bold text-primary">
  421.                                                     <span>View listing</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 = '/job/';
  447.     var SEARCH_API = '{{ path("api_jobs_search") }}';
  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' ? 'Hybrid' : 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('Search error:', 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 %}