templates/default/joinUs.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/grille_recrutement.css')}}">
  10. {% endblock %}
  12. {# BODY HOME PAGE #}
  13. {% block body %}
  15. <style>
  17. @media screen and (max-width: 770px){
  18.     .hover-effect-btn{
  19.         margin-top:20px;
  20.     }
  21. }
  23. </style>
  25.  <main>
  26.             <div class="accueil">
  27.                 <div class="container text-light">
  28.                     <div class="row pt-5" >
  29.                         <div class="col-12">
  30.                             <div class="row">
  31.                                 <h1  data-aos="fade-right" data-aos-duration="1000" class="opensans_bold_50">{% trans %}titre-page-joinus{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':41})}}"><button type="button"  style="margin-left:5px" class="btn btn-warning"  ><i class="fa-solid fa-pen"></i></button></a>{% endif %}</h1>
  32.                                 <div class="col-6">
  33.                                     <div class="traitBlanc"></div>
  34.                                 </div>
  35.                             </div>
  36.                         </div>
  37.                     </div>
  38.                     <div class="row" >
  39.                         <div class="col-12">
  40.                             <p  data-aos="fade-right" data-aos-duration="1000" class="opensans_semibold">{% trans %}introduction-joinus-1{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':42})}}"><button type="button"  style="margin-left:5px" class="btn btn-warning"  ><i class="fa-solid fa-pen"></i></button></a>{% endif %} {% trans %}introduction-joinus-2{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':43})}}"><button type="button"  style="margin-left:5px" class="btn btn-warning"  ><i class="fa-solid fa-pen"></i></button></a>{% endif %}<a href="#consultOfferLink" id="consultOffer">{% trans %}introduction-joinus-3{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':52})}}"><button type="button"  style="margin-left:5px" class="btn btn-warning"  ><i class="fa-solid fa-pen"></i></button></a>{% endif %}</a></p>
  41.                         </div>
  42.                     </div>
  43.                     
  44.                 </div>
  45.             </div>
  48.             {% set posteSelected = app.request.query.get('job') %}
  49.             {% set lieuSelected = app.request.query.get('lieu') %}
  50.             {% set businessSelected = app.request.query.get('businessUnit') %}
  52.             <style>
  53.                 .btn-dangerr{
  54.                     background-color:#30278E!important;
  55.                     font-weight:bold!important;
  56.                     color:white!important;
  57.                 }
  58.             </style>
  61.             <div class="accueil2" >
  62.                 <div class="container">
  63.                     <div class="row py-5">
  64.                         <div class="dropdowns">
  65.                             <div class="row">
  66.                                 <div class="col-12" >
  67.                                     <div class="row pb-5">
  68.                                         <div class="col">
  69.                                             <h1  data-aos="fade-right" data-aos-duration="1000" class="opensans_bold_50">{% trans %}valeurs-titre{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':44})}}"><button type="button"  style="margin-left:5px" class="btn btn-warning"  ><i class="fa-solid fa-pen"></i></button></a>{% endif %}</h1>
  70.                                            
  71.                                             <h4  data-aos="fade-right" data-aos-duration="1000" class="pt-4 opensans_semibold" style="margin-bottom:25px">{% trans %}valeurs-introduction{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':45})}}"><button type="button"  style="margin-left:5px" class="btn btn-warning"  ><i class="fa-solid fa-pen"></i></button></a>{% endif %}</h4>
  72.                                            
  73.                                             <div class="row opensans_light_18" id="consultOfferLink">
  74.                                                 <div class="col-md-6 d-flex flex-column" id="jobsList">
  75.                                                     <p  data-aos="fade-right" data-aos-duration="1000" >{% trans %}valeurs-paragraphe-1{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':46})}}"><button type="button"  style="margin-left:5px" class="btn btn-warning"  ><i class="fa-solid fa-pen"></i></button></a>{% endif %}</p>
  76.                                                 </div>
  77.                                                 <div class="col-md-6 d-flex flex-column">
  78.                                                     <p  data-aos="fade-right" data-aos-duration="1000">{% trans %}valeurs-paragraphe-3{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':48})}}"><button type="button"  style="margin-left:5px" class="btn btn-warning"  ><i class="fa-solid fa-pen"></i></button></a>{% endif %}</p>
  79.                                                 </div>
  80.                                             </div>
  81.                                         </div>
  82.                                     </div>
  83.                                     <div class="row mb-5 d-flex" >
  84.                                         <div class="col-12 col-md-3" style="z-index:4">
  85.                                             <div data-aos="fade-up" data-aos-duration="1000" class="dropdown ">
  86.                                             <button class="btn {{ posteSelected ? 'btn-dangerr' : 'btn-secondary' }} dropdown-toggle" type="button" id="dropdownMenuButtonType" data-bs-toggle="dropdown" aria-expanded="false">
  87.                                               {% if posteSelected %}
  88.                                                         {% for res in jobsL %}
  89.                                                             {% if res.titreFr == posteSelected  %}
  90.                                                                 {% set title = app.request.locale == 'fr' ? res.titreFr : res.titreEn %}
  91.                                                                 {{ title|length > 10 ? title|slice(0, 11) ~ '...' : title }}
  92.                                                             {% endif %}
  93.                                                         {% endfor %}
  94.                                                     {% else %}
  95.                                                         {% set defaultTitle = app.request.locale == 'fr' ? 'Poste' : 'Jobs' %}
  96.                                                         {{ defaultTitle|length > 10 ? defaultTitle|slice(0, 11) ~ '...' : defaultTitle }}
  97.                                                     {% endif %}
  98.                                                 <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonType">
  99.                                                     <li>
  100.                                                         <a style="font-weight:600;" class="dropdown-item text-light" href="{{ path('app_joinus', {'job': '', 'lieu': lieuSelected, 'businessUnit': businessSelected, 'locale': app.request.locale}) }}#jobsList">
  101.                                                             {% if app.request.locale == 'fr' %}Tous les postes{% else %}All Jobs{% endif %}
  103.                                                         </a>
  104.                                                     </li>
  105.                                                    {% set displayedJobs = [] %}
  106.                                                         {% for res in jobsL %}
  107.                                                             {% set jobTitle = app.request.locale == 'fr' ? res.TitreFr : res.TitreEn %}
  108.                                                             {% if jobTitle not in displayedJobs %}
  109.                                                                 <li><a class="dropdown-item text-light" href="{{ path('app_joinus',{'job':res.titreFr, 'lieu': lieuSelected, 'businessUnit': businessSelected,'locale':app.request.locale}) }}#jobsList">{{ jobTitle }}</a></li>
  110.                                                                 {% set displayedJobs = displayedJobs|merge([jobTitle]) %}
  111.                                                             {% endif %}
  112.                                                         {% endfor %}
  113.                                                 </ul>
  116.                                               
  117.                                             </div>
  118.                                         </div>
  125.                                         <div class="col-12 col-md-3" style="z-index:3">
  126.                                             <div data-aos="fade-up" data-aos-duration="1000" class="dropdown ">
  127.                                             <button class="btn {{ lieuSelected ? 'btn-dangerr' : 'btn-secondary' }} dropdown-toggle" type="button" id="dropdownMenuButtonType" data-bs-toggle="dropdown" aria-expanded="false">
  128.                                                     {% if lieuSelected %}
  129.                                                         {% for res in lieux %}
  130.                                                             {% if res.id == lieuSelected  %}
  131.                                                                 {% set title = app.request.locale == 'fr' ? res.titreFr : res.titreEn %}
  132.                                                                 {{ title|length > 10 ? title|slice(0, 11) ~ '...' : title }}
  133.                                                             {% endif %}
  134.                                                         {% endfor %}
  135.                                                     {% else %}
  136.                                                         {% set defaultTitle = app.request.locale == 'fr' ? 'Lieu' : 'Location' %}
  137.                                                         {{ defaultTitle|length > 10 ? defaultTitle|slice(0, 11) ~ '...' : defaultTitle }}
  138.                                                     {% endif %}
  139.                                                 </button>
  141.                                                 <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonType">
  142.                                                     <li>
  143.                                                         <a style="font-weight:600;" class="dropdown-item text-light" href="{{ path('app_joinus', {'lieu': '', 'job': posteSelected, 'businessUnit': businessSelected, 'locale': app.request.locale}) }}#jobsList">
  144.                                                             {% if app.request.locale == 'fr' %}Tous les Lieux{% else %}All Locations{% endif %}
  146.                                                         </a>
  147.                                                     </li>
  148.                                                     {% for res in lieux %}
  149.     <li>
  150.         <a class="dropdown-item text-light" href="{{ path('app_joinus', {
  151.             'lieu': res.id,
  152.             'job': posteSelected is not null ? posteSelected : '',
  153.             'businessUnit': businessSelected is not null ? businessSelected : '',
  154.             'locale': app.request.locale
  155.         }) }}#jobsList">
  156.             {% if app.request.locale == 'fr' %}
  157.                 {{ res.TitreFr }}
  158.             {% else %}
  159.                 {{ res.TitreEn }}
  160.             {% endif %}
  161.         </a>
  162.     </li>
  163. {% endfor %}
  164.                                                 </ul>
  165.                                             </div>
  166.                                         </div>
  170.                                         <div class="col-12 col-md-3" style="z-index:2">
  171.                                             <div data-aos="fade-up" data-aos-duration="1000" class="dropdown " >
  172.                                             <button class="btn {{ businessSelected ? 'btn-dangerr' : 'btn-secondary' }} dropdown-toggle" type="button" id="dropdownMenuButtonType" data-bs-toggle="dropdown" aria-expanded="false">
  173.                                                     {% if businessSelected %}
  174.                                                         {% for res in businessUnit %}
  175.                                                             {% if res.id == businessSelected  %}
  176.                                                                 {% set title = app.request.locale == 'fr' ? res.titreFr : res.titreEn %}
  177.                                                                 {{ title|length > 10 ? title|slice(0, 11) ~ '...' : title }}
  178.                                                             {% endif %}
  179.                                                         {% endfor %}
  180.                                                     {% else %}
  181.                                                         {% set defaultTitle = app.request.locale == 'fr' ? 'Business units' : 'Business units' %}
  182.                                                         {{ defaultTitle|length > 10 ? defaultTitle|slice(0, 11) ~ '...' : defaultTitle }}
  183.                                                     {% endif %}
  184.                                                 </button>
  186.                                                 <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonType">
  187.                                                     <li>
  188.                                                         <a class="dropdown-item text-light" href="{{ path('app_joinus', {'businessUnit': '', 'job': posteSelected, 'lieu': lieuSelected, 'locale': app.request.locale}) }}#jobsList">
  189.                                                         {% if app.request.locale == 'fr' %}Toutes les Business unit{% else %}All buisnessUnit{% endif %}
  190.                                                     </a>
  191.                                                     </li>
  192.                                                     {% for res in businessUnit %}
  193.                                                         <li><a class="dropdown-item text-light" href="{{path('app_joinus',{'businessUnit':res.id, 'job': posteSelected, 'lieu': lieuSelected, 'locale':app.request.locale})}}#jobsList">{% if app.request.locale == 'fr' %}{{res.TitreFr}}{% else %}{{res.TitreEn}}{% endif %}</a></li>
  194.                                                     {% endfor %}
  195.                                                 </ul>
  196.                                             </div>
  197.                                         </div>
  198.                                        
  200.                                         
  201.                                         <div class="col-12 col-md-3" style="z-index:1">
  202.                                             <div  data-aos="fade-up" data-aos-duration="1800" class="dropdown  ">
  203.                                                 <a href="{{path('app_joinus',{'locale':app.request.locale})}}"><button class="btn btn-secondary btn-res " type="button">
  204.                                                    <i class="fas fa-arrows-rotate" aria-hidden="true"></i>
  205.                                                    <p style="margin-bottom: 0;">{% if app.request.locale == 'fr' %}Réinitialiser{% else %}Reset{% endif %}</p>
  206.                                                 </button></a>
  207.                                                
  208.                                             </div>
  209.                                         </div>
  210.                                     </div>
  211.                                 </div>
  212.                             </div>    
  213.                         </div>
  215.                         <script>
  216.     // Wait for the DOM to be fully loaded
  217.     document.addEventListener("DOMContentLoaded", function() {
  218.         // Get all dropdown items
  219.         var dropdownItems = document.querySelectorAll('.dropdown-item');
  221.         // Add click event listener to each dropdown item
  222.         dropdownItems.forEach(function(item) {
  223.             item.addEventListener('click', function(event) {
  224.                 // Prevent the default action
  225.                 event.preventDefault();
  226.                 
  227.                 // Get the href attribute of the clicked item
  228.                 var href = this.getAttribute('href');
  230.                 // Redirect the browser to the href
  231.                 window.location.href = href;
  232.             });
  233.         });
  234.     });
  235. </script>
  236.                         <div class="col-12" >
  237.                             
  238.                             <div class="row py-5">
  240. {% set specialJob = null %}
  242. {% for res in jobs %}
  243.     {% if res.afficher == 1 %}
  244.         
  245.         
  246.                 <div class="row d-flex" >
  247.                     <div class="col-md-6 col-12 texte-carte">
  248.                         <div class="titre">
  249.                             <p style="margin:0">{% if app.request.locale == 'fr' %}{{ res.titreFr }}{% else %}{{ res.titreEn }}{% endif %}</p>
  250.                         </div>
  251.                     </div>
  252.                     <div class="col-md-2 col-6">
  253.                         {% if res.businessUnit  != '' and res.businessUnit.id != 4 %}
  254.                             <div class="infos">
  255.                                 <img class="img-fluid" src="{{ asset('img/recrutement/flag-alt.svg') }}" alt="">
  256.                                 <p style="margin:0">{% if app.request.locale == 'fr' %}{{ res.businessUnit.titreFr }}{% else %}{{ res.businessUnit.titreEn }}{% endif %}</p>
  257.                             </div>
  258.                             <div class="trait-bleu">
  259.                                 <img class="img-fluid" src="{{ asset('img/recrutement/Ligne 80.svg') }}" alt="">
  260.                             </div>
  261.                         {% endif %}
  262.                     </div>
  263.                     <div class="col-md-2 col-6">
  264.                         {% if res.lieuxJobs  != '' %}
  266.                         <div class="infos">
  267.                             <img class="img-fluid" src="{{ asset('img/recrutement/pin_noir.svg') }}" alt="">
  268.                             <p style="margin:0">
  269.              
  270.                             {% if app.request.locale == 'fr' %}{{ res.lieuxJobs.titreFr }}{% else %}{{ res.lieuxJobs.titreEn }}{% endif %}</p>
  271.                         </div>
  272.                         <div class="trait-bleu">
  273.                             <img class="img-fluid" src="{{ asset('img/recrutement/Ligne 80.svg') }}" alt="">
  274.                         </div>
  275.                         {% endif %}
  277.                     </div>
  278.                     
  279.                     <div class="col-md-2 d-flex justify-content-center align-items-center">
  280.                         <a data-aos="fade-right" data-aos-duration="1500"  href="{{ path('app_joinusD', {'ref': res.reference,'locale':app.request.locale}) }}">
  281.                             <button class="btn hover-effect-btn"  type="submit" name="envoyer">{% if app.request.locale == 'fr' %}Voir l'annonce{% else %}View ad{% endif %}</button>
  282.                         </a>
  283.                     </div>
  285.                     <hr class="d-lg-none d-block" style="margin-top:24px">
  286.                 </div>
  287.         
  288.             <hr style="z-index:-1;">
  289.         {% endif %}
  290.     
  291.  
  293. {% endfor %}
  297.                             </div> 
  298.                         </div>
  299.                     </div>
  300.                 </div>
  301.             </div>
  302.         </main>
  304. {% endblock %}