templates/default/joinUsDetails.html.twig line 1

Open in your IDE?
  1. {# BASE LOAD #}
  2. {% extends 'base.html.twig' %}
  4. {# TITLE TOP PAGE #}
  5. {% block title %}CPI | Join Us {% endblock %}
  7. {# CSS #}
  8. {% block stylesheet %}
  9.         <link rel="stylesheet" href="{{ asset('css/recrutement.css')}}">
  10. {% endblock %}
  12. {# BODY HOME PAGE #}
  13. {% block body %}
  14. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  16. <style>
  17. .accueil2 li{
  18.    font-weight: 100;
  19. color: #000 !important;
  20. margin-left:20px
  21. }
  23. .accueil2 .btn2 button {
  24.     font-size: small;
  25.     font-weight: bold;
  26.     border-color: white;
  27.     padding: 12px;
  28.     padding-left: 20px;
  29.     padding-right: 20px;
  30.     color: white;
  31.     background-color: rgb(0,59,255);
  32.     border-radius: 30px;
  33.     margin-bottom: 40px;
  34. }
  36. .accueil2 .btn2 button:hover {
  37.     color: rgb(0,59,255);
  38.     background-color: white;
  39.     border-radius: 30px;
  40.     border: 1px solid rgb(0,59,255)!important;
  41. }
  42. </style>
  43.   <main>
  45.         <div class="accueil" style="padding-top:100px">
  46.           
  47.             <div class="container">
  48.                 <div class="row">
  49.                     <div class="col-10 offset-1">
  50.                         <div class="row text-light">
  51.                             <div class="col-lg-6">
  52.                                 <img id="imagePrincipale" class="img-fluid w-75" src="{{asset('uploads/jobs/'~jobs.image)}}" alt="" style="border-radius:20px">
  53.                             </div>
  54.                             <div class="col-lg-6 order-first order-lg-last mt-5">
  55.                                 <div class="row py-4">
  56.                                     <div class="col">
  57.                                         <div class="logo">
  58.                                             <div class="image">
  59.                                                 <img src="{{asset('img/recrutement/pin_bleu.svg')}}" alt="">
  60.                                             </div>
  61.                                             <div class="texte">
  62.                                                                                         {% if jobs.lieuxJobs != '' %}
  64.                                                 <p>{% if app.request.locale == 'fr' %}{{jobs.lieuxJobs.titreFr}}{% else %}{{jobs.lieuxJobs.titreEn}}{% endif %}</p>
  65.                                                                                        {% endif %}
  67.                                             </div>
  68.                                         </div>
  69.                                         <div class="trait">
  70.                                             <img src="{{asset('img/recrutement/Ligne 80.svg')}}" alt="">
  71.                                         </div>
  72.                                     </div>
  73.                                     <div class="col">
  74.                                         <div class="logo">
  75.                                             <div class="image">
  76.                                                 <img src="{{asset('img/recrutement/flag-alt_bleu.svg')}}" alt="">
  77.                                             </div>
  78.                                             <div class="texte">
  79.                                             {% if jobs.businessUnit != '' %}
  80.                                                  <p>{% if app.request.locale == 'fr' %}{{jobs.businessUnit.titreFr}}{% else %}{{jobs.businessUnit.titreEn}}{% endif %}</p>
  81.                                            {% endif %}
  82.                                             </div>
  83.                                         </div>
  84.                                         <div class="trait">
  85.                                             <img src="{{asset('img/recrutement/Ligne 80.svg')}}" alt="">
  86.                                         </div>
  87.                                     </div>
  88.                                 </div>
  89.                                 <h6># {{jobs.reference}}</h6>
  90.                                 <h1 class="pt-3 opensans_bold_54">{% if app.request.locale == 'fr' %}{{jobs.titreFr}}{% else %}{{jobs.titreEn}}{% endif %}</h1>
  91.                                 <hr>
  92.                                 <p class="opensans_light_18" style="padding-bottom:30px">{% if app.request.locale == 'fr' %}{{jobs.texteFr|raw}}{% else %}{{jobs.texteEn|raw}}{% endif %}</p>
  93.                             </div>
  94.                         </div>
  95.                     </div>
  96.                 </div>
  97.             </div>
  98.         </div>
  99.         <div class="accueil2 pb-5">
  101.           <div class="container">
  102.                 <div class="row">
  103.                 <div class="col-12 col-lg-8 offset-lg-2">
  104.                     <div class="btn2">
  105.                         <a href="{{path('genererpdfjob',{'id':jobs.id})}}" target="_blank"><button style="border:solid 1px #fff;float:right"><i class="fa fa-download" aria-hidden="true" style="margin-right:5px"></i>{% if app.request.locale == 'fr' %}Télécharger l'offre d'emploi{% else %}Download the job offer{% endif %}</button></a>
  106.                     </div>
  107.                 </div>
  108.                 </div>
  109.             </div>
  110.             <div class="container">
  111.                 <div class="row">
  113.                 
  114.                     <div class="">
  115.                         <div class="row">
  116.                          {% if app.request.get('send') == 'success' %}
  117.                                 <h4 style="color:green">{% if app.request.locale == 'fr' %}Votre message a bien été envoyé{% else %}Your message has been sent{% endif %}</h4>
  118.                                
  119.                                 {% endif %}
  120.                                
  123.                             {# PARCEQUE id = 10 est la page candidature c'est tt #}
  124.                             {% if jobs.id != 10 %} 
  125.                                 <div class="col-12 col-lg-8 offset-lg-2">
  126.                                     <div class="row">
  127.                                         <div class="menu my-5">
  128.                                             <div class="ligneBleu"></div>
  129.                                             <p>{% trans %}detail-mission{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':110})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</p>
  130.                                         </div>
  131.                                     {% if app.request.locale == 'fr' %}{{jobs.mission|raw}}{% else %}{{jobs.missionEn|raw}}{% endif %}
  132.                                     </div>
  133.                                     <div class="row">
  134.                                         <div class="menu my-5">
  135.                                             <div class="ligneBleu"></div>
  136.                                             <p>{% trans %}detail-profil{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':111})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</p>
  137.                                         </div>
  138.                                                                        {% if app.request.locale == 'fr' %}{{jobs.profilFr|raw}}{% else %}{{jobs.profilEn|raw}}{% endif %}
  140.                                     </div>
  141.                                     <div class="row">
  142.                                         <div class="menu my-5">
  143.                                             <div class="ligneBleu"></div>
  144.                                             <p>{% trans %}detail-proposition{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':112})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</p>
  145.                                         </div>
  146.                                     {% if app.request.locale == 'fr' %}{{jobs.propositionFr|raw}}{% else %}{{jobs.propositionEn|raw}}{% endif %}
  147.                                     </div>
  148.                                     <div class="row">
  149.                                         <div class="menu my-5">
  150.                                             <div class="ligneBleu"></div>
  151.                                             <p>{% trans %}detail-postuler{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':113})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</p>
  152.                                         </div>
  153.                             {% endif %}
  154.                         
  156.                                      <h2 style="font-size: 24px;
  157. font-weight: bold; color:black">{% if app.request.locale == 'fr' %}{{jobs.titreFr}}{% else %}{{jobs.titreEn}}{% endif %}</h2>
  158.                                     <form action="{{path('sendFormJoin')}}" method="POST" enctype='multipart/form-data'>
  159.                                     <input type="hidden" name="job" value="{{jobs.id}}">
  160.                                         <div class="formulaire">
  161.                                             <div class="row my-4">
  162.                                                 <div class="col">
  163.                                                     <p><b>{% trans %}form-nom{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':97})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</b>  <span style="color:red;">*</span></p>
  164.                                                     <input  type="text" id="nom" name="nom"  required>
  165.                                                 </div>
  166.                                                 <div class="col">
  167.                                                     <p><b>{% trans %}form-prenom{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':98})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</b> <span style="color:red;">*</span></p>
  168.                                                     <input type="text" id="prenom" name="prenom" required>
  169.                                                 </div>
  170.                                             </div>
  171.                                             <div class="row mb-4">
  172.                                                 <div class="col">
  173.                                                     <p> <b>{% trans %}form-email{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':105})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</b><span style="color:red;">*</span></p>
  174.                                                     <input type="email" id="email" name="email" required>
  175.                                                 </div>
  176.                                                 <div class="col">
  177.                                                     <p> <b>{% trans %}form-tel{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':106})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</b>  <span style="color:red;">*</span></p>
  178.                                                     <input type="text" id="telephone" name="telephone" required>
  179.                                                 </div>
  180.                                             </div>
  181.                                             <div class="row mb-4">
  182.                                                 <p> <b>{% trans %}form-motivation{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':114})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</b></p>
  183.                                                 <textarea id="motivation" name="motivation"></textarea>
  184.                                             </div>
  185.                                             <div class="row mb-4">
  186.                                                 <p><b>{% trans %}form-cv{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':115})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</b> <span style="color:red;">*</span> (Ajouter max. 3 fichiers .pdf ou .jpg)</p>
  187.                                                 <div class="cv">
  188.                                                     <img class="mt-3 mb-3" src="{{asset('img/upload-icon.svg')}}" alt="image upload">
  189.                                                     <div id="containFile1">
  190.                                                         <label id="fichier1" for="file" class="label-file">{% if app.request.locale == 'fr' %}Importer Fichier 1{% else %}Import file 1{% endif %}</label>
  191.                                                         <input id="file" name="cv[]" class="input-file" type="file" required>
  192.                                                     </div>
  193.                                                     <div id="containFile2" style="margin-top:10px">
  194.                                                         <label id="fichier2" for="file2" class="label-file" >{% if app.request.locale == 'fr' %}Importer Fichier 2{% else %}Import file 2{% endif %}</label>
  195.                                                         <input id="file2" name="cv[]" class="input-file" type="file">
  196.                                                     </div>
  197.                                                     <div id="containFile3" style="margin-top:10px">
  198.                                                         <label id="fichier3" for="file3" class="label-file" >{% if app.request.locale == 'fr' %}Importer Fichier 3{% else %}Import file 3{% endif %}</label>
  199.                                                         <input id="file3" name="cv[]" class="input-file" type="file" >
  200.                                                     </div>
  202.                                                     <p style="font-size: 10px; margin-top: 5px;">{% if app.request.locale == 'fr' %}ou cliquez-déposez vos fichiers PDF ici{% else %}or click-and-drop your PDF files here{% endif %}</p>
  203.                                                     <p id="file-count" style="font-size: 12px; margin-top: 10px;font-weight:900;">{% if app.request.locale == 'fr' %}Aucun fichier sélectionné...{% else %}No files selected...{% endif %}</p>
  205.                                                 </div>
  206.                                             </div>
  208.                                             <script>
  209.                                                 document.addEventListener('DOMContentLoaded', function() {
  211.                                                     let file1 = document.getElementById('file');
  212.                                                     let file2 = document.getElementById('file2');
  213.                                                     let file3 = document.getElementById('file3');
  214.                                                     let containFile1 = document.getElementById('containFile1');
  215.                                                     let containFile2 = document.getElementById('containFile2');
  216.                                                     let containFile3 = document.getElementById('containFile3');
  217.                                                     let fileCount = document.getElementById('file-count');
  219.                                                     // Function to update the file count and labels
  220.                                                     function updateFileCount() {
  221.                                                         let count = 0;
  222.                                                         if (file1.files.length) count++;
  223.                                                         if (file2.files.length) count++;
  224.                                                         if (file3.files.length) count++;
  226.                                                         if (count === 0) {
  227.                                                             fileCount.textContent = '{% if app.request.locale == 'fr' %}Aucun fichier sélectionné...{% else %}No files selected...{% endif %}';
  228.                                                         } else if (count === 3) {
  229.                                                             fileCount.textContent = '{% if app.request.locale == 'fr' %}3 fichiers sélectionnés - Limite atteinte.{% else %}3 selected files - Limit reached.{% endif %}';
  230.                                                         } else {
  231.                                                             fileCount.textContent = count + ' {% if app.request.locale == 'fr' %}fichier sélectionné{% else %}fichiers sélectionnés{% endif %}';
  232.                                                         }
  234.                                                         updateLabelAndStyle(file1, containFile1, 'fichier1', 'Remplacer fichier 1');
  235.                                                         updateLabelAndStyle(file2, containFile2, 'fichier2', 'Remplacer fichier 2');
  236.                                                         updateLabelAndStyle(file3, containFile3, 'fichier3', 'Remplacer fichier 3');
  237.                                                     }
  239.                                                     function updateLabelAndStyle(fileInput, container, labelId, replacementText) {
  240.                                                         if (fileInput.files.length) {
  241.                                                             container.style.backgroundColor = '#82868f';
  242.                                                             container.style.borderRadius = '30px';
  243.                                                             document.getElementById(labelId).textContent = replacementText;
  244.                                                         } else {
  245.                                                             container.style.backgroundColor = 'transparent';
  246.                                                             container.style.borderRadius = '0';
  247.                                                             document.getElementById(labelId).textContent = '{% if app.request.locale == 'fr' %}Importer Fichier 1{% else %}Import file 1{% endif %}';
  248.                                                         }
  249.                                                     }
  251.                                                     file1.addEventListener('change', function() {
  252.                                                         updateLabelAndStyle(file1, containFile1, 'fichier1', 'Remplacer fichier 1');
  253.                                                         updateFileCount();
  254.                                                     });
  256.                                                     file2.addEventListener('change', function() {
  257.                                                         updateLabelAndStyle(file2, containFile2, 'fichier2', 'Remplacer fichier 2');
  258.                                                         updateFileCount();
  259.                                                     });
  261.                                                     file3.addEventListener('change', function() {
  262.                                                         updateLabelAndStyle(file3, containFile3, 'fichier3', 'Remplacer fichier 3');
  263.                                                         updateFileCount();
  264.                                                     });
  266.                                                     updateFileCount();
  268.                                                 });
  269.                                             </script>
  275.                                         </div>
  276.                                         <div class="row pt-3 d-flex flex-md-row flex-column">
  277.                                             <div class="col-12 col-md-6 d-flex justify-content-center justify-content-xl-start" style="margin-bottom:20px;">
  278.                                                 <div class="g-recaptcha" data-sitekey="6Lf0RGEnAAAAAJcwFd-oTX1mAE4Rqr7ENpEHL70L"></div>
  279.                                                 <div class="error-message">
  280.                                                     {% if app.request.query.has('recaptcha_error') %}
  281.                                                         <span style="color: red;">{% if app.request.locale == 'fr' %}La vérification reCAPTCHA a échoué. Veuillez réessayer.{% else %}The reCAPTCHA check failed. Please try again.{% endif %}</span>
  282.                                                     {% endif %}
  283.                                                 </div>
  284.                                             </div>
  285.                                             <div class="col-12 col-md-6 mt-3 mt-md-0">
  286.                                                 <div class="col-12 ">
  287.                                                     <div class="form-check">
  288.                                                         <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" name="confidentialite" required>
  289.                                                         <label class="form-check-label" for="flexCheckDefault">
  290.                                                         {% trans %}form-condition1{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':108})}}"><button type="button"  style="margin-left:10px;margin-right:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %} <a href="{{ path('politique',{'locale':app.request.locale})}}" target="_blank">{% trans %}form-condition2{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':109})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</a>
  291.                                                     </div>
  292.                                                 </div>
  293.                                                 <div class="col-12 " style="margin-top:45px;">
  294.                                                     <div class="bouton-bleu text-end">
  295.                                                         <button type="submit">{% if app.request.locale == 'fr' %}Postuler{% else %}Apply{% endif %}</button>
  296.                                                     </div>
  297.                                                 </div>
  298.                                             </div>
  299.                                         </div>
  300.                                     </form>
  301.                                    
  302.                                 </div>
  303.                             </div>
  304.                         </div>
  305.                     </div>
  306.                 </div>
  307.             </div>
  308.         </div>
  310.     </main>
  312.    <!-- Google reCAPTCHA script -->
  313. <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  314. <script src="https://www.google.com/recaptcha/api.js?hl={{ app.request.locale == 'fr' ? 'fr' : 'en' }}"></script>
  317. {% endblock %}