Symfony Profiler

{% extends 'layout.html.twig' %}
{% block title %}
Suggestions IA | bambboo
{% endblock %}
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/19.2.16/css/intlTelInput.css" />
<style>
.iti {
width: 100%;
}
.iti__flag-container {
display: block !important;
}
.iti__selected-flag {
display: flex !important;
}
.phone-client-error {
color: red;
font-size: 0.875em;
margin-top: 0.25rem;
display: none;
}
.server-form-error {
color: red;
font-size: 0.875em;
margin-top: 0.25rem;
}
#messageGreetingSelect,
#messageTextarea {
background-color: #f0f2f5;
border: none;
border-radius: 8px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
#messageGreetingSelect:focus,
#messageTextarea:focus {
background-color: #ffffff;
box-shadow: none;
border: 1px solid #d1d1d1;
}
#messageGreetingSelect {
padding: 0.375rem 2.25rem 0.375rem 0.75rem;
}
.ai-comment-container {
max-height: 200px;
overflow: hidden;
position: relative;
}
.ai-comment-container::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 25px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
pointer-events: none;
z-index: 1;
}
.ai-comment-container.expanded {
max-height: none;
}
/* Offcanvas LinkedIn : desktop 40% (40vw), min 440px pour que la phrase Chrome Store tienne sur une ligne */
.offcanvas.linkedin-connect-offcanvas {
--bs-offcanvas-width: 40vw;
min-width: 440px;
}
@media (max-width: 767.98px) {
.offcanvas.linkedin-connect-offcanvas {
--bs-offcanvas-width: 100vw;
min-width: 100%;
}
}
/* Masquer le guided tour sur les petits écrans (ici : < 1600px) */
@media (max-width: 1599.98px) {
#tour-start-modal,
#tour.popover-tour,
.popover-tour,
.tour-backdrop {
display: none !important;
}
}
/* Masquer l'option extension pour les navigateurs non-Chromium */
#btn-connexion-extension.hide-for-non-chromium {
display: none !important;
visibility: hidden !important;
}
/* Désactivation du picto par défaut de Bootstrap dans les accordions d'engagements */
#accordionEngagements .accordion-button::after,
#accordionEngagementsDesktop .accordion-button::after {
display: none !important;
}
/* Gestion des chevrons dans les accordions d'engagements */
#accordionEngagements .accordion-button.collapsed .bi-chevron-down,
#accordionEngagementsDesktop .accordion-button.collapsed .bi-chevron-down {
display: inline-block !important;
}
#accordionEngagements .accordion-button.collapsed .bi-chevron-up,
#accordionEngagementsDesktop .accordion-button.collapsed .bi-chevron-up {
display: none !important;
}
#accordionEngagements .accordion-button:not(.collapsed) .bi-chevron-down,
#accordionEngagementsDesktop .accordion-button:not(.collapsed) .bi-chevron-down {
display: none !important;
}
#accordionEngagements .accordion-button:not(.collapsed) .bi-chevron-up,
#accordionEngagementsDesktop .accordion-button:not(.collapsed) .bi-chevron-up {
display: inline-block !important;
}
/* Boutons "pré-étape" LinkedIn (ouvrir l'app) : hauteur augmentée */
.linkedin-prestep-btn {
min-height: 52px;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
</style>
{% endblock %}
{% block body %}
{% set suggestionPageConfig = {
userId: app.user ? app.user.id : null,
chromeExtensionId: chrome_extension_id ?? null,
linkedinUrl: linkedinUrl ?? null,
hasExtension: hasExtension ? true : false,
hasCredentials: hasCredentials ? true : false,
userHasSeenPreviewModal: userHasSeenPreviewModal ? true : false,
urls: {
saveTimezone: path('api.onboarding.save_timezone'),
connectLinkedinExtension: path('api.onboarding.connect_linkedin_extension'),
connectLinkedin: path('api.onboarding.connect_linkedin'),
linkedinStatus: path('api.onboarding.linkedin_status'),
resolveCheckpoint: path('api.onboarding.resolve_checkpoint'),
initiateNetworkExtractionTemplate: path('user_initiate_network_extraction_v4', {id: 'PLACEHOLDER_ID'}),
login: path('app_login')
},
assets: {
bs5IntroTour: asset('js/bs5-intro-tour.js'),
intlTelInput: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/19.2.16/js/intlTelInput.min.js',
intlTelInputUtils: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/19.2.16/js/utils.js',
dotlottieWc: 'https://unpkg.com/@lottiefiles/dotlottie-wc@0.3.0/dist/dotlottie-wc.js',
dotlottiePlayer: 'https://unpkg.com/@dotlottie/player-component@2.7.12/dist/dotlottie-player.mjs'
}
} %}
<div id="suggestion-page-config" data-config="{{ suggestionPageConfig|json_encode|e('html_attr') }}"></div>
<script src="https://cdn.lordicon.com/lordicon.js"></script>

<div class="modal fade" id="linkedin-no-notif-modal" tabindex="-1" aria-labelledby="linkedinNoNotifModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content p-4 ubuntu-regular">
<div class="modal-header border-0 text-center d-block">
<button type="button" class="btn-close position-absolute top-0 end-0 mt-3 me-3" data-bs-dismiss="modal" aria-label="Fermer"></button>
<h5 class="modal-title text-center ubuntu-bold" id="linkedinNoNotifModalLabel">
Avant de cliquer, ouvrez l'appli LinkedIn
</h5>
</div>
<div class="modal-body text-center">
<p class="ubuntu-regular mb-3">
Pour recevoir la notification, ouvrez votre appli LinkedIn avant de passer à l'étape suivante.
</p>
<button type="button" class="btn btn-primary w-100 mb-3" id="linkedin-no-notif-modal-opened-app" style="background-color: #0077B5; border-color: #0077B5;">
J'ai ouvert l'application LinkedIn
</button>
<button type="button" class="btn btn-link text-decoration-underline p-0 w-100 ubuntu-regular" id="linkedin-no-notif-modal-no-app" style="color: #1a1a1a;">
Je n'ai pas l'application LinkedIn
</button>
</div>
</div>
</div>
</div>

<div class="modal fade" id="linkedin-no-notif-modal-mobile" tabindex="-1" aria-labelledby="linkedinNoNotifModalMobileLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content p-4 ubuntu-regular">
<div class="modal-header border-0 text-center d-block">
<button type="button" class="btn-close position-absolute top-0 end-0 mt-3 me-3" data-bs-dismiss="modal" aria-label="Fermer"></button>
<h5 class="modal-title text-center ubuntu-bold" id="linkedinNoNotifModalMobileLabel">
Activez les notifications LinkedIn
</h5>
</div>
<div class="modal-body text-center">
<p class="ubuntu-regular mb-3">
Pour valider votre connexion, vous devez activer les notifications de l'application LinkedIn dans les réglages de votre téléphone.
</p>
<ul class="text-start mb-3" style="list-style: decimal; padding-left: 1.25rem;">
<li>
Allez dans Réglages > Notifications > LinkedIn
</li>
<li>
Activez les notifications
</li>
<li>
Revenez ici et cliquez sur le bouton ci‑dessous
</li>
</ul>
<button type="button" class="btn btn-primary w-100 mb-3" id="linkedin-no-notif-modal-mobile-opened-app" style="background-color: #0077B5; border-color: #0077B5;">
J'ai activé les notifications ✓
</button>
<button type="button" class="btn btn-link text-decoration-underline p-0 w-100 ubuntu-regular" id="linkedin-no-notif-modal-mobile-no-app" style="color: #6c757d;">
Je n'ai pas l'application LinkedIn
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="linkedin-no-app-extension-modal" tabindex="-1" aria-labelledby="linkedinNoAppExtensionModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content p-4 ubuntu-regular">
<div class="modal-header border-0 text-center d-block">
<button type="button" class="btn-close position-absolute top-0 end-0 mt-3 me-3" data-bs-dismiss="modal" aria-label="Fermer"></button>
<h5 class="modal-title text-center ubuntu-bold" id="linkedinNoAppExtensionModalLabel">
Connexion avec l'extension
</h5>
</div>
<div class="modal-body text-center">
<p class="ubuntu-regular mb-4">
Si vous n'avez pas l'application LinkedIn, il est préférable de vous connecter avec l'extension Bambboo.
</p>
<button type="button" class="btn btn-primary w-100 mb-2" id="linkedin-no-app-extension-modal-go" style="background-color: #0077B5; border-color: #0077B5;">
Passer à l'extension Bambboo
</button>
<button type="button" class="btn btn-link text-decoration-underline p-0 w-100 ubuntu-regular" id="linkedin-no-app-extension-modal-cancel" style="color: #1a1a1a;">
Annuler
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="linkedin-no-app-install-modal" tabindex="-1" aria-labelledby="linkedinNoAppInstallModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content p-4 ubuntu-regular">
<div class="modal-header border-0 text-center d-block">
<button type="button" class="btn-close position-absolute top-0 end-0 mt-3 me-3" data-bs-dismiss="modal" aria-label="Fermer"></button>
<h5 class="modal-title text-center ubuntu-bold" id="linkedinNoAppInstallModalLabel">
Installer l'application LinkedIn
</h5>
</div>
<div class="modal-body text-center">
<p class="ubuntu-regular mb-4">
Il est nécessaire d'installer l'application LinkedIn pour pouvoir continuer.
</p>
<div class="d-flex flex-column gap-2 mb-4">
<a href="https://apps.apple.com/app/linkedin/id288429040" target="_blank" rel="noopener noreferrer" class="btn btn-outline-secondary">
App Store
</a>
<a href="https://play.google.com/store/apps/details?id=com.linkedin.android" target="_blank" rel="noopener noreferrer" class="btn btn-outline-secondary">
Play Store
</a>
</div>
<button type="button" class="btn btn-primary w-100 mb-2" id="linkedin-no-app-install-modal-done" style="background-color: #0077B5; border-color: #0077B5;">
J'ai installé l'application
</button>
<button type="button" class="btn btn-link text-decoration-underline p-0 w-100 ubuntu-regular" id="linkedin-no-app-install-modal-cancel" style="color: #1a1a1a;">
Annuler
</button>
</div>
</div>
</div>
</div>
{% if mobile_detect.isMobile() %}
<div class="container-fluid bg-clouded px-2 py-3 ubuntu min-vh-100 overflow-auto">
{% if not app.user.identityUid %}

<div id="connect-linkedin-container-mobile" class="container-fluid d-flex align-items-center justify-content-center" style="min-height: calc(100vh - 2rem); padding-top: 1rem; padding-bottom: 1rem;">
<div class="d-flex justify-content-center align-items-center px-3 w-100">
<div class="text-center p-4 p-md-5 rounded-3 w-100" style="background-color: #ffffff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); max-width: 900px;">

<div class="mb-3 mb-md-4 d-flex justify-content-center">
<img src="{{ asset('img/connect-to-linkedin.png') }}" alt="Connectez votre compte LinkedIn" class="img-fluid" style="max-width: 60%; height: auto;"></div>
<h2 class="ubuntu-bold fs-5 mb-2 px-2" style="color: #1a1a1a;">
Connectez votre compte Linkedin
</h2>
<p class="ubuntu-regular mb-3 mb-md-4 fs-16 px-2" style="color: #1a1a1a;">
Pour utiliser bambboo, vous devez connecter votre compte Linkedin.
</p>

<div class="mb-3 mb-md-4">
<div class="accordion" id="accordionEngagements">
<div class="accordion-item" style="border: none; background-color: #f8f9fa; border-radius: 8px;">
<h2 class="accordion-header" id="headingEngagements">
<button class="accordion-button collapsed ubuntu-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEngagements" aria-expanded="false" aria-controls="collapseEngagements" style="background-color: #f8f9fa; color: #004d40; font-size: 0.875rem; box-shadow: none; padding: 1rem 1.25rem;">
<img src="{{ asset('img/logomark.svg') }}" alt="bambboo" style="width: 20px; height: 20px; margin-right: 0.5rem; flex-shrink: 0;">
<span class="flex-grow-1">
Nos engagements de confidentialité
</span>
<i class="bi bi-chevron-down ms-2" style="color: #004d40; flex-shrink: 0;"></i>
<i class="bi bi-chevron-up ms-2 d-none" style="color: #004d40; flex-shrink: 0;"></i>
</button>
</h2>
<div id="collapseEngagements" class="accordion-collapse collapse" aria-labelledby="headingEngagements" data-bs-parent="#accordionEngagements">
<div class="accordion-body text-start py-3 px-2 px-md-3" style="background-color: #f8f9fa;">
<ul class="mb-0 ps-0" style="list-style: none; padding-left: 0;">
<li class="mb-2 d-flex align-items-center">
<i class="bi bi-check-lg me-2" style="color: #198754; font-size: 0.9rem; font-weight: bold; flex-shrink: 0;"></i>
<span class="ubuntu-regular" style="color: #555; font-size: 0.875rem; line-height: 1.5; word-wrap: break-word; overflow-wrap: break-word;">
bambboo n'accède qu'aux données publiques de vos contacts LinkedIn
</span>
</li>
<li class="mb-2 d-flex align-items-center">
<i class="bi bi-check-lg me-2" style="color: #198754; font-size: 0.9rem; font-weight: bold; flex-shrink: 0;"></i>
<span class="ubuntu-regular" style="color: #555; font-size: 0.875rem; line-height: 1.5; word-wrap: break-word; overflow-wrap: break-word;">
L'usage des données a pour seule finalité d'identifier des opportunités professionnelles
</span>
</li>
<li class="mb-2 d-flex align-items-center">
<i class="bi bi-check-lg me-2" style="color: #198754; font-size: 0.9rem; font-weight: bold; flex-shrink: 0;"></i>
<span class="ubuntu-regular" style="color: #555; font-size: 0.875rem; line-height: 1.5; word-wrap: break-word; overflow-wrap: break-word;">
bambboo ne récolte aucune donnée sensible de vos contacts (ni tél., ni email)
</span>
</li>
<li class="mb-2 d-flex align-items-center">
<i class="bi bi-check-lg me-2" style="color: #198754; font-size: 0.9rem; font-weight: bold; flex-shrink: 0;"></i>
<span class="ubuntu-regular" style="color: #555; font-size: 0.875rem; line-height: 1.5; word-wrap: break-word; overflow-wrap: break-word;">
bambboo n'accède à aucun de vos messages ni activités LinkedIn
</span>
</li>
<li class="mb-0 d-flex align-items-center">
<i class="bi bi-check-lg me-2" style="color: #198754; font-size: 0.9rem; font-weight: bold; flex-shrink: 0;"></i>
<span class="ubuntu-regular" style="color: #555; font-size: 0.875rem; line-height: 1.5; word-wrap: break-word; overflow-wrap: break-word;">
bambboo applique le RGPD avec rigueur et transparence
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary px-4 py-2 ubuntu-medium w-100 w-md-auto" data-bs-toggle="offcanvas" data-bs-target="#linkedinConnectOffcanvas" aria-controls="linkedinConnectOffcanvas" style="background-color: #0077B5; border-color: #0077B5;">
Connecter mon compte LinkedIn
</button>
</div>
</div>
</div>
{% endif %}
{% if app.user.identityUid %}
<div class="bambboo-mobile-only" style="display: none;">
{% if hasSuggestions %}
<h1 id="page-main-title-mobile" class="ubuntu-bold fs-18 mb-3">
Profils détectés par l'IA (
{{ allPendingSuggestionsCount }}
)
</h1>
<div class="" id="suggestions-global-container-mobile" data-is-tour-hidden="{{ is_tour_hidden ? 'true' : 'false' }}" data-hide-tour-url="{{ path('ajax_user_hide_suggestion_tour') }}" data-company-name="{{ company_name|e('html_attr') }}" data-create-message-url="{{ path('ajax_message_create') }}" data-update-refusal-url="{{ path('ajax_suggestion_update_refusal') }}" data-job-details-url-template="/job/JOB_ID_PLACEHOLDER/preview" data-ai-analysis-url-template="{{ path('api_suggestion_analyze', {'id': 'SUGGESTION_ID_PLACEHOLDER'}) }}" data-mark-preview-seen-url="{{ path('ajax_user_mark_linkedin_preview_modal_shown') }}" data-load-next-url="{{ path('ajax_suggestion_load_next') }}" data-template-formal="{{ user_template_formal|e('html_attr') }}" data-template-informal="{{ user_template_informal|e('html_attr') }}" data-greeting-informal="{{ user_greeting_informal|e('html_attr') }}">
<div id="next-suggestion-loader-mobile" class="text-center mt-5" style="display: none;">
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">
Loading...
</span>
</div>
<p class="mt-3 ubuntu-medium text-muted">
Nous recherchons d'autres profils...
</p>
</div>
<div id="current-job-offer-header-mobile" class="container job-offer-header-section mb-3" style="display: none;">
<h2 id="current-job-title-mobile" class="ubuntu-bold fs-16 mb-1 d-flex align-items-center">
<i class="bi bi-briefcase-fill me-2 text-success"></i>
<a href="#" id="job-title-link-mobile" class="flex-grow-1 text-decoration-underline text-success" style="cursor: pointer;">
<span id="job-title-text-mobile">
Chargement de l'offre...
</span>
</a>
</h2>
</div>
<div class="profile-stack-container-mobile mb-4" id="tour-step-2-mobile">
{% for jobId, jobData in suggestionsByJob %}
{% set job = jobData.job %}
{% set currentSuggestionsInJob = jobData.suggestions %}
{% set suggestionCountForThisJobInLoop = currentSuggestionsInJob|length %}
{% if currentSuggestionsInJob|length > 0 %}
{% for suggestion in currentSuggestionsInJob %}
<div class="profile-card mb-4 rounded-2" data-profile-id="{{ suggestion.network.id }}" data-suggestion-id="{{ suggestion.id }}" data-job-id="{{ job.id }}" data-job-title="{{ job.title|escape('html_attr') }}" data-job-suggestion-count="{{ currentSuggestionsInJob|length }}" data-network-firstname="{{ suggestion.network.firstname|default('')|escape('html_attr') }}">
<div class="card-content-wrapper">
<div class="text-center mb-3">
{% if suggestion.network.photo %}
<img
src="{{ asset(suggestion.network.photo) }}" alt="{{ suggestion.network.firstname }} {{ suggestion.network.lastname }}" class="rounded-circle object-fit-cover mb-2" width="100" height="100">
{% else %}
<div class="initials-container">
{{ suggestion.network.firstname|slice(0, 1)|upper }}
{{ suggestion.network.lastname|slice(0, 1)|upper }}
</div>
{% endif %}
<div>
<h5 class="mb-3 ubuntu-medium">
{% if suggestion.network.linkedin %}
<a href="{{ suggestion.network.linkedin }}" target="_blank" class="text-dark text-decoration-none">
<i class="bi bi-linkedin me-1" style="color: #0A66C2;"></i>
{{ suggestion.network.firstname ~ ' ' ~ suggestion.network.lastname }}
</a>
{% else %}
{{ suggestion.network.firstname ~ ' ' ~ suggestion.network.lastname }}
{% endif %}
</h5>
<p class="mb-4 text-muted small ubuntu-light">
{{ suggestion.network.job }}
</p>
</div>
</div>
<div class="mb-3 ubuntu-regular ai-comment-container" style="font-size: 0.85rem;">
{% set lines = suggestion.comment|split('\n') %}
{% if lines|length > 0 %}
{% set hasBulletPoints = false %}
{% for line in lines %}
{% if line|trim|slice(0, 2) == '- ' %}
{% set hasBulletPoints = true %}
{% endif %}
{% endfor %}
{% if hasBulletPoints %}
<ul style="padding-left: 1.2rem; margin-bottom: 0; list-style-type: none;">
{% set bulletCount = 0 %}
{% for line in lines %}
{% set cleanLine = line|trim %}
{% if cleanLine is not empty and cleanLine|slice(0, 2) == '- ' and bulletCount < 2 %}
{% set bulletCount = bulletCount + 1 %}
<li style="margin-bottom: 0.5rem;">
<span style="color: #6c757d; margin-right: 0.5rem;">
•
</span>
{{ cleanLine|slice(2) }}
</li>
{% endif %}
{% endfor %}
</ul>
{% else %}
<p style="margin-bottom: 0;">
{{ suggestion.comment }}
</p>
{% endif %}
{% endif %}
</div>
<div class="mb-3 text-center">
<button class="btn btn-outline-primary btn-sm ubuntu btn-view-ai-analysis rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#aiAnalysisModal" data-suggestion-id="{{ suggestion.id }}">
En savoir plus...
</button>
</div>
<div class="bg-light pt-1 pb-3 px-2 rounded" id="tour-step-3-mobile">
<p class="mt-2 text-center fw-bold small mb-3 ubuntu-medium fs-13">
Comment lui envoyer l'opportunité ?
</p>
<div class="row gx-2">
<div class="col">
<a href="#" class="btn btn-outline-clover-light btn-action-formal ubuntu-regular w-100 px-3 py-2 fs-14" data-action="formal">
Vouvoyer
</a>
</div>
<div class="col">
<a href="#" class="btn btn-clover btn-action-informal ubuntu-regular w-100 px-3 py-2 fs-14" data-action="informal">
Tutoyer
</a>
</div>
</div>
<div class="text-center mt-3">
<a href="#" class="text-danger small btn-action-reject ubuntu-regular fs-14" data-action="reject">
<i class="bi bi-x-circle me-1"></i>
Ne pas lui envoyer l'opportunité
</a>
</div>
</div>
</div>
</div>
{% endfor %}
{% endif %}
{% endfor %}
</div>
</div>
{% else %}
{% if hasEverProcessed %}
<div class="mt-5 bg-white border rounded-2 p-5 text-center">
<div class="col-10 offset-1 text-center" style="max-width: 360px; margin: 0 auto;">
<h2 class="ubuntu-bold fs-4 mb-5">
Bravo ! 🥳 Vous avez partagé toutes les opportunités du moment.
</h2>
<p class="ubuntu-regular fs-5">
Nous vous avertirons dès qu’une nouvelle pépite sera dénichée.
</p>
<div class="d-flex justify-content-center mt-3">
<div class="spinner-border text-success" role="status" style="width: 3rem; height: 3rem;">
<span class="visually-hidden">
Chargement...
</span>
</div>
</div>
</div>
</div>
{% else %}
<div class="mt-5 bg-white border rounded-2 p-4 p-md-5 text-center">
<h2 class="ubuntu-bold fs-5 mb-4">
Notre IA est en train de dénicher les pépites de votre réseau
</h2>
<div class="col-12 text-center ubuntu-regular">
<ul class="list-unstyled d-inline-block text-start mb-4" style="font-size: 0.95rem;">
{% if not phoneForm %}
<li class="mb-2">
⏳ Cela peut prendre quelques heures voire quelques jours.
</li>
<li class="mb-2">
🗨️ Vous recevrez un SMS quand des talents seront identifiés.
</li>
<li class="mb-2">
📨 Vous leur partagerez alors les offres d'emploi en 1 clic depuis bambboo.
</li>
{% else %}
<li class="mb-2">
⏳ Cela peut prendre quelques heures voire quelques jours.
</li>
<li class="mb-2 phone-prompt-message">
🗨️ Laissez-nous votre numéro de téléphone pour recevoir un SMS quand des talents seront identifiés :
</li>
{% endif %}
</ul>
{% if phoneForm %}
<div class="phone-form-container col-12 col-md-6 offset-md-3 mb-4" data-phone-input-id="{{ phoneForm.phone_input.vars.id }}" data-phone-hidden-id="{{ phoneForm.phone.vars.id }}" data-phone-client-error-base-id="phone-client-error-{{ phoneForm.phone_input.vars.id }}">
{{ form_start(phoneForm, {'attr': {'class': 'user-phone-form', 'novalidate': 'novalidate' }}
) }}
<div class="mb-3 position-relative">
{{ form_widget(phoneForm.phone_input, {'attr': {'class': 'form-control form-control-lg' }}
) }}
{{ form_widget(phoneForm.phone) }}
<div id="phone-client-error-{{ phoneForm.phone_input.vars.id }}" class="phone-client-error"></div>
<div class="server-form-error">
{{ form_errors(phoneForm.phone) }}
</div>
<div class="phone-form-general-error server-form-error" style="display:none;"></div>
</div>
<button type="submit" class="btn btn-clover btn-lg">
Enregistrer mon numéro
</button>
{{ form_end(phoneForm) }}
</div>
{% endif %}
<div class="d-flex justify-content-center mt-3">
<div class="col-md-6 mt-5">
<lord-icon src="https://cdn.lordicon.com/okgbpdra.json" trigger="loop" colors="primary:#08a88a,secondary:#0b3a3c" style="width:250px;height:250px"></lord-icon>
</div>
</div>
</div>
</div>
{% endif %}
{% endif %}
</div>
</div>
{% endif %}
<div class="modal fade" id="jobDetailsModalMobile" tabindex="-1" aria-labelledby="jobDetailsModalMobileLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title ubuntu-bold" id="jobDetailsModalMobileLabel">
Détails de l'opportunité
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="jobDetailsModalMobileBody">
<div class="text-center py-5">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">
Chargement...
</span>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="modal fade" id="confirmShareModal" tabindex="-1" aria-labelledby="confirmShareModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content p-3 ubuntu-regular">
<div class="modal-header border-0">
<h5 class="modal-title" id="confirmShareModalLabel">
<i class="bi bi-lightbulb me-2" style="color: #f8c958;"></i>
<strong>
Partagez lui l'opportunité même si vous ne vous connaissez pas
</strong>
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="margin-top: -80px !important;"></button>
</div>
<div class="modal-body">
<p>
Au pire, on vous dira merci.
<br/>
Au mieux, ça va lui changer la vie.
</p>
</div>
<div class="modal-footer border-0 justify-content-center d-flex">
<button type="button" class="btn btn-secondary flex-fill" id="confirmShareModalRejectButton">
Non, vraiment pas
</button>
<button type="button" class="btn btn-clover flex-fill" id="confirmShareModalAcceptButton">
J'ai compris, je partage
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="refusalReasonModal" tabindex="-1" aria-labelledby="refusalReasonModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content p-3 ubuntu-regular">
<div class="modal-header">
<h5 class="modal-title" id="refusalReasonModalLabel">
<strong>
Pourquoi refusez-vous de partager l'opportunité avec ce profil ?
</strong>
<small class="text-muted" style="font-size: 0.6em;">
*obligatoire
</small>
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="margin-top: -80px !important;"></button>
</div>
<div class="modal-body">
<form id="refusalReasonForm">
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="refusalReason" id="reasonKnownNotGood" value="Je le connais et je le déconseille.">
<label class="form-check-label" for="reasonKnownNotGood">
Je le connais et je le déconseille.
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="refusalReason" id="reasonNotKnownEnough" value="Je ne le connais pas, mais il ne me semble pas pertinent.">
<label class="form-check-label" for="reasonNotKnownEnough">
Je ne le connais pas, mais il ne me semble pas pertinent.
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="refusalReason" id="reasonOther" value="Autre">
<label class="form-check-label" for="reasonOther">
Autre
</label>
</div>
<div class="mb-3" id="otherReasonTextContainer" style="display: none;">
<textarea class="form-control" id="otherReasonText" rows="3" placeholder="Indiquez-nous la raison pour laquelle vous souhaitez retirer cette personne de la liste des candidats."></textarea>
</div>
<div id="refusalError" class="text-danger small mb-2" style="display: none;">
Veuillez sélectionner une raison ou la spécifier.
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-clover" id="submitRefusalReasonButton">
Valider ma réponse
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="sendMessageModal" tabindex="-1" aria-labelledby="sendMessageModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content p-3 ubuntu-regular">
<div class="modal-header border-0">
<h5 class="modal-title" id="sendMessageModalLabel">
Votre message
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="sendMessageForm">
<div class="d-flex align-items-center mb-2">
<select class="form-select" id="messageGreetingSelect" style="width: auto;">
<option>
Bonjour
</option>
<option>
Salut
</option>
<option>
Hello
</option>
<option>
Hi
</option>
<option>
Coucou
</option>
</select>
<span id="messageGreetingName" class="ms-2 fw-bold"></span>
</div>
<div class="mb-3">
<textarea class="form-control" id="messageTextarea" rows="10" required></textarea>
</div>
<div class="form-check d-flex align-items-center">
<input class="form-check-input mt-0" type="checkbox" value="" id="saveAsTemplateCheckbox" style="margin-right: 10px;">
<label class="form-check-label" for="saveAsTemplateCheckbox" id="saveAsTemplateLabel" style="line-height: 1.2;"></label>
</div>
</form>
</div>
<div class="modal-footer border-0 justify-content-center">
<button type="button" class="btn btn-clover px-5" id="sendMessageModalSendButton">
Envoyer via LinkedIn
</button>
</div>
</div>
</div>
</div>
</div>
<style>
/* Mobile only (ne dépend pas de Bootstrap)
- caché par défaut (sécurité desktop)
- affiché uniquement sur < 768px */
.bambboo-mobile-only {
display: none;
}
@media (max-width: 767.98px) {
.bambboo-mobile-only {
display: block !important;
}
}
/* Desktop : 40% de largeur */
.offcanvas.linkedin-connect-offcanvas {
width: 40% !important;
}
/* IMPORTANT : s'assurer que l'attribut HTML "hidden" masque réellement l'élément
(certains styles peuvent override le [hidden] UA stylesheet). */
#linkedinConnectOffcanvas [hidden] {
display: none !important;
}
@media (max-width: 767.98px) {
.offcanvas.linkedin-connect-offcanvas,
.offcanvas.linkedin-connect-offcanvas.show,
.offcanvas.linkedin-connect-offcanvas.showing {
width: 100% !important;
max-width: 100% !important;
}
#linkedinConnectOffcanvas {
width: 100% !important;
max-width: 100% !important;
}
.linkedin-connect-offcanvas .offcanvas-body {
padding: 1rem !important;
}
.linkedin-connect-offcanvas .fs-16 {
font-size: 0.9rem !important;
}
.linkedin-connect-offcanvas .p-4 {
padding: 0.75rem !important;
}
#linkedin-login-form,
#linkedin-checkpoint-form {
padding-left: 1rem !important;
padding-right: 1rem !important;
padding-top: 1rem !important;
}
.linkedin-connect-offcanvas .linkedin-option-icon,
.linkedin-connect-offcanvas .me-3 {
width: 36px !important;
height: 36px !important;
}
}
.linkedin-option-btn-primary:hover {
background-color: #E0F2FF !important;
border-color: #005885 !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 119, 181, 0.2);
}
.linkedin-option-btn-primary:hover .me-3 {
background-color: #005885 !important;
transform: scale(1.05);
}
.linkedin-option-btn-secondary:hover {
background-color: #f8f9fa !important;
border-color: #0077B5 !important;
border-width: 2px !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.linkedin-option-btn-secondary:hover .linkedin-option-icon {
background-color: #0077B5 !important;
}
.linkedin-option-btn-secondary:hover .linkedin-option-icon .bi,
.linkedin-option-btn-secondary:hover .linkedin-option-icon i {
color: #fff !important;
}
.linkedin-option-btn-secondary:hover .linkedin-option-icon svg path {
stroke: white !important;
}
.linkedin-option-btn {
cursor: pointer;
}
/* Liste ordonnée "Mot de passe oublié ?" : éviter les doublons (marker natif VS compteur fallback) */
#forgot-password-content ol {
margin-left: 0 !important;
padding-left: 0 !important;
}
/* Par défaut (desktop) : masquer le titre mobile */
.browser-recovery-box-body .browser-recovery-mobile-title {
display: none !important;
}
/* Mobile : masquer uniquement l'en-tête de la boîte (garder les étapes) */
@media (max-width: 767.98px) {
.browser-recovery-box-header {
display: none !important;
}
/* Mobile : aérer les étapes + afficher un titre contextuel */
.browser-recovery-box-body {
padding-left: 0.75rem;
}
.browser-recovery-box-body .browser-recovery-mobile-title {
display: block !important;
}
}
/* Fallback (navigateurs sans ::marker) : compteur custom */
#forgot-password-content ol {
counter-reset: list-counter;
list-style: none;
}
#forgot-password-content ol li {
counter-increment: list-counter;
position: relative;
padding-left: 0;
}
#forgot-password-content ol li::before {
content: counter(list-counter) ".";
position: absolute;
left: 0;
color: #0077B5 !important;
font-weight: bold !important;
}
/* Si ::marker est supporté, on repasse sur la numérotation native et on désactive le fallback */
@supports selector(::marker) {
#forgot-password-content ol {
list-style: decimal;
counter-reset: none;
}
#forgot-password-content ol li {
counter-increment: none;
padding-left: 0;
position: static;
}
#forgot-password-content ol li::before {
content: none;
}
#forgot-password-content ol li::marker {
color: #0077B5 !important;
font-weight: bold !important;
font-size: 1em !important;
}
}
#forgot-password-toggle .bi-key {
color: #0abf7f !important;
font-weight: bold !important;
}
/* Zone tactile minimale pour le bouton œil (affichage mot de passe) sur mobile */
#linkedinConnectOffcanvas .password-toggle-btn {
min-width: 44px;
min-height: 44px;
cursor: pointer;
}
.linkedin-option-btn:active {
transform: translateY(0);
}
</style>


<div class="offcanvas offcanvas-end linkedin-connect-offcanvas" tabindex="-1" id="linkedinConnectOffcanvas" data-bs-backdrop="static" data-bs-keyboard="false"> <div class="offcanvas-header border-bottom d-flex justify-content-between align-items-center" style="padding: 1rem 1.5rem;">
<h5 class="offcanvas-title ubuntu-bold fs-16 d-flex align-items-center mb-0" id="linkedinConnectOffcanvasLabel" style="display: flex !important;">
<i class="bi bi-linkedin me-2" style="color: #0077B5; font-size: 1.5rem;"></i>
Connectez votre compte Linkedin
</h5>
<button type="button" class="btn btn-link text-dark p-0 ms-auto" data-bs-dismiss="offcanvas" aria-label="Close" style="opacity: 1; font-size: 1.5rem; text-decoration: none; line-height: 1;">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
<div class="offcanvas-body linkedin-offcanvas-body px-4 py-4">

<div id="linkedin-connection-options" class="d-none d-md-block">

<button type="button" class="btn btn-link text-decoration-none p-0 mb-3 w-100 text-start linkedin-option-btn linkedin-option-btn-primary" id="btn-connexion-infinie" style="border: 2px solid #0077B5; background-color: #F0F8FF; border-radius: 8px; transition: all 0.3s ease;">
<div class="p-4">
<div class="d-flex align-items-start">
<div class="me-3" style="width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background-color: #0077B5; border-radius: 8px; flex-shrink: 0; transition: all 0.3s ease;">
<i class="bi bi-shield-lock" style="color: white; font-size: 24px;"></i>
</div>
<div class="flex-grow-1">
<div class="d-flex align-items-start justify-content-between mb-2">
<h6 class="ubuntu-bold mb-0 fs-16" style="color: #1a1a1a;">
Connexion avec vos identifiants Linkedin
</h6>
<span class="badge bg-primary ubuntu-medium fs-16">
Recommandé
</span>
</div>
<p class="ubuntu-regular mb-0 fs-16" style="color: #666;">
Pour une connexion robuste et une reconnexion facile depuis n'importe quel appareil.
</p>
</div>
</div>
</div>
</button>

<button type="button" class="btn btn-link text-decoration-none p-0 mb-3 w-100 text-start linkedin-option-btn linkedin-option-btn-secondary d-none d-md-block" id="btn-connexion-extension" style="border: 1px solid #dee2e6; background-color: #ffffff; border-radius: 8px; transition: all 0.3s ease;">
<div class="p-4">
<div class="d-flex align-items-start">
<div class="me-3 linkedin-option-icon" style="width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa; border-radius: 8px; flex-shrink: 0; transition: all 0.3s ease;">
<i class="bi bi-puzzle" style="color: #666; font-size: 24px;"></i>
</div>
<div class="flex-grow-1">
<h6 class="ubuntu-bold mb-2 fs-16" style="color: #1a1a1a;">
Connexion avec l'extension bambboo
</h6>
<p class="ubuntu-regular mb-0 fs-16" style="color: #666;">
En cas de problème avec vos identifiants, l'extension bambboo permet d'utiliser la session Linkedin qui se trouve dans ce navigateur.
</p>
</div>
</div>
</div>
</button>
</div>

<div id="linkedin-extension-status" style="display: none;">
<button type="button" class="btn btn-link text-decoration-none p-0 mb-3 ubuntu-medium fs-16" id="btn-back-extension-install" style="color: #0077B5; padding: 0 !important;">
<i class="bi bi-arrow-left me-2"></i>
Retour
</button>
<div class="alert alert-primary mb-3 fs-16" id="extension-status-message" style="background-color: #E8F4F8; border-color: #0077B5; color: #004085;">
<div class="d-flex align-items-center">
<div class="spinner-border spinner-border-sm me-2" role="status" style="width: 1rem; height: 1rem;">
<span class="visually-hidden">
Chargement...
</span>
</div>
<span id="extension-status-text">
Vérification de l'extension...
</span>
</div>
</div>
<div class="alert alert-primary mb-3 fs-16" id="extension-connect-linkedin-message" style="display: none; background-color: #E8F4F8; border-color: #0077B5; color: #004085;">
👉 Maintenant connectez vous à Linkedin dans ce navigateur
</div>
<div class="alert alert-warning mb-3 fs-16" id="extension-error-message" style="display: none;">
<i class="fa-solid fa-exclamation-triangle me-2"></i>
<span id="extension-error-text"></span>
</div>
<div id="extension-install-block">
{% if not hasExtension %}
<h2 class="h5 ubuntu-bold mb-3 mt-0" style="color: #1a1a1a;">
Installez l'extension depuis le Chrome Store
</h2>
<div class="mb-3 fs-16" id="extension-download-alert" style="padding: 1rem; background-color: #f8f9fa; border-radius: 8px;">
<div class="row align-items-center">
<div class="col-md-6">
<ol class="list-unstyled mt-3 fs-6 mb-3">
<li class="mb-2">
<span>
1.
</span>
Vous allez être redirigé vers le Chrome Store
</li>
<li class="mb-2">
<span>
2.
</span>
Installez l'extension bambboo
</li>
<li class="mb-2">
<span>
3.
</span>
Puis revenez sur cette page
</li>
</ol>
</div>
<div class="col-md-6 text-center" style="position: relative;">
<img src="{{ asset('img/chrome-store.gif') }}" alt="Chrome Web Store" class="img-fluid" style="width: 100%; border-radius: 4px;" />
</div>
</div>
<div class="d-flex gap-2 mt-3">
<button type="button" class="btn btn-secondary flex-fill" id="btn-cancel-extension-install">
Annuler
</button>
<a href="https://chromewebstore.google.com/detail/bambboo/{{ chrome_extension_id }}" target="_blank" rel="noopener noreferrer" id="store-button" data-user-id="{{ app.user.id }}" class="btn btn-custom-green btn-clover flex-fill btn-install-extension-store">
Installer l'extension depuis le Chrome Store
</a>
</div>
</div>
{% endif %}
</div>
<div id="linkedin-oauth-button-container" style="display: none;" class="mb-3">
<a href="#" id="linkedin-oauth-button" class="btn btn-primary w-100" style="background-color: #0077B5; border-color: #0077B5;">
<i class="bi bi-linkedin me-2"></i>
Me connecter à LinkedIn
</a>
</div>
<div class="d-flex gap-2" id="extension-retry-container">
<button type="button" class="btn btn-primary flex-fill" id="btn-retry-extension" style="display: none; background-color: #0077B5; border-color: #0077B5;">
Réessayer
</button>
</div>
</div>

<div id="linkedin-login-form" class="d-block d-md-none" style="padding-left: 1rem; padding-right: 1rem; padding-top: 1rem;">
<div class="mb-3">
<label for="linkedin-email" class="form-label ubuntu-medium fs-16 mb-2">
Votre email Linkedin
</label>
<input type="email" class="form-control" id="linkedin-email" name="linkedin_email" placeholder="votre.email@example.com" required>
<div class="invalid-feedback" id="linkedin-email-error"></div>
</div>
<div class="mb-3">
<label for="linkedin-password" class="form-label ubuntu-medium fs-16 mb-2">
Votre mot de passe Linkedin
</label>
<div class="input-group">
<input type="password" class="form-control password-toggle-input" id="linkedin-password" name="linkedin_password" placeholder="mot de passe Linkedin" required>
<button type="button" class="input-group-text password-toggle-btn" aria-label="Afficher le mot de passe" title="Afficher le mot de passe">
<i class="fa-regular fa-eye"></i>
</button>
</div>
<div class="invalid-feedback" id="linkedin-password-error"></div>
</div>

<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="save-linkedin-credentials" name="save_credentials" value="1" checked>
<label class="form-check-label ubuntu-regular fs-16" for="save-linkedin-credentials" style="color: #1a1a1a;">
Se souvenir de moi
</label>
</div>
</div>
<div class="alert alert-danger mb-3 fs-16" id="linkedin-form-error" style="display: none;"></div>
<div class="d-flex gap-2">
<button type="button" class="btn btn-secondary flex-fill" id="btn-cancel-linkedin" data-bs-dismiss="offcanvas" aria-label="Fermer">
Annuler
</button>
<button type="button" class="btn btn-primary flex-fill" id="btn-submit-linkedin" style="background-color: #0077B5; border-color: #0077B5;">
<span class="spinner-border spinner-border-sm me-2" id="linkedin-spinner" style="display: none;" role="status" aria-hidden="true"></span>
<span class="btn-submit-linkedin-label">
Me connecter
</span>
</button>
</div>
<div class="linkedin-patienter-message alert alert-info mt-2 mb-0 fs-16 ubuntu-regular" style="opacity: 0; transition: opacity 0.3s ease; display: none;" role="status">
Merci de patienter encore quelques secondes…
</div>
<hr/>

<div class="mb-3 mt-4" id="forgot-password-section-mobile">
<a href="#" class="ubuntu-medium fs-16 mb-3" style="color: #1a1a1a; text-decoration: none; cursor: pointer;" id="forgot-password-toggle">
<i class="bi bi-key me-2" style="color: #0abf7f !important; font-weight: bold !important;"></i>
Mot de passe oublié ?
</a>
<div id="forgot-password-content" style="display: none;">

<div id="browser-recovery-box-mobile" class="mt-3 mb-3 p-3 rounded" style="background-color: #F0F8FF; border: 1px solid #E0F0FF;">
<div class="d-flex align-items-start browser-recovery-box-header">
<div class="me-3" style="flex-shrink: 0;">
<i id="browser-icon-mobile" class="fa-solid fa-browser" style="font-size: 2rem; color: #666;"></i>
</div>
<div class="flex-grow-1">
<h3 class="ubuntu-bold fs-16 mb-2" style="color: #1a1a1a;">
Récupérer depuis votre navigateur
</h3>
<p class="ubuntu-regular fs-16 mb-3" style="color: #1a1a1a;">
Si votre mot de passe est enregistré dans votre navigateur
</p>
</div>
</div>
<div class="browser-recovery-box-body">
<div class="browser-recovery-mobile-title ubuntu-bold fs-16 mb-2" style="color: #1a1a1a;">
Depuis votre mobile
</div>
<div id="forgot-password-desktop" style="display: none;">
<ol class="ubuntu-regular fs-16 mb-0" style="color: #1a1a1a;">
<li class="mb-2">
Copiez cette URL
<div class="d-flex align-items-center gap-2 mt-2">
<input type="text" class="form-control form-control-sm" id="password-manager-url-mobile" value="" readonly style="font-size: 0.75rem; cursor: pointer; width: 50%;" onclick="copyPasswordManagerUrl()">
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="copyPasswordManagerUrl()" title="Copier dans le presse-papier">
<i class="fa-regular fa-copy"></i>
</button>
</div>
</li>
<li class="mb-2">
Ouvrez un nouvel onglet et coller l'URL
</li>
<li class="mb-2">
Recherchez le mot de passe Linkedin
</li>
<li>
Copiez le mot de passe enregistré et revenez ici
</li>
</ol>
</div>
<div id="forgot-password-android" style="display: none;">
<ol class="ubuntu-regular fs-16 mb-0" style="color: #1a1a1a;">
<li class="mb-2">
Ouvrez le gestionnaire de mots de passe Google :
<div class="mt-2">
<a href="https://passwords.google.com/" target="_blank" class="btn btn-sm btn-primary" style="background-color: #0077B5; border-color: #0077B5;">
<i class="bi bi-box-arrow-up-right me-1"></i>
Ouvrir Google Password Manager
</a>
</div>
</li>
<li class="mb-2">
Ou accédez via les paramètres Android :
<div class="mt-2" style="color: #666; font-size: 0.85rem;">
Paramètres → Google → Gestionnaire de mots de passe
</div>
</li>
<li>
Recherchez "LinkedIn" dans la liste
</li>
</ol>
</div>
<div id="forgot-password-ios" style="display: none;">
<ol class="ubuntu-regular fs-16 mb-0" style="color: #1a1a1a;">
<li class="mb-2">
Ouvrez l'app
<strong style="color: #0077B5;">
Mots de passe
</strong>
</li>
<li class="mb-2">
Déverrouillez avec
<strong style="color: #0077B5;">
Face ID
</strong>
ou
<strong style="color: #0077B5;">
Touch ID
</strong>
</li>
<li class="mb-2">
Recherchez
<strong style="color: #0077B5;">
LinkedIn
</strong>
</li>
<li>
Copiez le mot de passe
</li>
</ol>
</div>
<div id="forgot-password-safari-desktop" style="display: none;">
<ol class="ubuntu-regular fs-16 mb-0" style="color: #1a1a1a;">
<li class="mb-2">
Ouvrez Réglages de votre navigateur
</li>
<li class="mb-2">
Allez dans Mots de passe
</li>
<li>
Recherchez Linkedin
</li>
</ol>
</div>
</div>
</div>

<div class="mb-3 p-3 rounded" style="background-color: #f8f9fa; border: 1px solid #e9ecef;">
<div class="d-flex align-items-start">
<div class="me-3" style="flex-shrink: 0;">
<i class="bi bi-question-circle" style="font-size: 2rem; color: #666;"></i>
</div>
<div class="flex-grow-1">
<h3 class="ubuntu-bold fs-16 mb-2" style="color: #1a1a1a;">
Besoin d'aide?
</h3>
<p class="ubuntu-regular fs-16 mb-3" style="color: #1a1a1a;">
Notre équipe support peut vous accompagner
</p>
<a href="javascript:void(0)" class="text-decoration-none" style="color: #0077B5;" data-bs-toggle="modal" data-bs-target="#modal-support" data-support-source="suggestion_page" role="button">
Contacter le support
</a>
</div>
</div>
</div>
</div>
</div>
</div>

<div id="linkedin-checkpoint-form" style="display: none; padding-left: 2rem; padding-right: 2rem; padding-top: 2rem;">
<div class="mb-3 fs-16 text-center" id="linkedin-checkpoint-message">
<h2 id="linkedin-in-app-validation-title" class="ubuntu-bold fs-16 mb-3" style="display: none;">
Rendez-vous sur votre application Linkedin…
</h2>
<p id="linkedin-checkpoint-message-text" class="ubuntu-bold mb-0">
Saisissez le code reçu par SMS ou par e-mail :
</p>
<div id="linkedin-in-app-validation-spinner" class="d-flex justify-content-center mt-3" style="display: none;">
<div role="status" aria-label="Chargement">
<i class="fa-solid fa-circle-notch fa-spin" style="font-size: 2rem; color: #0d6efd;"></i>
</div>
</div>
{% if mobile_detect.isMobile() %}
<div class="mt-3 text-center">
<a href="https://www.linkedin.com" target="_blank" rel="noopener noreferrer" id="linkedin-in-app-validation-open-linkedin" class="btn btn-primary w-100" style="display: none; background-color: #0077B5; border-color: #0077B5;">
<i class="bi bi-linkedin me-2"></i>
Ouvrir LinkedIn
</a>
</div>
{% endif %}
<div class="mt-3" id="linkedin-in-app-validation-no-notif-wrapper" style="display: none;">
{% if mobile_detect.isMobile() %}
<div class="text-center">
<div class="mt-3 border rounded-3 overflow-hidden" style="background-color: #f8f9fa;">
<a href="#" id="linkedin-in-app-validation-no-notif-toggle" class="d-flex align-items-center justify-content-between text-decoration-none px-3 py-3" style="color: #1a1a1a;" aria-expanded="false">
<span class="ubuntu-bold">
<i class="bi bi-lightbulb me-2" style="color: #f4c542;"></i>
Vous n'avez pas reçu la notification ?
</span>
<i class="bi bi-chevron-down"></i>
</a>
<div id="linkedin-in-app-validation-no-notif-content-ios" style="display: none;" class="px-3 pb-3 text-start">
<p class="ubuntu-regular mb-2" style="color: #1a1a1a;">
Vérifiez que les notifications LinkedIn sont activées dans les réglages de votre téléphone
</p>
<div class="ubuntu-regular" style="color: #1a1a1a;">
<strong>
Sur iPhone
</strong>
, Réglages > Notifications > LinkedIn > Autoriser les notifications
</div>
</div>
<div id="linkedin-in-app-validation-no-notif-content-other" style="display: none;" class="px-3 pb-3 text-start">
<p class="ubuntu-regular mb-2" style="color: #1a1a1a;">
Vérifiez que les notifications LinkedIn sont activées dans les réglages de votre téléphone
</p>
<div class="ubuntu-regular" style="color: #1a1a1a;">
<strong>
Sur Android
</strong>
, Paramètres > Applications > LinkedIn > Notifications > Autoriser les notifications
</div>
</div>
</div>
</div>
{% else %}
<div class="text-center">
<div class="mt-3 border rounded-3 overflow-hidden" style="background-color: #f8f9fa;">
<a href="#" id="linkedin-in-app-validation-no-notif-toggle" class="d-flex align-items-center justify-content-between text-decoration-none px-3 py-3" style="color: #1a1a1a;" aria-expanded="false">
<span class="ubuntu-bold">
<i class="bi bi-lightbulb me-2" style="color: #f4c542;"></i>
Vous n'avez pas reçu la notification ?
</span>
<i class="bi bi-chevron-down"></i>
</a>
<div id="linkedin-in-app-validation-no-notif-content-ios" style="display: none;" class="px-3 pb-3 text-start">
<p class="ubuntu-regular mb-2" style="color: #1a1a1a;">
Vérifiez que les notifications LinkedIn sont activées dans les réglages de votre téléphone
</p>
<div class="ubuntu-regular" style="color: #1a1a1a;">
<strong>
Sur iPhone
</strong>
, Réglages > Notifications > LinkedIn > Autoriser les notifications
</div>
</div>
<div id="linkedin-in-app-validation-no-notif-content-other" style="display: none;" class="px-3 pb-3 text-start">
<p class="ubuntu-regular mb-2" style="color: #1a1a1a;">
Vérifiez que les notifications LinkedIn sont activées dans les réglages de votre téléphone
</p>
<div class="ubuntu-regular" style="color: #1a1a1a;">
<strong>
Sur Android
</strong>
, Paramètres > Applications > LinkedIn > Notifications > Autoriser les notifications
</div>
</div>
</div>
</div>
{% endif %}
</div>
<p id="linkedin-in-app-validation-footer" class="text-muted small mt-3 mb-0 text-center" style="display: none;">
La connexion se fera automatiquement une fois validée.
</p>
</div>
<div class="alert alert-info mb-3 fs-16" id="linkedin-checkpoint-phone-alert" style="display: none;">
<span id="linkedin-checkpoint-phone-text"></span>
</div>
<div class="mb-3" id="linkedin-checkpoint-code-container">
<label for="linkedin-checkpoint-code" class="form-label ubuntu-regular fs-16 mb-2">
Code de vérification
</label>
<input type="text" class="form-control" id="linkedin-checkpoint-code" name="linkedin_checkpoint_code" placeholder="Entrez le code à 6 chiffres" maxlength="6">
<div class="invalid-feedback" id="linkedin-checkpoint-code-error"></div>
</div>
<div class="alert alert-danger mb-3 fs-16" id="linkedin-checkpoint-form-error" style="display: none;"></div>
<div data-checkpoint-actions="1">
<div class="d-flex gap-2 mb-2">
<button type="button" class="btn btn-primary flex-fill" id="btn-submit-checkpoint" style="background-color: #0077B5; border-color: #0077B5;">
<span class="spinner-border spinner-border-sm me-2" id="linkedin-checkpoint-spinner" style="display: none;" role="status" aria-hidden="true"></span>
Vérifier
</button>
<button type="button" class="btn btn-primary flex-fill" id="btn-retry-checkpoint" style="display: none; background-color: #0077B5; border-color: #0077B5;">
<i class="fa-solid fa-rotate-right me-1"></i>
Renvoyer la notification
</button>
</div>
<div class="text-center">
<button type="button" class="btn btn-link p-0 text-decoration-underline border-0 bg-transparent ubuntu-regular fs-16" id="btn-cancel-checkpoint" aria-label="Annuler la connexion" style="color: #1a1a1a;">
Annuler
</button>
</div>
</div>
</div>
</div>



</div>
</div>
{% else %}
{% if not app.user.identityUid %}

<div id="connect-linkedin-container" class="container-fluid h-100">
<div class="row h-100 justify-content-center align-items-center text-center">
<div class="col-md-8 col-lg-6 d-flex justify-content-center">
<div class="text-center p-5 rounded-3" style="background-color: #ffffff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); max-width: 900px; width: 100%;">

<div class="mb-4 d-flex justify-content-center">
<img src="{{ asset('img/connect-to-linkedin.png') }}" alt="Connectez votre compte LinkedIn" class="img-fluid" style="max-width: 60%; height: auto;"></div>

<h2 class="ubuntu-bold fs-5 mb-2" style="color: #1a1a1a;">
Connectez votre compte Linkedin
</h2>
<p class="ubuntu-regular mb-4 fs-16" style="color: #1a1a1a;">
Pour utiliser bambboo, vous devez connecter votre compte Linkedin.
</p>

<div class="mb-4">
<div class="accordion" id="accordionEngagementsDesktop">
<div class="accordion-item" style="border: none; background-color: #f8f9fa; border-radius: 8px;">
<h2 class="accordion-header" id="headingEngagementsDesktop">
<button class="accordion-button collapsed ubuntu-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEngagementsDesktop" aria-expanded="false" aria-controls="collapseEngagementsDesktop" style="background-color: #f8f9fa; color: #004d40; font-size: 1rem; box-shadow: none; padding: 1rem 1.25rem;">
<img src="{{ asset('img/logomark.svg') }}" alt="bambboo" style="width: 24px; height: 24px; margin-right: 0.5rem; flex-shrink: 0;">
<span class="flex-grow-1">
Nos engagements de confidentialité
</span>
<i class="bi bi-chevron-down ms-2" style="color: #004d40; flex-shrink: 0;"></i>
<i class="bi bi-chevron-up ms-2 d-none" style="color: #004d40; flex-shrink: 0;"></i>
</button>
</h2>
<div id="collapseEngagementsDesktop" class="accordion-collapse collapse" aria-labelledby="headingEngagementsDesktop" data-bs-parent="#accordionEngagementsDesktop">
<div class="accordion-body text-start py-4 px-3" style="background-color: #f8f9fa;">
<ul class="mb-0 ps-0" style="list-style: none; padding-left: 0;">
<li class="mb-2 d-flex align-items-center" style="min-width: 0; flex: 1;">
<i class="bi bi-check-lg me-2" style="color: #198754; font-size: 1rem; font-weight: bold; flex-shrink: 0;"></i>
<span class="ubuntu-regular" style="color: #555; font-size: 0.95rem; word-wrap: break-word; overflow-wrap: break-word;">
bambboo n'accède qu'aux données publiques de vos contacts LinkedIn
</span>
</li>
<li class="mb-2 d-flex align-items-center" style="min-width: 0; flex: 1;">
<i class="bi bi-check-lg me-2" style="color: #198754; font-size: 1rem; font-weight: bold; flex-shrink: 0;"></i>
<span class="ubuntu-regular" style="color: #555; font-size: 0.95rem; word-wrap: break-word; overflow-wrap: break-word;">
L'usage des données a pour seule finalité d'identifier des opportunités professionnelles
</span>
</li>
<li class="mb-2 d-flex align-items-center" style="min-width: 0; flex: 1;">
<i class="bi bi-check-lg me-2" style="color: #198754; font-size: 1rem; font-weight: bold; flex-shrink: 0;"></i>
<span class="ubuntu-regular" style="color: #555; font-size: 0.95rem; word-wrap: break-word; overflow-wrap: break-word;">
bambboo ne récolte aucune donnée sensible de vos contacts (ni tél., ni email)
</span>
</li>
<li class="mb-2 d-flex align-items-center" style="min-width: 0; flex: 1;">
<i class="bi bi-check-lg me-2" style="color: #198754; font-size: 1rem; font-weight: bold; flex-shrink: 0;"></i>
<span class="ubuntu-regular" style="color: #555; font-size: 0.95rem; word-wrap: break-word; overflow-wrap: break-word;">
bambboo n'accède à aucun de vos messages ni activités LinkedIn
</span>
</li>
<li class="mb-0 d-flex align-items-center" style="min-width: 0; flex: 1;">
<i class="bi bi-check-lg me-2" style="color: #198754; font-size: 1rem; font-weight: bold; flex-shrink: 0;"></i>
<span class="ubuntu-regular" style="color: #555; font-size: 0.95rem; word-wrap: break-word; overflow-wrap: break-word;">
bambboo applique le RGPD avec rigueur et transparence
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary px-4 py-2 ubuntu-medium" data-bs-toggle="offcanvas" data-bs-target="#linkedinConnectOffcanvas" aria-controls="linkedinConnectOffcanvas" style="background-color: #0077B5; border-color: #0077B5;">
Connecter mon compte LinkedIn
</button>
</div>
</div>
</div>
</div>

<div class="offcanvas offcanvas-end linkedin-connect-offcanvas" tabindex="-1" id="linkedinConnectOffcanvas" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="offcanvas-header border-bottom d-flex justify-content-between align-items-center" style="padding: 1rem 1.5rem;">
<h5 class="offcanvas-title ubuntu-bold fs-16 d-flex align-items-center mb-0" id="linkedinConnectOffcanvasLabel" style="display: flex !important;">
<i class="bi bi-linkedin me-2" style="color: #0077B5; font-size: 1.5rem;"></i>
Connectez votre compte Linkedin
</h5>
<button type="button" class="btn btn-link text-dark p-0 ms-auto" data-bs-dismiss="offcanvas" aria-label="Close" style="opacity: 1; font-size: 1.5rem; text-decoration: none; line-height: 1;">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
<div class="offcanvas-body linkedin-offcanvas-body px-4 py-4">
<div id="linkedin-connection-options">
<button type="button" class="btn btn-link text-decoration-none p-0 mb-3 w-100 text-start linkedin-option-btn linkedin-option-btn-primary" id="btn-connexion-infinie" style="border: 2px solid #0077B5; background-color: #F0F8FF; border-radius: 8px; transition: all 0.3s ease;">
<div class="p-4">
<div class="d-flex align-items-start">
<div class="me-3" style="width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background-color: #0077B5; border-radius: 8px; flex-shrink: 0; transition: all 0.3s ease;">
<i class="bi bi-shield-lock" style="color: white; font-size: 24px;"></i>
</div>
<div class="flex-grow-1">
<div class="d-flex align-items-start justify-content-between mb-2">
<h6 class="ubuntu-bold mb-0 fs-16" style="color: #1a1a1a;">
Connexion avec vos identifiants Linkedin
</h6>
<span class="badge bg-primary ubuntu-medium fs-16">
Recommandé
</span>
</div>
<p class="ubuntu-regular mb-0 fs-16" style="color: #666;">
Pour une connexion robuste et une reconnexion facile depuis n'importe quel appareil.
</p>
</div>
</div>
</div>
</button>
<button type="button" class="btn btn-link text-decoration-none p-0 mb-3 w-100 text-start linkedin-option-btn linkedin-option-btn-secondary d-none d-md-block" id="btn-connexion-extension" style="border: 1px solid #dee2e6; background-color: #ffffff; border-radius: 8px; transition: all 0.3s ease;">
<div class="p-4">
<div class="d-flex align-items-start">
<div class="me-3 linkedin-option-icon" style="width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa; border-radius: 8px; flex-shrink: 0; transition: all 0.3s ease;">
<i class="bi bi-puzzle" style="color: #666; font-size: 24px;"></i>
</div>
<div class="flex-grow-1">
<h6 class="ubuntu-bold mb-2 fs-16" style="color: #1a1a1a;">
Connexion avec l'extension bambboo
</h6>
<p class="ubuntu-regular mb-0 fs-16" style="color: #666;">
En cas de problème avec vos identifiants, l'extension bambboo permet d'utiliser la session Linkedin qui se trouve dans ce navigateur.
</p>
</div>
</div>
</div>
</button>
</div>

<div id="linkedin-extension-status" style="display: none;">
<button type="button" class="btn btn-link text-decoration-none p-0 mb-3 ubuntu-medium fs-16" id="btn-back-extension-install" style="color: #0077B5; padding: 0 !important;">
<i class="bi bi-arrow-left me-2"></i>
Retour
</button>
<div class="alert alert-primary mb-3 fs-16" id="extension-status-message" style="background-color: #E8F4F8; border-color: #0077B5; color: #004085;">
<div class="d-flex align-items-center">
<div class="spinner-border spinner-border-sm me-2" role="status" style="width: 1rem; height: 1rem;">
<span class="visually-hidden">
Chargement...
</span>
</div>
<span id="extension-status-text">
Vérification de l'extension...
</span>
</div>
</div>
<div class="alert alert-primary mb-3 fs-16" id="extension-connect-linkedin-message" style="display: none; background-color: #E8F4F8; border-color: #0077B5; color: #004085;">
👉 Maintenant connectez vous à Linkedin dans ce navigateur
</div>
<div class="alert alert-warning mb-3 fs-16" id="extension-error-message" style="display: none;">
<i class="fa-solid fa-exclamation-triangle me-2"></i>
<span id="extension-error-text"></span>
</div>
<div id="extension-install-block">
{% if not hasExtension %}
<h2 class="h5 ubuntu-bold mb-3 mt-0" style="color: #1a1a1a;">
Installez l'extension depuis le Chrome Store
</h2>
<div class="mb-3 fs-16" id="extension-download-alert" style="padding: 1rem; background-color: #f8f9fa; border-radius: 8px;">
<div class="row align-items-center">
<div class="col-md-6">
<ol class="list-unstyled mt-3 fs-6 mb-3">
<li class="mb-2">
<span>
1.
</span>
Vous allez être redirigé vers le Chrome Store
</li>
<li class="mb-2">
<span>
2.
</span>
Installez l'extension bambboo
</li>
<li class="mb-2">
<span>
3.
</span>
Puis revenez sur cette page
</li>
</ol>
</div>
<div class="col-md-6 text-center" style="position: relative;">
<img src="{{ asset('img/chrome-store.gif') }}" alt="Chrome Web Store" class="img-fluid" style="width: 100%; border-radius: 4px;" />
</div>
</div>
<div class="d-flex gap-2 mt-3">
<button type="button" class="btn btn-secondary flex-fill" id="btn-cancel-extension-install">
Annuler
</button>
<a href="https://chromewebstore.google.com/detail/bambboo/{{ chrome_extension_id }}" target="_blank" rel="noopener noreferrer" id="store-button" data-user-id="{{ app.user.id }}" class="btn btn-custom-green btn-clover flex-fill btn-install-extension-store">
Installer l'extension depuis le Chrome Store
</a>
</div>
</div>
{% endif %}
</div>
<div id="linkedin-oauth-button-container" style="display: none;" class="mb-3">
<a href="#" id="linkedin-oauth-button" class="btn btn-primary w-100" style="background-color: #0077B5; border-color: #0077B5;">
<i class="bi bi-linkedin me-2"></i>
Me connecter à LinkedIn
</a>
</div>
<div class="d-flex gap-2" id="extension-retry-container">
<button type="button" class="btn btn-primary flex-fill" id="btn-retry-extension" style="display: none; background-color: #0077B5; border-color: #0077B5;">
Réessayer
</button>
</div>
</div>

<div id="linkedin-login-form" style="display: none; padding-left: 2rem; padding-right: 2rem; padding-top: 2rem;">
<button type="button" class="btn btn-link text-decoration-none p-0 mb-4 ubuntu-medium fs-16" id="btn-back-to-options" style="color: #0077B5; padding: 0 !important; line-height: 1.4;">
<i class="bi bi-arrow-left me-2"></i>
Retour
</button>

<div class="mb-4" data-linkedin-pre-step="1">
<p class="ubuntu-regular fs-16 mb-4" style="color: #1a1a1a; line-height: 1.6;">
Votre application Linkedin doit être ouverte pour connecter votre compte.
</p>
<div class="d-flex flex-nowrap gap-2">
<button type="button" class="btn ubuntu-medium fs-16 flex-fill linkedin-prestep-btn" data-linkedin-show-fields="1" data-linkedin-opened-app="0" style="background-color: #e9ecef; border-color: #dee2e6; color: #1a1a1a;">
Je n’ai pas l’appli Linkedin
</button>
<button type="button" class="btn btn-primary ubuntu-medium fs-16 flex-fill linkedin-prestep-btn" data-linkedin-show-fields="1" data-linkedin-opened-app="1" style="background-color: #0077B5; border-color: #0077B5;">
J’ai ouvert l’appli Linkedin
</button>
</div>
</div>
<div data-linkedin-login-fields="1">
<div class="mb-3">
<label for="linkedin-email" class="form-label ubuntu-medium fs-16 mb-2">
Votre email Linkedin
</label>
<input type="email" class="form-control" id="linkedin-email" name="linkedin_email" placeholder="votre.email@example.com" required>
<div class="invalid-feedback" id="linkedin-email-error"></div>
</div>
<div class="mb-3">
<label for="linkedin-password" class="form-label ubuntu-medium fs-16 mb-2">
Votre mot de passe Linkedin
</label>
<div class="input-group">
<input type="password" class="form-control password-toggle-input" id="linkedin-password" name="linkedin_password" placeholder="mot de passe Linkedin" required>
<button type="button" class="input-group-text password-toggle-btn" aria-label="Afficher le mot de passe" title="Afficher le mot de passe">
<i class="fa-regular fa-eye"></i>
</button>
</div>
<div class="invalid-feedback" id="linkedin-password-error"></div>
</div>

<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="save-linkedin-credentials-desktop" name="save_credentials" value="1" checked>
<label class="form-check-label ubuntu-regular fs-16" for="save-linkedin-credentials-desktop" style="color: #1a1a1a;">
Se souvenir de moi
</label>
</div>
</div>
<div class="alert alert-danger mb-3 fs-16" id="linkedin-form-error" style="display: none;"></div>
<div class="d-flex gap-2">
<button type="button" class="btn btn-secondary flex-fill" id="btn-cancel-linkedin" data-bs-dismiss="offcanvas" aria-label="Fermer">
Annuler
</button>
<button type="button" class="btn btn-primary flex-fill" id="btn-submit-linkedin" style="background-color: #0077B5; border-color: #0077B5;">
<span class="spinner-border spinner-border-sm me-2" id="linkedin-spinner" style="display: none;" role="status" aria-hidden="true"></span>
<span class="btn-submit-linkedin-label">
Me connecter
</span>
</button>
</div>
<div class="linkedin-patienter-message alert alert-info mt-2 mb-0 fs-16 ubuntu-regular" style="opacity: 0; transition: opacity 0.3s ease; display: none;" role="status">
Merci de patienter encore quelques secondes…
</div>
<hr/>
<div class="mb-3 mt-4" id="forgot-password-section">
<a href="#" class="ubuntu-medium fs-16 mb-3" style="color: #1a1a1a; text-decoration: none;" id="forgot-password-toggle" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">
<i class="bi bi-key me-2" style="color: #0abf7f !important; font-weight: bold !important;"></i>
Mot de passe oublié ?
</a>
<div id="forgot-password-content" style="display: none;">
<div id="browser-recovery-box" class="mt-3 mb-3 p-3 rounded" style="background-color: #F0F8FF; border: 1px solid #E0F0FF;">
<div class="d-flex align-items-start browser-recovery-box-header">
<div class="me-3" style="flex-shrink: 0;">
<i id="browser-icon" class="fa-solid fa-browser" style="font-size: 2rem; color: #666;"></i>
</div>
<div class="flex-grow-1">
<h3 class="ubuntu-bold fs-16 mb-2" style="color: #1a1a1a;">
Récupérer depuis votre navigateur
</h3>
<p class="ubuntu-regular fs-16 mb-3" style="color: #1a1a1a;">
Si votre mot de passe est enregistré dans votre navigateur
</p>
</div>
</div>
<div class="browser-recovery-box-body">
<div id="forgot-password-desktop" style="display: none;">
<ol class="ubuntu-regular fs-16 mb-0" style="color: #1a1a1a;">
<li class="mb-2">
Copiez cette URL
<div class="d-flex align-items-center gap-2 mt-2">
<input type="text" class="form-control form-control-sm" id="password-manager-url" value="" readonly style="font-size: 0.75rem; cursor: pointer; width: 50%;" onclick="copyPasswordManagerUrl()">
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="copyPasswordManagerUrl()" title="Copier dans le presse-papier">
<i class="fa-regular fa-copy"></i>
</button>
</div>
</li>
<li class="mb-2">
Ouvrez un nouvel onglet et coller l'URL
</li>
<li class="mb-2">
Recherchez le mot de passe Linkedin
</li>
<li>
Copiez le mot de passe enregistré et revenez ici
</li>
</ol>
</div>
<div id="forgot-password-android" style="display: none;">
<ol class="ubuntu-regular fs-16 mb-0" style="color: #1a1a1a;">
<li class="mb-2">
Ouvrez le gestionnaire de mots de passe Google :
<div class="mt-2">
<a href="https://passwords.google.com/" target="_blank" class="btn btn-sm btn-primary" style="background-color: #0077B5; border-color: #0077B5;">
<i class="bi bi-box-arrow-up-right me-1"></i>
Ouvrir Google Password Manager
</a>
</div>
</li>
<li class="mb-2">
Ou accédez via les paramètres Android :
<div class="mt-2" style="color: #666; font-size: 0.85rem;">
Paramètres → Google → Gestionnaire de mots de passe
</div>
</li>
<li>
Recherchez "LinkedIn" dans la liste
</li>
</ol>
</div>
<div id="forgot-password-ios" style="display: none;">
<ol class="ubuntu-regular fs-16 mb-0" style="color: #1a1a1a;">
<li class="mb-2">
Ouvrez l'app
<strong style="color: #0077B5;">
Mots de passe
</strong>
</li>
<li class="mb-2">
Déverrouillez avec
<strong style="color: #0077B5;">
Face ID
</strong>
ou
<strong style="color: #0077B5;">
Touch ID
</strong>
</li>
<li class="mb-2">
Recherchez
<strong style="color: #0077B5;">
LinkedIn
</strong>
</li>
<li>
Copiez le mot de passe
</li>
</ol>
</div>
<div id="forgot-password-safari-desktop" style="display: none;">
<ol class="ubuntu-regular fs-16 mb-0" style="color: #1a1a1a;">
<li class="mb-2">
Ouvrez Réglages de votre navigateur
</li>
<li class="mb-2">
Allez dans Mots de passe
</li>
<li>
Recherchez Linkedin
</li>
</ol>
</div>
</div>
</div>
<div class="mb-3 p-3 rounded" style="background-color: #f8f9fa; border: 1px solid #e9ecef;">
<div class="d-flex align-items-start">
<div class="me-3" style="flex-shrink: 0;">
<i class="bi bi-question-circle" style="font-size: 2rem; color: #666;"></i>
</div>
<div class="flex-grow-1">
<h3 class="ubuntu-bold fs-16 mb-2" style="color: #1a1a1a;">
Besoin d'aide?
</h3>
<p class="ubuntu-regular fs-16 mb-3" style="color: #1a1a1a;">
Notre équipe support peut vous accompagner
</p>
<a href="javascript:void(0)" class="text-decoration-none" style="color: #0077B5;" data-bs-toggle="modal" data-bs-target="#modal-support" data-support-source="suggestion_page" role="button">
Contacter le support
</a>
</div>
</div>
</div>
</div>

<div class="toast-container position-fixed bottom-0 end-0 p-3" style="z-index: 1055;">
<div id="copy-toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header bg-success text-white">
<i class="bi bi-check-circle-fill me-2"></i>
<strong class="me-auto">
Message copié
</strong>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
L'URL a été copiée dans le presse-papier.
</div>
</div>
</div>
</div>
</div>
</div>
<div id="linkedin-checkpoint-form" style="display: none; padding-left: 2rem; padding-right: 2rem; padding-top: 2rem;">
<div class="mb-3 fs-16 text-center" id="checkpoint-message">
<h2 id="checkpoint-in-app-validation-title" class="ubuntu-bold fs-16 mb-3" style="display: none;">
Rendez-vous sur votre application Linkedin…
</h2>
<p id="checkpoint-message-text" class="ubuntu-bold mb-0"></p>
<div id="checkpoint-in-app-validation-spinner" class="d-flex justify-content-center mt-3" style="display: none;">
<div role="status" aria-label="Chargement">
<i class="fa-solid fa-circle-notch fa-spin" style="font-size: 2rem; color: #0d6efd;"></i>
</div>
</div>
{% if mobile_detect.isMobile() %}
<div class="mt-3 text-center">
<a href="https://www.linkedin.com" target="_blank" rel="noopener noreferrer" id="checkpoint-in-app-validation-open-linkedin" class="btn btn-primary w-100" style="display: none; background-color: #0077B5; border-color: #0077B5;">
<i class="bi bi-linkedin me-2"></i>
Ouvrir LinkedIn
</a>
</div>
{% endif %}
<div class="mt-3" id="checkpoint-in-app-validation-no-notif-wrapper" style="display: none;">
{% if mobile_detect.isMobile() %}
<div class="text-center">
<div class="mt-3 border rounded-3 overflow-hidden" style="background-color: #f8f9fa;">
<a href="#" id="checkpoint-in-app-validation-no-notif-toggle" class="d-flex align-items-center justify-content-between text-decoration-none px-3 py-3" style="color: #1a1a1a;" aria-expanded="false">
<span class="ubuntu-bold">
<i class="bi bi-lightbulb me-2" style="color: #f4c542;"></i>
Vous n'avez pas reçu la notification ?
</span>
<i class="bi bi-chevron-down"></i>
</a>
<div id="checkpoint-in-app-validation-no-notif-content-ios" style="display: none;" class="px-3 pb-3 text-start">
<p class="ubuntu-regular mb-2" style="color: #1a1a1a;">
Vérifiez que les notifications LinkedIn sont activées dans les réglages de votre téléphone
</p>
<div class="ubuntu-regular" style="color: #1a1a1a;">
<strong>
Sur iPhone
</strong>
, Réglages > Notifications > LinkedIn > Autoriser les notifications
</div>
</div>
<div id="checkpoint-in-app-validation-no-notif-content-other" style="display: none;" class="px-3 pb-3 text-start">
<p class="ubuntu-regular mb-2" style="color: #1a1a1a;">
Vérifiez que les notifications LinkedIn sont activées dans les réglages de votre téléphone
</p>
<div class="ubuntu-regular" style="color: #1a1a1a;">
<strong>
Sur Android
</strong>
, Paramètres > Applications > LinkedIn > Notifications > Autoriser les notifications
</div>
</div>
</div>
</div>
{% else %}
<div class="text-center">
<div class="mt-3 border rounded-3 overflow-hidden" style="background-color: #f8f9fa;">
<a href="#" id="checkpoint-in-app-validation-no-notif-toggle" class="d-flex align-items-center justify-content-between text-decoration-none px-3 py-3" style="color: #1a1a1a;" aria-expanded="false">
<span class="ubuntu-bold">
<i class="bi bi-lightbulb me-2" style="color: #f4c542;"></i>
Vous n'avez pas reçu la notification ?
</span>
<i class="bi bi-chevron-down"></i>
</a>
<div id="checkpoint-in-app-validation-no-notif-content-ios" style="display: none;" class="px-3 pb-3 text-start">
<p class="ubuntu-regular mb-2" style="color: #1a1a1a;">
Vérifiez que les notifications LinkedIn sont activées dans les réglages de votre téléphone
</p>
<div class="ubuntu-regular" style="color: #1a1a1a;">
<strong>
Sur iPhone
</strong>
, Réglages > Notifications > LinkedIn > Autoriser les notifications
</div>
</div>
<div id="checkpoint-in-app-validation-no-notif-content-other" style="display: none;" class="px-3 pb-3 text-start">
<p class="ubuntu-regular mb-2" style="color: #1a1a1a;">
Vérifiez que les notifications LinkedIn sont activées dans les réglages de votre téléphone
</p>
<div class="ubuntu-regular" style="color: #1a1a1a;">
<strong>
Sur Android
</strong>
, Paramètres > Applications > LinkedIn > Notifications > Autoriser les notifications
</div>
</div>
</div>
</div>
{% endif %}
</div>
<p id="checkpoint-in-app-validation-footer" class="text-muted small mt-3 mb-0 text-center" style="display: none;">
La connexion se fera automatiquement une fois validée.
</p>
</div>
<div class="alert alert-info mb-3 fs-16" id="checkpoint-phone-alert" style="display: none;">
<span id="checkpoint-phone-text"></span>
</div>
<div class="mb-3" id="checkpoint-code-container">
<label for="checkpoint-code" class="form-label ubuntu-regular fs-16 mb-2">
Code de vérification
</label>
<input type="text" class="form-control" id="checkpoint-code" name="checkpoint_code" placeholder="123456" maxlength="6" pattern="[0-9]{6}">
<small class="form-text text-muted fs-16">
Entrez le code à 6 chiffres reçu
</small>
<div class="invalid-feedback" id="checkpoint-code-error"></div>
</div>
<div class="alert alert-danger mb-3 fs-16" id="checkpoint-form-error" style="display: none;"></div>
<div data-checkpoint-actions="1">
<div class="d-flex gap-2 mb-2">
<button type="button" class="btn btn-primary flex-fill" id="btn-submit-checkpoint" style="background-color: #0077B5; border-color: #0077B5;">
<span class="spinner-border spinner-border-sm me-2" id="checkpoint-spinner" style="display: none;" role="status" aria-hidden="true"></span>
Valider
</button>
<button type="button" class="btn btn-primary flex-fill" id="btn-retry-checkpoint" style="display: none; background-color: #0077B5; border-color: #0077B5;">
<i class="fa-solid fa-rotate-right me-1"></i>
Renvoyer la notification
</button>
</div>
<div class="text-center mt-2">
<button type="button" class="btn btn-link p-0 text-decoration-underline border-0 bg-transparent ubuntu-regular fs-16" id="btn-cancel-checkpoint" aria-label="Annuler la connexion" style="color: #1a1a1a;">
Annuler
</button>
</div>
</div>
</div>


<style>
.linkedin-option-btn-primary:hover {
background-color: #E0F2FF !important;
border-color: #005885 !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 119, 181, 0.2);
}
.linkedin-option-btn-primary:hover .me-3 {
background-color: #005885 !important;
transform: scale(1.05);
}
.linkedin-option-btn-secondary:hover {
background-color: #f8f9fa !important;
border-color: #0077B5 !important;
border-width: 2px !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.linkedin-option-btn-secondary:hover .linkedin-option-icon {
background-color: #0077B5 !important;
}
.linkedin-option-btn-secondary:hover .linkedin-option-icon .bi,
.linkedin-option-btn-secondary:hover .linkedin-option-icon i {
color: #fff !important;
}
.linkedin-option-btn-secondary:hover .linkedin-option-icon svg path {
fill: white !important;
}
.linkedin-option-btn {
cursor: pointer;
}
.linkedin-option-btn:active {
transform: translateY(0);
}
</style>
</div>
</div>
</div>
{% else %}

<div id="suggestions-container">
<div class="container-fluid px-4 pt-4 pb-2 ubuntu">
<h1 class="ubuntu-bold fs-4 mb-2">
Profils détectés par l'IA de bambboo (
{{ totalSuggestionsCount }}
)
</h1>
<p class="ubuntu-regular mb-3">
Envoyez-leur l'offre qui leur correspond : une opportunité pour laquelle ils vous remercieront 😉
</p>
{% if suggestionsByJob|length > 0 %}
<div class="mt-2 bg-white border rounded-2 px-5 py-3" id="suggestions-global-container" data-is-tour-hidden="{{ is_tour_hidden ? 'true' : 'false' }}" data-hide-tour-url="{{ path('ajax_user_hide_suggestion_tour') }}" data-company-name="{{ company_name|e('html_attr') }}" data-create-message-url="{{ path('ajax_message_create') }}" data-update-refusal-url="{{ path('ajax_suggestion_update_refusal') }}" data-job-details-url-template="/job/JOB_ID_PLACEHOLDER/preview" data-ai-analysis-url-template="{{ path('api_suggestion_analyze', {'id': 'SUGGESTION_ID_PLACEHOLDER'}) }}" data-mark-preview-seen-url="{{ path('ajax_user_mark_linkedin_preview_modal_shown') }}" data-load-next-url="{{ path('ajax_suggestion_load_next') }}" data-template-formal="{{ user_template_formal|e('html_attr') }}" data-template-informal="{{ user_template_informal|e('html_attr') }}" data-greeting-informal="{{ user_greeting_informal|e('html_attr') }}">
<div id="next-suggestion-loader" class="w-100 text-center my-4 py-5 bg-light border rounded-2" style="display: none;">
<div class="spinner-border text-success" role="status" style="width: 3rem; height: 3rem;"></div>
<p class="mt-3 ubuntu-medium text-success fs-5 mb-0">
Nous recherchons d'autres profils...
</p>
</div>
<div class="row">
<div class="col-6">
<div class="profile-stack-container mb-5" id="tour-step-2">
{% for jobId, jobData in suggestionsByJob %}
{% set job = jobData.job %}
{% set currentSuggestionsInJob = jobData.suggestions %}
{% if currentSuggestionsInJob|length > 0 %}
{% for suggestion in currentSuggestionsInJob %}
{% include 'suggestion/_desktop_first_profile_card.html.twig' with {
suggestion: suggestion,
job: job,
suggestionCountForThisJob: currentSuggestionsInJob|length
} only %}
{% endfor %}
{% endif %}
{% endfor %}
</div>
</div>
<div class="col-6" id="right-column">
<p class="text-muted fst-italic">
Détecté pour l'offre de :
</p>
<p id="current-job-suggestion-count" class="text-muted" style="display: none;"></p>
<div id="current-job-offer-header" class="job-offer-header-section mb-4">
<h2 id="current-job-title" class="ubuntu-bold fs-4 mb-1">
<i class="bi bi-briefcase-fill me-2"></i>
<a href="#" id="job-title-link" class="text-decoration-underline" style="cursor: pointer;">
<span>
Chargement de l'offre...
</span>
</a>
</h2>
</div>
<div id="job-details-content" class="sticky-top pt-0" style="top: 20px;">
<p class="text-muted fst-italic placeholder-text">
(Cliquez sur le titre de l'offre pour afficher les détails de l'offre ici)
</p>
</div>
</div>
</div>
</div>
<div class="mt-5 bg-white border rounded-2 p-5 text-center">
<div class="col-4 offset-md-4 text-center">
<h2 class="ubuntu-bold fs-4 mb-5">
Bravo ! 🥳 Vous avez partagé toutes les opportunités du moment.
</h2>
<p class="ubuntu-regular fs-5">
Nous vous avertirons dès qu’une nouvelle pépite sera dénichée.
</p>
<div class="d-flex justify-content-center mt-3">
<div class="spinner-border text-success" role="status" style="width: 3rem; height: 3rem;">
<span class="visually-hidden">
Chargement...
</span>
</div>
</div>
</div>
</div>
{% else %}
<div class="mt-5 bg-white border rounded-2 p-5 text-center">
<h2 class="ubuntu-bold fs-4 mb-5">
Notre IA est en train de dénicher les pépites de votre réseau
</h2>
<div id="phone-capture-section" class="col-md-12 text-center ubuntu-regular">
<ul id="phone-instructions-list" class="list-unstyled d-inline-block text-start">
{% if not phoneForm %}
<li>
⏳ Cela peut prendre quelques heures voire quelques jours.
</li>
<li>
🗨️ Vous recevrez un SMS quand des talents seront identifiés.
</li>
<li>
📨 Vous leur partagerez alors les offres d'emploi en 1 clic depuis bambboo.
</li>
{% else %}
<li>
⏳ Cela peut prendre quelques heures voire quelques jours.
</li>
<li class="phone-prompt-message">
🗨️ Laissez-nous votre numéro de téléphone pour recevoir un SMS quand des talents seront identifiés :
</li>
{% endif %}
</ul>
{% if phoneForm %}
<div class="phone-form-container col-md-4 offset-md-4" data-phone-input-id="{{ phoneForm.phone_input.vars.id }}" data-phone-hidden-id="{{ phoneForm.phone.vars.id }}" data-phone-client-error-base-id="phone-client-error-{{ phoneForm.phone_input.vars.id }}">
{{ form_start(phoneForm, {'attr': {'class': 'user-phone-form', 'novalidate': 'novalidate' }}
) }}
<div class="mb-3 position-relative">
{{ form_widget(phoneForm.phone_input, {'attr': {'class': 'form-control form-control-lg' }}
) }}
{{ form_widget(phoneForm.phone) }}
<div id="phone-client-error-{{ phoneForm.phone_input.vars.id }}" class="phone-client-error"></div>
<div class="server-form-error">
{{ form_errors(phoneForm.phone) }}
</div>
<div class="phone-form-general-error server-form-error" style="display:none;"></div>
</div>
<button type="submit" class="btn btn-clover btn-lg">
Enregistrer mon numéro
</button>
{{ form_end(phoneForm) }}
</div>
{% endif %}
</div>
<div class="col-md-4 offset-md-4 text-center mt-4">
<div class="d-flex justify-content-center mt-3">
<div class="col-md-6 mt-5">
<lord-icon src="https://cdn.lordicon.com/okgbpdra.json" trigger="loop" colors="primary:#08a88a,secondary:#0b3a3c" style="width:250px;height:250px"></lord-icon>
</div>
</div>
</div>
</div>
{% endif %}
{% endif %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<div class="modal fade" id="confirmShareModal" tabindex="-1" aria-labelledby="confirmShareModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content p-3 ubuntu-regular">
<div class="modal-header border-0">
<h5 class="modal-title" id="confirmShareModalLabel">
<i class="bi bi-lightbulb me-2" style="color: #f8c958;"></i>
<strong>
Partagez lui l'opportunité même si vous ne vous connaissez pas
</strong>
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="margin-top: -80px !important;"></button>
</div>
<div class="modal-body">
<p>
Au pire, on vous dira merci.
<br/>
Au mieux, ça va lui changer la vie.
</p>
</div>
<div class="modal-footer border-0 justify-content-center d-flex">
<button type="button" class="btn btn-secondary flex-fill" id="confirmShareModalRejectButton">
Non, vraiment pas
</button>
<button type="button" class="btn btn-clover flex-fill" id="confirmShareModalAcceptButton">
J'ai compris, je partage
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="refusalReasonModal" tabindex="-1" aria-labelledby="refusalReasonModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content p-3 ubuntu-regular">
<div class="modal-header">
<h5 class="modal-title" id="refusalReasonModalLabel">
<strong>
Pourquoi refusez-vous de partager l'opportunité avec ce profil ?
</strong>
<small class="text-muted" style="font-size: 0.6em;">
*obligatoire
</small>
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="margin-top: -80px !important;"></button>
</div>
<div class="modal-body">
<form id="refusalReasonForm">
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="refusalReason" id="reasonKnownNotGood" value="Je le connais et je le déconseille.">
<label class="form-check-label" for="reasonKnownNotGood">
Je le connais et je le déconseille.
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="refusalReason" id="reasonNotKnownEnough" value="Je ne le connais pas, mais il ne me semble pas pertinent.">
<label class="form-check-label" for="reasonNotKnownEnough">
Je ne le connais pas, mais il ne me semble pas pertinent.
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="refusalReason" id="reasonOther" value="Autre">
<label class="form-check-label" for="reasonOther">
Autre
</label>
</div>
<div class="mb-3" id="otherReasonTextContainer" style="display: none;">
<textarea class="form-control" id="otherReasonText" rows="3" placeholder="Indiquez-nous la raison pour laquelle vous souhaitez retirer cette personne de la liste des candidats."></textarea>
</div>
<div id="refusalError" class="text-danger small mb-2" style="display: none;">
Veuillez sélectionner une raison ou la spécifier.
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-clover" id="submitRefusalReasonButton">
Valider ma réponse
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="aiAnalysisModal" tabindex="-1" aria-labelledby="aiAnalysisModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content p-2 ubuntu-regular">
<div class="modal-header">
<h5 class="modal-title" id="aiAnalysisModalTitle">
<strong>
Pourquoi ce profil est-il pertinent ?
</strong>
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="margin-top: -30px !important;"></button>
</div>
<div class="modal-body" id="aiAnalysisModalBody">
<div id="aiAnalysisLoader" class="py-5" style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
<div id="aiCountdownTimer" style="text-align: center; font-size: 1.5em; margin-bottom: 15px;"></div>
<br/>
<div class="d-flex justify-content-center mt-3">
<div class="spinner-border text-primary" role="status" style="width: 4rem; height: 4rem;">
<span class="visually-hidden">
Chargement...
</span>
</div>
</div>
</div>
<div id="aiAnalysisResult" style="display: none; text-align: justify;"></div>
<div id="aiAnalysisFriendlyError" class="text-center py-4" style="display: none; min-height: 300px; flex-direction: column; justify-content: center; align-items: center;">
<i class="fa-solid fa-cog fa-spin fa-4x text-darkgreen" style="--fa-animation-direction: reverse;"></i>
<i class="fa-solid fa-cog fa-spin fa-4x text-grey" style="--fa-animation-duration: 5s;"></i>
<h5 class="ubuntu-bold fs-4 mt-5" id="aiFriendlyErrorTitle"></h5>
<p class="ubuntu-regular text-muted mt-4 text-justify" id="aiFriendlyErrorMessage" style=""></p>
</div>
</div>
</div>
</div>
</div>
{% verbatim %}
<div class="modal fade" id="linkedInPreviewModal" tabindex="-1" aria-labelledby="linkedInPreviewModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content p-3 ubuntu-regular">
<div class="modal-header border-0">
<h5 class="modal-title" id="linkedInPreviewModalLabel">
<i class="bi bi-linkedin me-2" style="color: #0A66C2;"></i>
Voici le message que vous allez envoyer via LinkedIn
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="small text-muted mb-2">
Aperçu du message :
</p>
<div class="border p-3 rounded bg-light" style="min-height: 150px;">
<pre id="linkedInMessagePreview" style="white-space: pre-wrap; word-wrap: break-word; font-size: 0.9em; margin-bottom: 0;"></pre>
</div>
<p class="small text-muted mt-2 fst-italic">
Remarque : Le "[lien vers l'offre]" sera automatiquement remplacé par le lien correct lors de l'envoi.
</p>
</div>
<div class="modal-footer border-0 justify-content-end d-flex">
<button type="button" class="btn btn-clover px-4" id="linkedInPreviewModalSendButton">
Envoyer
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="sendMessageModal" tabindex="-1" aria-labelledby="sendMessageModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content p-3 ubuntu-regular">
<div class="modal-header border-0">
<h5 class="modal-title" id="sendMessageModalLabel">
Votre message
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="sendMessageForm">
<div class="d-flex align-items-center mb-2">
<select class="form-select" id="messageGreetingSelect" style="width: auto;">
<option>
Bonjour
</option>
<option>
Salut
</option>
<option>
Hello
</option>
<option>
Hi
</option>
<option>
Coucou
</option>
</select>
<span id="messageGreetingName" class="ms-2 fw-bold"></span>
</div>
<div class="mb-3">
<textarea class="form-control" id="messageTextarea" rows="10" required></textarea>
</div>
<div class="form-check d-flex align-items-center">
<input class="form-check-input mt-0" type="checkbox" value="" id="saveAsTemplateCheckbox" style="margin-right: 10px;">
<label class="form-check-label" for="saveAsTemplateCheckbox" id="saveAsTemplateLabel" style="line-height: 1.2;"></label>
</div>
</form>
</div>
<div class="modal-footer border-0 justify-content-center">
<button type="button" class="btn btn-clover px-5" id="sendMessageModalSendButton">
Envoyer via LinkedIn
</button>
</div>
</div>
</div>
</div>
</div>

<div class="modal fade" id="linkedinDisconnectedModal" tabindex="-1" aria-labelledby="linkedinDisconnectedModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content p-4 ubuntu-regular">
<div class="modal-header border-0 text-center d-block">
<button type="button" class="btn-close position-absolute top-0 end-0 mt-3 me-3" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-3">
<i class="bi bi-linkedin" style="font-size: 3rem; color: #0A66C2;"></i>
</div>
<h5 class="modal-title text-center ubuntu-bold" id="linkedinDisconnectedModalLabel">
Vous n'êtes pas connecté à LinkedIn
</h5>
</div>
<div class="modal-body text-center">
<p class="ubuntu-regular mb-4" id="linkedinDisconnectedModalMessage">
Pour envoyer des messages, vous devez être connecté à votre compte LinkedIn.
</p>

<div id="linkedinDisconnectedModalPolling" style="display: none;">
<div class="spinner-border text-primary mb-3" role="status">
<span class="visually-hidden">
Chargement...
</span>
</div>
<p class="ubuntu-regular mb-2" id="linkedinDisconnectedModalPollingMessage">
En attente de connexion...
</p>
<p class="ubuntu-light small text-muted" id="linkedinDisconnectedModalPollingCounter">
Tentative 0/60
</p>
</div>
</div>
<div class="modal-footer border-0 justify-content-center">
<button type="button" class="btn btn-primary px-5" id="linkedinDisconnectedModalConnectButton" style="background-color: #0077B5; border-color: #0077B5;">
<i class="bi bi-linkedin me-2"></i>
Me connecter à LinkedIn
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="tour-start-modal" tabindex="-1" aria-labelledby="tourStartModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content text-center" style="background-color: #1a2e2e; color: white; border-radius: 12px;">
<div class="modal-body p-5">
<h1 class="modal-title fw-bold fs-2 mb-4" id="tourStartModalLabel">
Vous avons détecté de nouveaux profils! 🎉
</h1>
<button type="button" class="btn btn-lg fw-bold" id="start-tour-button" style="background-color: #10B981; color: white; padding: 12px 32px; border-radius: 8px;">
Démarrer le guide
</button>
</div>
</div>
</div>
</div>
{% endverbatim %}
</div>
</div>
{% endif %}
{% endblock %}
{% block javascripts %}
{{ parent() }}
{{ encore_entry_script_tags('extensionCheck') }}
{% if phoneForm %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/19.2.16/js/intlTelInput.min.js" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/19.2.16/js/utils.js" referrerpolicy="no-referrer"></script>
{% endif %}
{% endblock %}

templates/suggestion/index.html.twig line 1