templates/default/formations.html.twig line 1

Open in your IDE?
  1. {# BASE LOAD #}
  2. {% extends 'base.html.twig' %}
  4. {# TITLE TOP PAGE #}
  5. {% block title %}CPI | {% if app.request.locale == 'fr' %}Formation{% else %}Training{% endif %}{% endblock %}
  7. {# CSS #}
  8. {% block stylesheet %}
  9.     <link rel="stylesheet" href="{{ asset('css/formation.css')}}">
  10.     
  12. {% endblock %}
  14. {# BODY HOME PAGE #}
  15. {% block body %}
  16.  <main>
  18.  
  19.                                  <!-- AJOUT DU CMS -->
  22.                                     <main>
  27. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ -->
  30. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  GESTION DES SECTION ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->
  32. {% set i = 0 %}
  33. {% for section in sections %}
  34. {% set i = i +1 %}
  35.           
  36. <section id="section" style="
  37.     {% if section.image %}
  38.         background-image: url(../uploads/sections/{{section.image}});
  39.         background-size: contain;
  40.         background-repeat: no-repeat;
  41.         background-color: #1D016F!important;
  43.     {% else %}
  44.         background-color:#1D016F; 
  45.     {% endif %}
  47.     {% if i > 1 %}
  48.  
  49.         margin-top:54px
  50.     {% endif %} 
  51. ">
  53. <style>
  54. .accordion-body li{
  55.     color:white;
  56. }
  57. .accordion-body li p{
  58.     margin-bottom:0
  59. }
  62. </style>
  64. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->
  66. {% for res in section.lignes %}
  67.     <div  id="{% if i == 1 %}sectionMain{% else %}sectionReste{% endif %}" data-aos="fade-up" data-aos-duration="1000" style="{% if i == 1 %}padding-top:237px;padding-bottom:237px;{% else %}padding-top:112px; padding-bottom:112px;{% endif %}">
  68.         <div class="container text-light pb-3"> 
  69.             <div class="row pt-5 justify-content-center justify-content-md-start">
  70.                 {% for res2 in res.blocs %}
  71.                     <div id="bloc{{res2.id}}" data-aos="fade-up" data-aos-duration="1000" class="
  73.                         {% if res2.type == 2 %}
  74.                             col-xl-2 col-12
  75.                         {% endif %}
  77.                         {% if res2.type == 3 %}
  78.                             col-xxl-3 col-md-6 col-12
  79.                         {% endif %}
  81.                         {% if res2.type == 4 %}
  82.                             col-xxl-4 col-md-6 col-12
  83.                         {% endif %}
  85.                         {% if res2.type == 6 %}
  86.                             col-lg-6 col-12
  87.                         {% endif %}
  89.                         {% if res2.type == 8 %}
  90.                             col-12
  91.                         {% endif %}
  93.                         {% if res2.type == 12 %}
  94.                             col-12
  95.                         {% endif %}
  99.                         
  100.                     
  101.                     
  102.                     " {% if app.user %} style="border:dashed 1px grey; border-radius:10px; margin-bottom:10px"{% endif %}>
  103.                         
  104.                                     
  105.                         {% if res2.contenuses is not empty %}
  106.                             {% if res2.contenuses.0.typesContenus.id != 8 %}
  107.                             {% endif %}
  108.                         {% endif %}
  110. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->                   
  111. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   AFFCHER CONTENUS   ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->
  112. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->
  114.                         {% if res2.contenuses is not empty %}
  117.                              <!-- ///\\\ ///\\\ TEXTE ///\\\ ///\\\  -->
  119.                             {% if res2.contenuses.0.typesContenus.id == 1 %}
  121.                                 {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}
  122.                                 
  123.                                 {% if res2.contenuses.0.document is not empty %}
  124.                                 <a href="{{res2.contenuses.0.document}}" target="_blank" style="text-decoration:none;">
  125.                                             <button type="button btn-modal" class="justify-content-center align-items-center text-center" 
  126.                                                 style="
  127.                                                   background-color:{{res2.contenuses.0.background}}!important; 
  128.                                                     border:solid 3px {{res2.contenuses.0.couleur1}}!important;
  129.                                                     border-radius: 30px!important;
  130.                                                     color: rgb(0, 206, 255);
  131.                                                     font-weight: bold;
  132.                                                     background-color: #0c24b3;
  133.                                                     cursor: pointer;
  134.                                                     padding-top: 12px;
  135.                                                     padding-left: 50px;
  136.                                                     padding-right: 50px;
  137.                                                     margin-top:20px
  138.                                                  
  139.                                                     
  140.                                             ">
  141.                                             {% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}</button>
  142.                                         </a>
  143.                                 {% endif %}
  144.                             {% endif %}
  146.                             {% if i == 1 %}
  147.                                 {% if loop.first %}
  148.                                     <div class="traitBlanc"></div>
  149.                                 {% endif %}
  150.                             {% endif %}
  152.                             <!-- ///\\\ ///\\\ FIN TEXTE ///\\\ ///\\\  -->
  156.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  159.                             <!-- ///\\\ ///\\\ IMAGE ///\\\ ///\\\  -->
  161.                             {% if res2.contenuses is not empty %}
  162.                                 {% if res2.contenuses.0.typesContenus.id == 2 %}
  163.                                     <div  class="col-12 d-flex d-lg-block justify-content-center mt-5 mt-lg-0">
  164.                                         <img data-aos="fade-up" data-aos-duration="1000" class="img-fluid imgRadius" src="{{asset('uploads/contenus/'~res2.contenuses.0.image)}}" alt="{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}">
  165.                                     </div>
  166.                                 {% endif %}
  167.                             {% endif %}
  169.                             <!-- ///\\\ ///\\\ FIN IMAGE ///\\\ ///\\\  -->
  172.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  175.                             <!-- ///\\\ ///\\\ VIDEOS ///\\\ ///\\\  -->
  177.                             {% if res2.contenuses is not empty %}
  178.                                 {% if res2.contenuses.0.typesContenus.id == 3 %}
  179.                                     <div data-aos="fade-up" data-aos-duration="1000" class="col-12 justify-content-center">
  180.                                         <div class="image">             
  181.                                             <iframe class="img-fluid" style="height: 165px !important; width: 100% !important; border-radius: 15px!important;" src="{{res2.contenuses.0.video}}" title="YouTube video {% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
  182.                                         </div>
  184.                                         <div class="texte">
  185.                                             <p style="font-weight:bold">
  186.                                                 {% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}
  187.                                             </p>
  188.                                         </div>
  189.                                     </div>            
  190.                                 {% endif %}
  191.                             {% endif %}
  193.                             <!-- ///\\\ ///\\\ FIN VIDEO ///\\\ ///\\\  -->
  196.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  199.                             <!-- ///\\\ ///\\\ BOX PICTO  ///\\\ ///\\\  -->
  201.                             {% if res2.contenuses is not empty %}
  202.                                 {% if res2.contenuses.0.typesContenus.id == 4 %}             
  203.                                     <div data-aos="fade-up" data-aos-duration="1000" class="carte">
  204.                                         <div class="image d-flex justify-content-center">
  205.                                             <img src="{{asset('uploads/contenus/'~res2.contenuses.0.image)}}" alt="{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}">
  206.                                         </div>
  207.                                         <div class="corps-carte">
  208.                                             <div class="tete-carte" style="background-color:{{res2.contenuses.0.background}}">
  209.                                                 <p>{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}</p>
  210.                                             </div>
  211.                                             <div class="texte-carte" style="min-height:204px; background-color:{{res2.contenuses.0.couleur1}}">
  212.                                                 <div class="texte-1">
  213.                                                     {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}
  214.                                                 </div>
  215.                                             </div>   
  216.                                         </div>
  217.                                     </div>
  218.                                 {% endif %}
  219.                             {% endif %}
  220.                             
  221.                             <!-- ///\\\ ///\\\ FIN BOX PICTO ///\\\ ///\\\  -->
  222.                                    
  224.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  227.                             <!-- ///\\\ ///\\\ AVANTAGES  ///\\\ ///\\\  -->
  229.                             {% if res2.contenuses is not empty %}
  230.                                 {% if res2.contenuses.0.typesContenus.id == 7 %}
  231.                                     <div data-aos="fade-up" data-aos-duration="1000" class="avantages">
  232.                                         <div class="carteA bg-bleu" style="background-color:{{res2.contenuses.0.background}}">
  233.                                             <div class="tete-carte d-flex flex-column flex-md-row">
  234.                                                 {% if res2.contenuses.0.image != '' %}
  235.                                                     <img class="img-fluid" src="{{asset('uploads/contenus/'~res2.contenuses.0.image)}}" alt="">
  236.                                                 {% endif %}
  237.                                                 <span style="font-weight:bold">{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}</span>
  238.                                             </div>
  239.                                             <div class="texte-carte">
  240.                                                 {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}
  241.                                             </div>
  242.                                         </div>
  243.                                     </div>
  244.                                 {% endif %}
  245.                             {% endif %}
  247.                             <!-- ///\\\ ///\\\ FIN AVANTAGES ///\\\ ///\\\  -->
  250.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  253.                             <!-- ///\\\ ///\\\ ACCORDEON  ///\\\ ///\\\  -->
  255.                             {% if res2.contenuses.0.typesContenus.id == 8 %}
  256.                                 <div data-aos="fade-up" data-aos-duration="1000" class="texteDeroulant text-light">
  257.                                     <div class="accordion" id="accordionExample">
  258.                                         {% set ac = 0 %}
  260.                                          <div style="margin-bottom:32px;">
  261.                                         {% if app.request.locale == 'fr' %}{{res2.contenuses.0.titreFr|raw}}{% else %}{{res2.contenuses.0.titreEn|raw}}{% endif %}
  262.                                         </div>
  264.                                         {% for res3 in res2.contenuses.0.accordeons %}
  265.                                             {% set ac = ac+1 %}
  266.                                             <div class="accordion-item" style="background-color:{{res3.background}}!important;">
  267.                                                 <h2 class="accordion-header" id="heading{{res3.id}}">
  268.                                                     <button class="button1-accordion accordion-button" style="background-color:{{res3.background}}!important;" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{res3.id}}" aria-expanded="true" aria-controls="collapse{{res3.id}}">
  269.                                                     <i class="fa {{ ac == 1 ? 'fa-plus-circle' : 'fa-plus-circle' }}" style="margin-right:10px;font: normal!important;" aria-hidden="true"></i>{% if app.request.locale == 'en' %}{{res3.TitreEn|raw}}{% else %}{{res3.TitreFr|raw}}{% endif %}
  270.                                                     </button>
  271.                                                 </h2>
  272.                                                         
  273.                                                 <div id="collapseOne" class="accordion-collapse collapse {% if ac == 1 %}{% endif %}" aria-labelledby="heading{{res3.id}}" data-bs-parent="#accordionExample">
  274.                                                     <div class="accordion-body">
  275.                                                         <div class="accordion-hr"></div>
  276.                                                         {% if app.request.locale == 'en' %}{{res3.TexteEn|raw}}{% else %}{{res3.TexteFr|raw}}{% endif %}   
  277.                                                     </div>
  278.                                                 </div>
  279.                                             </div>
  281.                                         {% endfor %}
  282.                                     </div>                                                        
  283.                                 </div>
  285.                                 <script>
  286.                                     $(document).ready(function () {
  287.                                         $('.accordion-button').click(function () {
  288.                                             $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle');
  289.                                             $('.accordion-button').not(this).find('i').removeClass('fa-minus-circle').addClass('fa-plus-circle');
  290.                                         });
  291.                                     });
  292.                                </script>
  293.  
  294.                                 {% if app.user %}           
  295.                                     <br>
  296.                                     <div class="d-flex justify-content-center">
  297.                                         <a href="{{path('app_accordeons_index',{'contenu':res2.contenuses.0.id})}}"><button type="button"  style="margin-bottom:5px" class="btn btn-info"  >Gérer les accordéons</button></a>
  298.                                     </div>
  299.                                 {% endif %}
  300.               
  301.                             {% endif %}
  303.                             <!-- ///\\\ ///\\\ FIN ACCORDEON  ///\\\ ///\\\  -->
  305.                         {% endif %}
  307.                             
  308.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  312.                         {% if res2.contenuses is not empty %}
  314.                             <!-- ///\\\ ///\\\ BOX PICTO CAROUSEL ///\\\ ///\\\  -->
  316.                             {% if res2.contenuses.0.typesContenus.id == 10 %}
  317.                                 <div data-aos="fade-up" data-aos-duration="1000" class="container d-flex paddingPerso2" >
  318.                                     <div class="slider-demo-valeur">
  319.                                         {% for carou in  res2.contenuses.0.carousels %}
  320.                                             <div data-aos="fade-up" data-aos-duration="1000" class="carte ">
  321.                                                 <div class="col-12">
  322.                                                     <div class="image d-flex justify-content-center">
  323.                                                         <img src="{{asset('uploads/carousels/'~carou.image)}}" alt="{% if app.request.locale == 'en' %}{{carou.titreEn}}{% else %}{{carou.titreFr}}{% endif %}">
  324.                                                     </div>
  325.                                                     <div class="corps-carte">
  326.                                                         <div class="tete-carte">
  327.                                                             <p>{% if app.request.locale == 'en' %}{{carou.titreEn|raw}}{% else %}{{carou.titreFr|raw}}{% endif %} </p>
  328.                                                         </div>
  329.                                                         <div class="texte-carte">
  330.                                                             <div class="texte-1">
  331.                                                                 {% if app.request.locale == 'en' %}{{carou.texteEn|raw}}{% else %}{{carou.texteFr|raw}}{% endif %} 
  332.                                                             </div>
  333.                                                         </div>
  334.                                                     </div>
  335.                                                 </div>
  336.                                             </div>
  337.                                         {% endfor %}
  338.                                     </div>
  339.                                 </div>
  340.                             {% endif %}
  341.                                 
  342.                             {% if app.user %}
  343.                                 {% if res2.contenuses.0.typesContenus.id == 10 %}            
  344.                                     <br>
  345.                                     <div data-aos="fade-up" data-aos-duration="1000" class="d-flex justify-content-center">
  346.                                         <a href="{{path('app_carousels_index',{'contenu':res2.contenuses.0.id})}}"><button type="button"  style="margin-bottom:5px" class="btn btn-info"  >Gérer les carousels</button></a>
  347.                                     </div>
  348.                                 {% endif %}
  349.                             {% endif %}
  351.                             <!-- ///\\\ ///\\\ FIN BOXPICTO CAROUSEL ///\\\ ///\\\  -->
  352.                         {% endif %}
  355.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  358.                         {% if res2.contenuses is not empty %}
  360.                             <!-- ///\\\ ///\\\ BOX PICTO CAROUSEL ///\\\ ///\\\  -->
  362.                             {% if res2.contenuses.0.typesContenus.id == 11  %}
  363.                                 <div  class="row justify-content-center justify-content-md-start" >
  364.                                     <div class="col-12">
  365.                                         <div class="row pb-4">
  366.                                             <div class="titre ">
  367.                                                 <p class="opensans_bold_red_15">TEMOIGNAGES</p>
  368.                                             </div>
  369.                                         </div>  
  370.                                     </div> 
  371.                                 </div>
  372.                                 {% set tem = -1 %}
  373.                                 <div class="row text-light" >
  374.                                     <div class="col-12">
  375.                                         <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  376.                                             <div class="carousel-indicators">
  377.                                                 {% for res in temoignages %}
  378.                                                     {% set tem = tem + 1 %}
  379.                                                     <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{tem}}" {% if tem == 0 %}class="active" aria-current="true"{% endif %} aria-label="Slide {{tem}}"></button>
  380.                                                 {% endfor %}
  381.                                             </div>
  383.                                             {% set tem2 = -1 %}
  384.                                             <div class="carousel-inner">
  385.                                                 {% for res in temoignages %}
  386.                                                     {% set tem2 = tem2 + 1 %}
  387.                                                     <div class="carousel-item {% if tem2 == 0 %}active{% endif %}">
  388.                                                         <div class="row text-light">
  389.                                                             <h2 class="">{{res.titre}}</hé>
  390.                                                         </div>
  391.                                                         <br>
  392.                                                         <p class="citation ">{{res.texte}}</p>
  393.                                                         <br>
  394.                                                         <p style="color:red; font-weight: bold; ">{{res.auteur}}</p>  
  395.                                                     </div>
  396.                                                 {% endfor %}
  397.                                             </div>
  398.                                             <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
  399.                                                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  400.                                                 <span class="visually-hidden">Previous</span>
  401.                                             </button>
  402.                                             <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
  403.                                                 <span class="carousel-control-next-icon" aria-hidden="true"></span>
  404.                                                 <span class="visually-hidden">Next</span>
  405.                                             </button>
  406.                                         </div>
  407.                                     </div>
  408.                                 </div>
  409.                                 {% if app.user %}
  410.                                     {% if res2.contenuses.0.typesContenus.id == 11 %}        
  411.                                         <br>
  412.                                         <div class="d-flex justify-content-center">
  413.                                             <a href="{{path('app_temoignages_index')}}"><button type="button"  style="margin-bottom:5px" class="btn btn-info"  >Gérer les témoignages</button></a>
  414.                                         </div>
  415.                                     {% endif %}
  416.                                 {% endif %}
  417.                             {% endif %}
  419.                             <!-- ///\\\ ///\\\ FIN BOX PICTO CAROUSEL ///\\\ ///\\\  -->
  421.                         {% endif %}
  424.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  427.                         {% if res2.contenuses is not empty %}
  429.                             <!-- ///\\\ ///\\\ CAROUSEL ///\\\ ///\\\  -->
  431.                                 {% if res2.contenuses.0.typesContenus.id == 9 %}
  432.                                     <div class="formation">
  433.                                         <div class="container-carousel-true">
  434.                                             <div class="slider-demo-galerie " style="padding-bottom:120px;">
  435.                                                 {% for carou in  res2.contenuses.0.carousels %}
  436.                                                     <div class="carteFormation" style="">                                       
  437.                                                         <img src="{{asset('uploads/carousels/'~carou.image)}}" alt="{% if app.request.locale == 'en' %}{{carou.titreEn}}{% else %}{{carou.titreFr}}{% endif %}">
  438.                                                         {% if carou.titreEn != '' or carou.titreFr != '' %}
  439.                                                             <div class="image-overlay1">
  440.                                                                 <p class="sous-title-manufa">{% if app.request.locale == 'en' %}{{carou.titreEn|raw}}{% else %}{{carou.titreFr|raw}}{% endif %}</p>
  441.                                                             </div>
  442.                                                         {% endif %}
  443.                                                         {% if carou.texteEn != '' or carou.texteFr != '' %}
  444.                                                             {% if app.request.locale == 'en' %}{{carou.texteEn|raw}}{% else %}{{carou.texteFr|raw}}{% endif %}
  445.                                                         {% endif %}
  446.                                                     </div>
  447.                                                 {% endfor %}
  448.                                             </div>
  449.                                         </div>
  450.                                     </div>
  451.                                 {% endif %}
  452.                                 
  453.                                 {% if app.user %}
  454.                                     {% if res2.contenuses.0.typesContenus.id == 9 %}              
  455.                                         <br>
  456.                                         <div class="d-flex justify-content-center">
  457.                                             <a href="{{path('app_carousels_index',{'contenu':res2.contenuses.0.id})}}"><button type="button"  style="margin-bottom:5px" class="btn btn-info"  >Gérer les carousels</button></a>
  458.                                         </div>
  459.                                     {% endif %}
  460.                                 {% endif %}
  461.                                       
  462.                             <!-- ///\\\ ///\\\ FIN CAROUSEL ///\\\ ///\\\  -->
  464.                         {% endif %}
  467.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  470.                         {% if res2.contenuses is not empty %}
  472.                             <!-- ///\\\ ///\\\ CHIFFRES CLES ///\\\ ///\\\  -->
  474.                                  {% if res2.contenuses.0.typesContenus.id == 5  %}
  475.                                     <div class="cartes-3" style="background:{{res2.contenuses.0.background}}; border-radius: 30px;">
  476.                                         <div class="carte">
  477.                                             {% if res2.contenuses.0.image is not empty %}
  478.                                                 <img src="{{asset('uploads/contenus/'~res2.contenuses.0.image)}}" alt="" style="width:100%;height:100%;border-radius:25px;">
  480.                                             {% else %}
  481.                                                 <div class="titre">
  482.                                                     <p>{% if app.request.locale == 'en' %}{{res2.contenuses.0.titreEn|raw}}{% else %}{{res2.contenuses.0.titreFr|raw}}{% endif %} </p>
  483.                                                 </div>
  484.                                                 <div class="texte">
  485.                                                     {% if app.request.locale == 'en' %}{{res2.contenuses.0.texteEn|raw}}{% else %}{{res2.contenuses.0.texteFr|raw}}{% endif %} 
  486.                                                 </div>
  487.                                             {% endif %}
  488.                                         </div>
  489.                                     </div>
  490.                                 {% endif %}
  492.                             <!-- ///\\\ ///\\\ FIN CHIFFRES CLES ///\\\ ///\\\  -->
  494.                         {% endif %}
  498.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  500.         
  501.                         
  502.                         {% if res2.contenuses is not empty %}
  504.                             <!-- ///\\\ ///\\\ CHIFFRES CLES 2 ///\\\ ///\\\  -->
  506.                                 {% if res2.contenuses.0.typesContenus.id == 6  %}
  507.                                     <div class="accueil4">
  508.                                         <div {% if res2.contenuses.0.titreFr|length > 4 %}id="soixante-dix"{% endif %} class="carte">
  509.                                             <div class="tete-carte" style="background-color:{{res2.contenuses.0.background}}">
  510.                                                 <div class="chiffre justify-content-center" style="background-color:{{res2.contenuses.0.background}}">
  511.                                                     {% if app.request.locale == 'en' %}{{res2.contenuses.0.titreEn|raw}}{% else %}{{res2.contenuses.0.titreFr|raw}}{% endif %} 
  512.                                                 </div>
  513.                                             </div>
  514.                                             <div class="texte">
  515.                                                 {% if app.request.locale == 'en' %}{{res2.contenuses.0.texteEn|raw}}{% else %}{{res2.contenuses.0.texteFr|raw}}{% endif %} 
  516.                                             </div>
  517.                                         </div>
  518.                                     </div>
  519.                                 {% endif %}
  521.                             <!-- ///\\\ ///\\\ FIN CHIFFRES CLES 2 ///\\\ ///\\\  -->
  523.                         {% endif %}
  526.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  529.                         {% if res2.contenuses is not empty %}
  531.                             <!-- ///\\\ ///\\\ BOX PICTO + LIEN ///\\\ ///\\\  -->
  533.                                 {% if res2.contenuses.0.typesContenus.id == 13 %}
  534.                                     <div data-aos="fade-up" data-aos-duration="1000" class="carte">
  535.                                         <div class="image d-flex justify-content-center">
  536.                                             <img src="{{asset('uploads/contenus/'~res2.contenuses.0.image)}}" alt="{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}">
  537.                                         </div>
  538.                                         <div class="corps-carte">
  539.                                             <div class="tete-carte" style="background-color:{{res2.contenuses.0.background}}">
  540.                                                 <p>{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}</p>
  541.                                             </div>
  542.                                             <div class="texte-carte" style="min-height:204px; background-color:{{res2.contenuses.0.couleur1}}">
  543.                                                 <div class="texte-1">
  544.                                                     {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}
  545.                                                 </div>
  546.                                             </div>    
  547.                                         /div>
  548.                                     </div>
  549.                                 {% endif %}
  551.                             <!-- ///\\\ ///\\\ FIN BOX PICTO + LIEN ///\\\ ///\\\  -->
  552.        
  553.                         {% endif %}
  556.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  559.                         {% if res2.contenuses is not empty %}
  561.                             <!-- ///\\\ ///\\\ BOUTTON ///\\\ ///\\\  -->    
  563.                                 {% if res2.contenuses.0.typesContenus.id == 12 %}                  
  564.                                     <a href="{{res2.contenuses.0.document}}" target="_blank" style="text-decoration:none;">
  565.                                         <button type="button btn-modal" class="" 
  566.                                             style="
  567.                                                 background-color:{{res2.contenuses.0.background}}; 
  568.                                                 border:solid 3px {{res2.contenuses.0.couleur1}};
  569.                                                 border-radius: 30px!important;
  570.                                                 padding-right: 2%!important;
  571.                                                 padding-left: 2%!important;
  572.                                                 padding-top: 3%!important;   
  573.                                                 width: 400px;
  574.                                                 float:right;
  575.                                         ">
  576.                                         {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}</button>
  577.                                     </a>
  578.                                 {% endif %}
  580.                                 <!-- ///\\\ ///\\\ FIN BOUTTON ///\\\ ///\\\  --> 
  582.                         {% endif %}
  585.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  586.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  587.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  592.                         <!-- ///\\\ ///\\\ BOUTON MODIFIER CMS ///\\\ ///\\\  --> 
  593.                         {% if res2.contenuses is not empty %}
  594.                             {% if res2.contenuses.0.typesContenus.id != 10 and res2.contenuses.0.typesContenus.id != 9 %}
  595.                                 {% if app.user %}
  596.                                     <div class="d-flex justify-content-center mb-3">
  597.                                         <a href="{{path('app_editContent',{'id':res2.contenuses.0.id,'type':res2.contenuses.0.typesContenus.libelle})}}">
  598.                                             <div class="d-flex justify-content-center align-items-center cubeIcon">
  599.                                                 <i class="fa-solid fa-pen"></i>
  600.                                             </div>
  601.                                         </a>
  602.                                         
  603.                                     </div>
  604.                                 {% endif %}
  605.                             {% endif %}
  606.                         {% endif %}
  609. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->                   
  610. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\    MODAL CONTENUS    ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->
  611. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  614. {% if app.user %}
  615.    
  619. <!-- ///\\\ ///\\\ MODAL CONTENUS ///\\\ ///\\\  --> 
  620.     <div class="modal fade" id="addContenu{{res2.id}}" tabindex="-1" aria-labelledby="addContenu" aria-hidden="true">
  621.         <div class="modal-dialog">
  622.             <div class="modal-content">
  623.                 <div class="modal-body">
  624.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  626.                     <div class="container-modal d-flex flex-column">
  627.                         <h2>Ajouter un contenu</h2>
  628.                         <p>Les «blocs» peuvent contenir chacun un «Contenu» dédiés à du texte, une image, un lien youtube, …</p>
  629.                     </div>
  630.                     
  631.                     <div class="container-contenu d-flex flex-wrap  justify-content-start">
  632.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'texte'})}}">
  633.                             <div class="container-picto container-picto-texte">
  634.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  635.                                     <img src="{{asset('img/cms/cpi-textes.svg')}}" alt="">
  636.                                 </div>
  637.                                 <p class="colonneText text-center">Texte</p>
  638.                             </div>
  639.                         </a>
  641.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'image'})}}">
  642.                             <div class="container-picto container-picto-texte">
  643.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  644.                                     <img src="{{asset('img/cms/cpi-images.svg')}}" alt="">
  645.                                 </div>
  646.                                 <p class="colonneText text-center">Image</p>
  647.                             </div>
  648.                         </a>
  649.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'video'})}}">
  650.                             <div class="container-picto container-picto-texte">
  651.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  652.                                     <img src="{{asset('img/cms/cpi-videos.svg')}}" alt="">
  653.                                 </div>
  654.                                 <p class="colonneText text-center">Vidéo</p>
  655.                             </div>
  656.                         </a>
  657.                        
  659.                        
  660.                       
  661.                        
  662.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'temoignage'})}}">
  663.                             <div class="container-picto container-picto-texte">
  664.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  665.                                     <img src="{{asset('img/cms/cpi-temoignage.svg')}}" alt="">
  666.                                 </div>
  667.                                 <p class="colonneText text-center">{% if app.request.locale == 'fr' %}Témoignage{% else %}Testimonial{% endif %}</p>
  668.                             </div>
  669.                         </a>
  670.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'button'})}}">
  671.                             <div class="container-picto container-picto-texte">
  672.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  673.                                     <img src="{{asset('img/cms/cpi-temoignage.svg')}}" alt="">
  674.                                 </div>
  675.                                 <p class="colonneText text-center">Bouton</p>
  676.                             </div>
  677.                         </a>     
  678.                     </div>
  680.                     <div class="modal-submit d-flex justify-content-end align-items-end">
  681.                         <button type="submit" class=" btnAdd btnAdd2">{% if app.request.locale == 'fr' %}Ajouter{% else %}Add{% endif %}</button>
  682.                     </div>
  683.                 </div>
  684.             </div>
  685.         </div> 
  686.     </div>   
  688. <!-- ///\\\ ///\\\ FIN MODAL CONTENUS ///\\\ ///\\\  -->                                                                        
  691. <!-- ///\\\ ///\\\ MODAL CONTENUS 2 ///\\\ ///\\\  -->                             
  692.     <div class="modal fade" id="addContenu{{res2.id}}" tabindex="-1" aria-labelledby="addContenu" aria-hidden="true">
  693.         <div class="modal-dialog">
  694.             <div class="modal-content">
  695.                 <div class="modal-body">
  696.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  698.                     <div class="container-modal d-flex flex-column">
  699.                         <h2>Ajouter un contenu</h2>
  700.                         <p>Les «blocs» sont des éléments de « Section » répartis en colonnes contenant chacun un «Contenu» dédiés à du texte, une image ou un lien youtube.</p>
  701.                     </div>
  702.                     
  703.                     <div class="container-grid-choix d-flex flex-wrap justify-content-around ">
  704.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'texte'})}}">
  705.                             <div class="container-choix">
  706.                                 <div class="simu-grid d-flex justify-content-center align-items-center">
  707.                                     <div class="simu-col simu-col-12 d-flex justify-content-center align-items-center">
  708.                                         <p>12</p>
  709.                                     </div>
  710.                                 </div>
  711.                                 <p class="colonneText text-center">Texte</p>
  712.                             </div>
  713.                         </a>
  714.                     <a href="{{path('app_addBloc',{'ligne':res.id,'type':66})}}">
  715.                         <div class="container-choix">
  716.                             <div class="simu-grid d-flex justify-content-around align-items-center">
  717.                                 <div class="simu-col simu-col-6 d-flex justify-content-center align-items-center">
  718.                                     <p>6</p>
  719.                                 </div>
  720.                                 <div class="simu-col simu-col-6 d-flex justify-content-center align-items-center">
  721.                                     <p>6</p>
  722.                                 </div>
  723.                             </div>  
  724.                             <p class="colonneText text-center">3 colonne</p>
  725.                         </div>
  726.                     </a>
  728.                     <a href="{{path('app_addBloc',{'ligne':res.id,'type':444})}}">
  729.                         <div class="container-choix">
  730.                             <div class="simu-grid d-flex justify-content-around align-items-center">
  731.                                 <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  732.                                     <p>4</p>
  733.                                 </div>
  734.                                 <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  735.                                     <p>4</p>
  736.                                 </div>
  737.                                 <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  738.                                     <p>4</p>
  739.                                 </div>
  740.                             </div>
  741.                             <p class="colonneText text-center">2 colonne</p>
  742.                         </div>
  743.                     </a>
  745.                     <a href="{{path('app_addBloc',{'ligne':res.id,'type':84})}}">
  746.                         <div class="container-choix">
  747.                             <div class="simu-grid d-flex justify-content-around align-items-center">
  748.                                 <div class="simu-col simu-col-8 d-flex justify-content-center align-items-center">
  749.                                     <p>8</p>
  750.                                 </div>
  751.                                 <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  752.                                     <p>4</p>
  753.                                 </div>
  754.                             </div>
  755.                             <p class="colonneText text-center">2 colonne</p>
  756.                         </div>
  757.                     </a>
  759.                     <a href="{{path('app_addBloc',{'ligne':res.id,'type':48})}}">
  760.                         <div class="container-choix">
  761.                             <div class="simu-grid d-flex justify-content-around align-items-center">
  762.                                 <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  763.                                     <p>4</p>
  764.                                 </div>
  765.                                 <div class="simu-col simu-col-8 d-flex justify-content-center align-items-center">
  766.                                     <p>8</p>
  767.                                 </div>                    
  768.                             </div>
  769.                             <p class="colonneText text-center">2 colonne</p>
  770.                         </div>
  771.                     </a>
  773.                 </div>
  775.                 <div class="modal-submit d-flex justify-content-end align-items-end">
  776.                     <button type="submit" class=" btnAdd btnAdd2">Ajouter</button>
  777.                 </div>
  778.             </div>
  779.         </div>
  780.     </div> 
  781. </div>
  782. {% endif %}
  785. <!-- ///\\\ ///\\\ FIN MODAL CONTENUS 2 ///\\\ ///\\\  -->  
  787. </div>
  788. {% endfor %}                       
  789. </div>
  793. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->                   
  794. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\    MODAL BLOCK       ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  795. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  796.                       
  797.                
  798.     </div>
  800. </div>
  801. {% endfor %}
  804. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->                   
  805. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\    MODAL SECTION     ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  806. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  814. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->  
  817. <!-- ///\\\ ///\\\  FIN SECTION + FORME BLEU SOUS SECTION DANS LE DOM ///\\\ ///\\\  --> 
  819. </section>
  820. <div class="container">
  821.     <div class="formeBleu">
  822.         <div class="row justify-content-center d-flex">
  823.             {% if section.rond != '' %}
  824.                 <img src="{{asset('uploads/sections/'~section.rond)}}" class="img-fluid d-none d-lg-block">                        
  825.             {% endif %}
  826.         </div>
  827.     </div>
  828. </div>
  829. {% endfor %}
  838. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->                   
  839. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\    SCRIPT PCONTENT   ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  840. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  843. <!-- ///\\\ ///\\\  SCRIPT ACCORDEON ///\\\ ///\\\  -->  
  845. <script>
  846.     let accordionHeaders = document.querySelectorAll('.accordion-header');
  848.     accordionHeaders.forEach(header => {
  849.         let button = header.querySelector('.texteDeroulant button');
  851.         button.addEventListener('click', function () {
  852.             let parentAccordion = header.closest('.accordion');
  853.             let buttons = parentAccordion.querySelectorAll('.texteDeroulant button');
  854.             let content = header.nextElementSibling; // The content section to show/hide
  856.             // Check if the content section is already open
  857.             if (content.classList.contains('show')) {
  858.                 // Close the content section
  859.                 content.classList.remove('show');
  860.                 content.classList.add('collapse');
  861.             } else {
  862.                 // Close all other open sections (if any) and open this content section
  863.                 buttons.forEach(btn => {
  864.                     let contentToClose = btn.parentElement.nextElementSibling;
  865.                     if (contentToClose.classList.contains('show')) {
  866.                         contentToClose.classList.remove('show');
  867.                         contentToClose.classList.add('collapse');
  868.                     }
  869.                 });
  871.                 // Open the content section
  872.                 content.classList.remove('collapse');
  873.                 content.classList.add('show');
  874.             }
  876.             // Toggle the button color
  877.             if (button.style.color !== 'red') {
  878.                 buttons.forEach(btn => {
  879.                     btn.style.color = 'white';
  880.                 });
  881.                 button.style.color = 'red';
  882.             } else {
  883.                 button.style.color = 'white';
  884.             }
  885.         });
  886.     });
  888.     let buttonsForIcon = document.querySelectorAll('.texteDeroulant button');
  889.     let icons = document.querySelectorAll('.jsIcon');
  890.     let previousIcon = null;
  892.     buttonsForIcon.forEach((button, index) => {
  893.         let icon = icons[index];
  895.         button.addEventListener('click', function () {
  896.             if (previousIcon !== null && previousIcon !== icon) {
  897.                 // Restore the previous icon to fa-plus-circle
  898.                 previousIcon.classList.remove('fa-minus-circle');
  899.                 previousIcon.classList.add('fa-plus-circle');
  900.             }
  902.             if (icon.classList.contains('fa-plus-circle')) {
  903.                 icon.classList.remove('fa-plus-circle');
  904.                 icon.classList.add('fa-minus-circle');
  905.             } else {
  906.                 icon.classList.remove('fa-minus-circle');
  907.                 icon.classList.add('fa-plus-circle');
  908.             }
  910.             previousIcon = icon;
  911.         });
  912.     });
  913. </script>
  915. </section>
  916. </main>
  918.          
  920.          
  921.         
  922.          
  923.            <script type="text/javascript">
  924.             $(document).ready(function(){
  925.                 $('.slider-demo-valeur').slick({
  926.                     arrows: true,
  927.                     infinite:true,
  928.                     prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
  929.                     nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
  930.                     slidesToShow:4,
  931.                     slidesToScroll:4,
  932.                     responsive:[{
  933.                         breakpoint:1400,
  934.                         settings:{
  935.                             slidesToShow:3,  
  936.                             slidesToScroll:3,            
  937.                         }
  938.                     },{
  939.                         breakpoint:1200,
  940.                         settings:{
  941.                             slidesToShow:2,
  942.                             slidesToScroll:2, 
  943.                         }
  944.                     },
  945.                     {
  946.                         breakpoint:769,
  947.                         settings:{
  948.                             slidesToShow:1,
  949.                             slidesToScroll:1, 
  950.                         }
  951.                     }],
  952.                 });
  953.             });
  954.         </script>
  956.         <script>
  957.             function changeLanguage(selectedButton, modalId) {
  958.                 let modal = document.getElementById(modalId);
  959.                 let buttons = modal.querySelectorAll(".button-langue");
  960.                 let inputField = modal.querySelector(".sectionTitle");
  961.                 
  962.                 buttons.forEach((button) => {
  963.                     if (button === selectedButton) {
  964.                         button.classList.add("button-langue-active");
  965.                         button.classList.remove("button-langue-noactive");
  966.         
  967.                         // Set the input field value based on the active language
  968.                         switch (button.textContent) {
  969.                             case "FR":
  970.                                 inputField.value = "Titre de la section FR";
  971.                                 break;
  972.                             case "EN":
  973.                                 inputField.value = "Section Title EN";
  974.                                 break;
  975.                             case "DE":
  976.                                 inputField.value = "Abschnittstitel DE";
  977.                                 break;
  978.                             // Add cases for other languages if needed
  979.                             default:
  980.                                 inputField.value = "";
  981.                         }
  982.                     } else {
  983.                         button.classList.remove("button-langue-active");
  984.                         button.classList.add("button-langue-noactive");
  985.                     }
  986.                 });
  987.             }
  988.         
  989.             function changeColor(selectedColorButton, modalId) {
  990.                 let modal = document.getElementById(modalId);
  991.                 const colorButtons = modal.querySelectorAll(".button-couleur");
  992.                 colorButtons.forEach((colorButton) => {
  993.                     if (colorButton === selectedColorButton) {
  994.                         colorButton.classList.add("button-color-active");
  995.                         colorButton.classList.remove("button-color-noactive");
  996.                     } else {
  997.                         colorButton.classList.remove("button-color-active");
  998.                         colorButton.classList.add("button-color-noactive");
  999.                     }
  1000.                 });
  1001.             }
  1002.         
  1003.             function clearDefaultText(inputField) {
  1004.                 // Clear the default value if it matches the default text
  1005.                 if (inputField.value === inputField.defaultValue) {
  1006.                     inputField.value = '';
  1007.                 }
  1008.             }
  1009.         
  1010.             function restoreDefaultText(inputField) {
  1011.                 // Restore the default value if the input is empty
  1012.                 if (inputField.value === '') {
  1013.                     inputField.value = inputField.defaultValue;
  1014.                 }
  1015.             }
  1016. </script>
  1017.         
  1019.   
  1020.        
  1022. <!-- ///\\\ ///\\\  IMPORT ///\\\ ///\\\  -->  
  1026. <script type="text/javascript">
  1027.     $(document).ready(function() {
  1028.         $('.slider-demo-galerie').slick({
  1029.             arrows: true,
  1030.             infinite:true,
  1031.             autoplay: true, // Ajout de l'option autoplay
  1032.             autoplaySpeed: 4000, // Durée de chaque diapositive en millisecondes
  1033.             slidesToShow:4,
  1034.             slidesToScroll:4,
  1035.             prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
  1036.             nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
  1037.             responsive:[{
  1038.                 breakpoint:1400,
  1039.                 settings: {
  1040.                     slidesToShow:3,  
  1041.                     slidesToScroll:3,            
  1042.                 }
  1043.                 },{
  1044.                     
  1045.                 breakpoint:1200,
  1046.                 settings:{
  1047.                     slidesToShow:2,
  1048.                     slidesToScroll:2, 
  1049.                 }
  1050.                 },
  1051.                 {
  1052.                 breakpoint:769,
  1053.                 settings:{
  1054.                     slidesToShow:1,
  1055.                     slidesToScroll:1, 
  1056.                 }
  1057.             }],
  1058.         });
  1059.        
  1061.         $('.slider-demo-actu').slick({
  1062.             arrows: true,
  1063.             infinite: true,
  1064.             prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
  1065.             nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
  1066.             slidesToShow: 4,
  1067.             slidesToScroll: 4,
  1068.                 responsive:[{
  1069.                     breakpoint:1400,
  1070.                     settings:{
  1071.                         slidesToShow:3,  
  1072.                         slidesToScroll:3,            
  1073.                     }
  1074.                 },{
  1075.                     breakpoint:1200,
  1076.                     settings:{
  1077.                         slidesToShow:2,
  1078.                         slidesToScroll:2, 
  1079.                     }
  1080.                 },
  1081.                 {
  1082.                     breakpoint:769,
  1083.                     settings:{
  1084.                         slidesToShow:1,
  1085.                         slidesToScroll:1, 
  1086.                     }
  1087.                 }],
  1088.             });
  1089.         });
  1090.     </script>
  1096.                                     <!-- FIN CMS -->
  1100.     
  1101.     <style>
  1102.     .dropdown-menu{
  1103.         z-index:9999!important;
  1104.     }
  1105.     </style>
  1107.         {% set typeSelected = app.request.query.get('type') %}
  1108.         {% set sujetSelected = app.request.query.get('sujet') %}
  1109.         {% set logicielSelected = app.request.query.get('logiciel') %}
  1110.         {% set versionSelected = app.request.query.get('version') %}
  1111.         {% set formationSelected = app.request.query.get('formation') %}
  1113.         <style>
  1114.             .btn-dangerr{
  1115.                 background-color:#30278E!important;
  1116.                 font-weight:bold!important;
  1117.                 color:white!important;
  1118.             }
  1119.         </style>
  1122.         <div class="accueil2" id="formaList">
  1123.             <div class="container">
  1124.                 
  1125.                 <div class="row change" style="padding-top: 112px;">
  1126.          
  1127.                        
  1128.                     <div class="col-12">
  1129.                         <p data-aos="fade-right" data-aos-duration="1000" class="sous-titre">{% trans %}formation-soustitre{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':84})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</p>
  1130.                         <h1 data-aos="fade-right" data-aos-duration="1000" class="primaire-blue">{% trans %}notre-catalogue-titre{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':85})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</h1>
  1131.                     </div>
  1134.                     <div class="tri_formations my-4" >
  1135.                         <div class="col-12">
  1136.                             <div class="row d-flex justify-contenttbetween">
  1137.                                 
  1139.                                 <div class="col-6 col-md-4 col-lg-2 d-flex justify-content-start align-items-center" style="z-index:3">
  1140.                                     <div data-aos="fade-up" data-aos-duration="1000" class="dropdown my-3" >
  1141.                <button class="btn {{ (typeSelected == 'all' or typeSelected is null) ? 'btn-secondary' : 'btn-dangerr' }} dropdown-toggle" type="button" id="dropdownMenuButtonType" data-bs-toggle="dropdown" aria-expanded="false" style="">
  1142.     {% if typeSelected and typeSelected != 'all' %}
  1143.         {% for res in types %}
  1144.             {% if res.id == typeSelected %}
  1145.                 {% set title = app.request.locale == 'fr' ? res.titreFr : res.titreEn %}
  1146.                 {{ title|length > 10 ? title|slice(0, 11) ~ '...' : title }}
  1147.             {% endif %}
  1148.         {% endfor %}
  1149.     {% else %}
  1150.         {{ app.request.locale == 'fr' ? 'Type' : 'Type' }}
  1151.     {% endif %}
  1152. </button>
  1158.                                         <ul class="dropdown-menu" >
  1159.                                             <li>
  1160.     <a style="font-weight:600;" class="dropdown-item text-light font-weight-bold" href="{{ path('formations', {'type': 'all', 'sujet': sujetSelected, 'formation': formationSelected, 'logiciel': logicielSelected, 'version': versionSelected, 'locale': app.request.locale}) }}#formaList">
  1161.         {% if app.request.locale == 'fr' %}Tous les Types{% else %}All Types{% endif %}
  1162.     </a>
  1163. </li>
  1164.                                             {% for res in types %}
  1165.                                                 <li><a class="dropdown-item text-light" href="{{ path('formations', {'type': res.id, 'sujet': sujetSelected, 'logiciel': logicielSelected,'formation': formationSelected, 'version': versionSelected, 'locale': app.request.locale}) }}#formaList">
  1166.                                                     {% if app.request.locale == 'fr' %}{{ res.titreFr }}{% else %}{{ res.titreEn }}{% endif %}
  1167.                                                 </a></li>
  1168.                                             {% endfor %}
  1169.                                         </ul>
  1170.                                     </div>
  1171.                                 </div>
  1173.                                 <div class="col-6 col-md-4 col-lg-2 d-flex justify-content-start  align-items-center" style="z-index:4">
  1174.                                     <div data-aos="fade-up" data-aos-duration="1000" class="dropdown my-3" style="">
  1175.                                        <button class="btn {{ sujetSelected ? 'btn-dangerr' : 'btn-secondary' }} dropdown-toggle" type="button" id="dropdownMenuButtonType" data-bs-toggle="dropdown" aria-expanded="false">
  1176.                                             {% if sujetSelected %}
  1177.                                                 {% for res in sujets %}
  1178.                                                     {% if res.id == sujetSelected %}
  1179.                                                         {% set title = app.request.locale == 'fr' ? res.titreFr : res.titreEn %}
  1180.                                                         {{ title|length > 10 ? title|slice(0, 11) ~ '...' : title }}
  1181.                                                     {% endif %}
  1182.                                                 {% endfor %}
  1183.                                             {% else %}
  1184.                                                 {% set defaultTitle = app.request.locale == 'fr' ? 'Sujet' : 'Subject' %}
  1185.                                                 {{ defaultTitle|length > 10 ? defaultTitle|slice(0, 11) ~ '...' : defaultTitle }}
  1186.                                             {% endif %}
  1187.                                         </button>
  1189.                                         <ul class="dropdown-menu"  >
  1190.                                             <li>
  1191.                                                 <a style="font-weight:600;" class="dropdown-item text-light font-weight-bold" href="{{ path('formations', {'sujet': '', 'type': typeSelected,'formation': formationSelected, 'logiciel': logicielSelected, 'version': versionSelected, 'locale': app.request.locale}) }}#formaList">
  1192.                                                     {% if app.request.locale == 'fr' %}Tous les Sujets{% else %}All Subjects{% endif %}
  1194.                                                 </a>
  1195.                                             </li>
  1196.                                             {% for res in sujets %}
  1197.                                                 <li><a class="dropdown-item text-light" href="{{ path('formations', {'sujet': res.id, 'type': typeSelected, 'logiciel': logicielSelected, 'formation': formationSelected,'version': versionSelected, 'locale': app.request.locale}) }}#formaList">
  1198.                                                 {% if app.request.locale == 'fr' %}{{ res.titreFr }}{% else %}{{ res.titreEn }}{% endif %}
  1199.                                                 </a></li>
  1200.                                             {% endfor %}
  1201.                                         </ul>
  1202.                                     </div>
  1203.                                 </div>
  1206.                                  <div class="col-6 col-md-4 col-lg-2 d-flex justify-content-start  align-items-center" style="z-index:2">
  1207.                                     <div data-aos="fade-up" data-aos-duration="1000" class="dropdown my-3" style="">
  1208.                                        <button class="btn {{ logicielSelected ? 'btn-dangerr' : 'btn-secondary' }} dropdown-toggle" type="button" id="dropdownMenuButtonType" data-bs-toggle="dropdown" aria-expanded="false">
  1209.                                             {% if logicielSelected %}
  1210.                                                 {% for res in logiciels %}
  1211.                                                     {% if res.id == logicielSelected %}
  1212.                                                         {% set title = app.request.locale == 'fr' ? res.titreFr : res.titreEn %}
  1213.                                                         {{ title|length > 10 ? title|slice(0, 11) ~ '...' : title }}
  1214.                                                     {% endif %}
  1215.                                                 {% endfor %}
  1216.                                             {% else %}
  1217.                                                 {% set defaultTitle = app.request.locale == 'fr' ? 'Logiciel' : 'Software' %}
  1218.                                                 {{ defaultTitle|length > 10 ? defaultTitle|slice(0, 11) ~ '...' : defaultTitle }}
  1219.                                             {% endif %}
  1220.                                         </button>
  1222.                                         <ul class="dropdown-menu"  >
  1223.                                             <li>
  1224.                                                 <a style="font-weight:600;" class="dropdown-item text-light font-weight-bold" href="{{ path('formations', {'logiciel': '', 'type': typeSelected, 'sujet': sujetSelected, 'formation': formationSelected,'version': versionSelected, 'locale': app.request.locale}) }}#formaList">
  1225.                                                     {% if app.request.locale == 'fr' %}Tous les Logiciels{% else %}All Software{% endif %}
  1227.                                                 </a>
  1228.                                             </li>
  1229.                                             {% for res in logiciels %}
  1230.                                                 <li>
  1231.                                                     <a class="dropdown-item text-light" href="{{ path('formations', {'logiciel': res.id, 'type': typeSelected, 'sujet': sujetSelected, 'version': versionSelected,'formation': formationSelected, 'locale': app.request.locale}) }}#formaList">
  1232.                                                     {% if app.request.locale == 'fr' %}{{ res.titreFr }}{% else %}{{ res.titreEn }}{% endif %}
  1233.                                                     </a>
  1234.                                                 </li>
  1236.                                             {% endfor %}
  1237.                                         </ul>
  1238.                                     </div>
  1239.                                 </div>
  1244.                                  <div class="col-6 col-md-4 col-lg-2 d-flex justify-content-start  align-items-center" style="z-index:2">
  1245.                                     <div data-aos="fade-up" data-aos-duration="1000" class="dropdown my-3" >
  1246.                                        <button class="btn {{ versionSelected ? 'btn-dangerr' : 'btn-secondary' }} dropdown-toggle" type="button" id="dropdownMenuButtonType" data-bs-toggle="dropdown" aria-expanded="false">
  1247.                                             {% if versionSelected %}
  1248.                                                 {% for res in versions %}
  1249.                                                     {% if res.id == versionSelected %}
  1250.                                                         {% set title = app.request.locale == 'fr' ? res.titreFr : res.titreEn %}
  1251.                                                         {{ title|length > 10 ? title|slice(0, 11) ~ '...' : title }}
  1252.                                                     {% endif %}
  1253.                                                 {% endfor %}
  1254.                                             {% else %}
  1255.                                                 {% set defaultTitle = app.request.locale == 'fr' ? 'Version' : 'Version' %}
  1256.                                                 {{ defaultTitle|length > 10 ? defaultTitle|slice(0, 11) ~ '...' : defaultTitle }}
  1257.                                             {% endif %}
  1258.                                         </button>
  1260.                                         <ul class="dropdown-menu" >
  1261.                                                 <li>
  1262.                                                     <a style="font-weight:600;" class="dropdown-item text-light font-weight-bold" href="{{ path('formations', {'version': '', 'type': typeSelected, 'sujet': sujetSelected, 'logiciel': logicielSelected, 'formation': formationSelected,'locale': app.request.locale}) }}#formaList">
  1263.                                                         {% if app.request.locale == 'fr' %}Toutes les Versions{% else %}All Versions{% endif %}
  1264.                                                     </a>
  1265.                                                 </li>
  1266.                                             {% for res in versions %}
  1267.                                                 <li>
  1268.                                                     <a class="dropdown-item text-light" href="{{ path('formations', {'version': res.id, 'type': typeSelected, 'sujet': sujetSelected, 'logiciel': logicielSelected, 'formation': formationSelected,'locale': app.request.locale}) }}#formaList">
  1269.                                                     {% if app.request.locale == 'fr' %}{{ res.titreFr }}{% else %}{{ res.titreEn }}{% endif %}
  1270.                                                     </a>
  1271.                                                 </li>
  1272.                                             {% endfor %}
  1273.                                         </ul>
  1274.                                     </div>
  1275.                                 </div>
  1283.                                <div class="col-6 col-md-4 col-lg-2 d-flex justify-content-start align-items-center zIndexControl" style="z-index:1">
  1284.     <div data-aos="fade-up" data-aos-duration="1000" class="dropdown my-3" style="position:relative">
  1285.         <button id="dropdownButton" class="btn {{ formationSelected ? 'btn-dangerr' : 'btn-secondary' }} dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
  1286.                                             {% if formationSelected %}
  1287.                                                 {% for res in formation %}
  1288.                                                     {% if res.titreFr == formationSelected  %}
  1289.                                                         {% set title = app.request.locale == 'fr' ? res.titreFr : res.titreEn %}
  1290.                                                         {{ title|length > 10 ? title|slice(0, 11) ~ '...' : title }}
  1291.                                                     {% endif %}
  1292.                                                 {% endfor %}
  1293.                                             {% else %}
  1294.                                                 {% set defaultTitle = app.request.locale == 'fr' ? 'Formation' : 'Training' %}
  1295.                                                 {{ defaultTitle|length > 10 ? defaultTitle|slice(0, 11) ~ '...' : defaultTitle }}
  1296.                                             {% endif %}
  1297.                                         </button>
  1299.                                         <ul class="dropdown-menu" >
  1300.                                             <li>
  1301.                                                 <a style="font-weight:600;" class="dropdown-item text-light font-weight-bold" href="{{ path('formations', {'formation': '', 'type': typeSelected, 'sujet': sujetSelected, 'logiciel': logicielSelected, 'version': versionSelected,  'locale': app.request.locale}) }}#formaList">
  1302.                                                     {% if app.request.locale == 'fr' %}Toutes les Formations{% else %}All training {% endif %}
  1304.                                                 </a>
  1305.                                             </li>
  1306.                                             {% for res in formation %}
  1307.                                                 <li>
  1308.                                                     <a class="dropdown-item text-light" href="{{ path('formations', {'formation': res.titreFr, 'type': typeSelected, 'sujet': sujetSelected, 'logiciel': logicielSelected, 'version': versionSelected, 'locale': app.request.locale}) }}#formaList">
  1309.                                                     {% if app.request.locale == 'fr' %}{{ res.titreFr }}{% else %}{{ res.titreEn }}{% endif %}
  1310.                                                     </a>
  1312.                                                 </li>                  
  1313.                                             {% endfor %}
  1314.                                         </ul>
  1315.                                     </div>
  1316.                                 </div>   
  1318.                                 <script>
  1319.                                 document.addEventListener('DOMContentLoaded', function () {
  1320.                                     let dropdownButton = document.getElementById('dropdownButton');
  1321.                                     let zIndexDiv = document.querySelector('.zIndexControl');
  1323.                                     dropdownButton.addEventListener('click', function () {
  1324.                                         if (dropdownButton.classList.contains('show')) {
  1325.                                             zIndexDiv.style.zIndex = '90';
  1326.                                         } else {
  1327.                                             zIndexDiv.style.zIndex = '1';
  1328.                                         }
  1329.                                     });
  1330.                                 });
  1331.                                 </script>                    
  1332.                                
  1334.                                 <div class="col-6 col-md-4 col-lg-2 d-flex justify-content-start  align-items-center" style="z-index:1" >
  1335.                                     <div data-aos="fade-up" data-aos-duration="2000" class="dropdown my-3 col-12 d-flex justify-content-start align-items-center">
  1336.                                         <a href="{{path('formations',{'locale':app.request.locale})}}#formaList"><button  class="btn btn-secondary btn-res " type="button">
  1337.                                            <i style="margin-right: 6px;" class="fas fa-arrows-rotate"></i>
  1338.                                            <p style="margin-bottom: 0;">{% if app.request.locale == 'fr' %}Réinitialiser{% else %}Reset{% endif %}</p>
  1339.                                         </button></A>
  1340.                                     </div>
  1342.                                    
  1343.                                 </div>
  1344.                                 
  1345.                             </div>
  1346.                         </div>
  1347.                     </div>
  1357.                 </div>
  1358.             </div>
  1360.             <div class="cards">
  1361.                 <div class="container">
  1362.                     <div class="row">
  1363.                         <div class="col-12">
  1364.                             <div class="row">
  1365.                                 <div class="col-12 col-lg-9">
  1366.                                     <div class="row">
  1368. {% set formationsWithDates = [] %}
  1369. {% set formationsWithoutDates = [] %}
  1370. {% set currentDate = "now"|date("Y-m-d") %}
  1371. {% set currentDateTimestamp = "now"|date("U") %}
  1373. {% for res in formations %}
  1374.     {% if res.afficher == 1 %}
  1375.         {% set closestFutureDate = null %}
  1376.         {% set mostRecentPastDate = null %}
  1377.         {% set correspondingLocation = null %}
  1379.         {# Iterate through each session to find the most relevant date #}
  1380.         {% for session in res.sessionsFormations %}
  1381.             {% if session.date is not null %}
  1382.                 {% set sessionDate = session.date|date("Y-m-d") %}
  1383.                 {# Check for closest future date or most recent past date #}
  1384.                 {% if sessionDate >= currentDate %}
  1385.                     {# Update the closest future date if this session date is closer #}
  1386.                     {% if closestFutureDate is null or sessionDate < closestFutureDate %}
  1387.                         {% set closestFutureDate = sessionDate %}
  1388.                         {% set correspondingLocation = session.lieu %} {# Assuming session.lieu is the location #}
  1389.                     {% endif %}
  1390.                 {% elseif mostRecentPastDate is null or sessionDate > mostRecentPastDate %}
  1391.                     {# Update the most recent past date if this session date is more recent #}
  1392.                     {% set mostRecentPastDate = sessionDate %}
  1393.                     {% set correspondingLocation = session.lieu %}
  1394.                 {% endif %}
  1395.             {% endif %}
  1396.         {% endfor %}
  1398.         {# Determine which date to use for the formation #}
  1399.         {% set chosenDate = closestFutureDate is not null ? closestFutureDate : mostRecentPastDate %}
  1401.         {# Add formation to the appropriate list #}
  1402.         {% if chosenDate is not null %}
  1403.             {% set formationsWithDates = formationsWithDates|merge([{ 'formation': res, 'date': chosenDate, 'location': correspondingLocation }]) %}
  1404.         {% else %}
  1405.             {% set formationsWithoutDates = formationsWithoutDates|merge([res]) %}
  1406.         {% endif %}
  1407.     {% endif %}
  1408. {% endfor %}
  1410. {# Sort formations by the closest date to the current date #}
  1411. {% set sortedFormationsWithDates = formationsWithDates|sort((a, b) => 
  1412.     (a.date|date("U") >= currentDateTimestamp ? a.date|date("U") - currentDateTimestamp : currentDateTimestamp - a.date|date("U")) 
  1413.     -
  1414.     (b.date|date("U") >= currentDateTimestamp ? b.date|date("U") - currentDateTimestamp : currentDateTimestamp - b.date|date("U"))
  1415. ) %}
  1417. {% for item in sortedFormationsWithDates %}
  1418.     <div data-aos="fade-up" data-aos-duration="1000" class="col-12 col-md-6 col-lg-4">
  1419.         <div class="card">
  1420.             <a href="{{ path('detailsFormation', {'ref': item.formation.Reference, 'locale': app.request.locale}) }}">
  1421.                 <div class="imgAnimee" style="height:260px; width:310px; border-radius:10px; display: table-cell; vertical-align: middle;">
  1422.                     <div class="hover-effect  d-flex justify-content-center align-items-center" style="margin-top: 0;">
  1423.                         <button type="button" class="btn btn-outline-light hover-btn buttonMore">{% trans %}accueil-carousel-bouton{% endtrans %}</button>
  1424.                         
  1425. <p class="hover-effcet-txt"><i class="far fa-calendar"></i> {{ item.date|date('d/m/Y') }}</p>
  1426. {# Other elements of the card... #}
  1427.                         
  1428.                         <p class="hover-effcet-txt"><i class="fas fa-user-plus"></i>{% if app.request.locale == 'fr' %}{{ item.formation.nbParticipants }} {% else %}{{ item.formation.nbParticipantsEn }} {% endif %}</p>
  1429.     <p class="hover-effcet-txt"><i class="fas fa-location-dot"></i>{{ item.location}}</p>
  1430.                     </div>
  1431.                     <div class="card-image">
  1432.                         <img src="{{ asset('uploads/formations/'~item.formation.image) }}" class="card-img-top" alt="formation" style="border-radius:0px">
  1433.                     </div>
  1434.                 </div>
  1436.                 <div class="card-body">
  1437.                     <p class="card-text" style="font-size: 28px; font-weight: 700;">{% if app.request.locale == 'fr' %}{{ item.formation.titreFr }}{% else %}{{ item.formation.titreEn }}{% endif %}</p>
  1438.                 </div>
  1439.             </a>
  1440.         </div>
  1441.     </div>
  1442. {% endfor %}
  1444. {# Display formations without dates #}
  1445. {% for res in formationsWithoutDates %}
  1446.     <div data-aos="fade-up" data-aos-duration="1000" class="col-12 col-md-6 col-lg-4">
  1447.         <div class="card">
  1448.             <a href="{{ path('detailsFormation', {'ref': res.Reference, 'locale': app.request.locale}) }}">
  1449.                 <div class="imgAnimee" style="height:260px; width:310px; border-radius:10px; display: table-cell; vertical-align: middle;">
  1450.                     <div class="hover-effect  d-flex justify-content-center align-items-center" style="margin-top: 0;">
  1451.                         <button type="button" class="btn btn-outline-light hover-btn buttonMore">{% trans %}accueil-carousel-bouton{% endtrans %}</button>
  1452.                         
  1453.                         <p class="hover-effcet-txt"><i class="far fa-calendar"></i> Nous consulter</p>
  1454.                         
  1455.                         <p class="hover-effcet-txt"><i class="fas fa-user-plus"></i> {% if app.request.locale == 'fr' %}{{ res.nbParticipants }}{% else %}{{ res.nbParticipantsEn }}{% endif %}</p>
  1456.                         <p class="hover-effcet-txt"><i class="fas fa-location-dot"></i>{% if app.request.locale == 'fr' %}A convenir{% else %}To be agreed{% endif %}</p>
  1457.                     </div>
  1458.                     <div class="card-image">
  1459.                         <img src="{{ asset('uploads/formations/'~res.image) }}" class="card-img-top" alt="formation" style="border-radius:0px">
  1460.                     </div>
  1461.                 </div>
  1463.                 <div class="card-body">
  1464.                     <p class="card-text" style="font-size: 28px; font-weight: 700;">{% if app.request.locale == 'fr' %}{{ res.titreFr }}{% else %}{{ res.titreEn }}{% endif %}</p>
  1465.                 </div>
  1466.             </a>
  1467.         </div>
  1468.     </div>
  1469. {% endfor %}
  1470.     <div class="btn-plannig d-flex justify-content-center" >
  1471.                                             <a href="{{path('app_planningFormation',{'locale':app.request.locale})}}" style="padding: 10px; background-color: #0048FF ; border-radius:30px ; color: white; text-decoration: none;    margin-bottom: 40px;">{% trans %}voir-planning-formation{% endtrans %}</a>{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':96})}}"><button type="button"  style="margin-left:5px" class="btn btn-warning"  ><i class="fa-solid fa-pen"></i></button></a>{% endif %}
  1472.                                         </div>
  1474.                                     </div>
  1476.                                 </div>
  1477.                                 <div data-aos="fade-up" data-aos-duration="1000" class="col-12 col-lg-3">
  1478.                                     <div class="infos">
  1479.                                         <div class="certificats pt-3">
  1480.                                             <div class="titre_traitBleu">
  1481.                                                 {% if app.user %}
  1482.                                                     <a href="{{path('app_certificats_formations_index')}}"><button type="button" class="btn btn-warning">Gestion Certificats</button></a>
  1483.                                                 {% endif %}
  1485.                                                 <div class="titre" style="margin-top: 15px;">
  1486.                                                     <img class="img-fluid" src="{{asset('img/formations/awards.svg')}}" alt="">
  1487.                                                     <p>{% trans %}certificats-titre{% endtrans %}
  1488.                                                     {% if app.user %}
  1489.                                                  
  1490.                                                         <a href="{{path('app_dictionnaire_edit',{'id':86})}}"><button type="button"  style="margin-left:5px" class="btn btn-warning"  ><i class="fa-solid fa-pen"></i></button></a>                        
  1491.                                                     
  1492.                                                     {% endif %}</p>                         
  1493.                                                 </div>
  1494.                                                 <div class="trait-bleu">
  1495.                                                     <img class="img-fluid" src="{{asset('img/recrutement/Ligne 80.svg')}}" alt="">
  1496.                                                 </div>
  1497.                                             </div>
  1498.                                             <div class="d-flex flex-lg-column flex-md-row flex-column">
  1499.                                                  {% for res in certificats %}
  1500.                                                     <div class="col-12 col-md-6 col-lg-12">
  1501.                                                         <div class="carte carte1">
  1502.                                                             <div class="titre">
  1503.                                                                 <p>{% if app.request.locale == 'fr' %}{{res.TitreFr|raw}}{% else %}{{res.TitreEn|raw}}{% endif %}</p>
  1504.                                                             </div>
  1505.                                                             <div class="logo">
  1506.                                                                 {% if res.Image != 'ok' %}
  1507.                                                                     <img class="img-fluid" src="{{ asset('uploads/certi/' ~ res.Image) }}" alt="qualiopi">
  1508.                                                                 {% endif %}
  1510.                                                             </div>
  1511.                                                             <div class="texte">
  1512.                                                                 <p>{% if app.request.locale == 'fr' %}{{res.TexteFr|raw}}{% else %}{{res.TexteEn|raw}}{% endif %}</p>
  1513.                                                                
  1514.                                                             </div>
  1515.                                                             {% if res.document != 'ok' %}
  1516.                                                              <div class="document">
  1517.                                                                 <div class="btn-plannig d-flex justify-content-center" >
  1518.                                                                     <a href="{{ asset('uploads/certi/' ~ res.document) }}" target="_blank" style="padding: 10px; background-color: #0048FF ; border-radius:30px ; color: white; text-decoration: none;   ">{% if app.request.locale == 'fr' %}Télécharger le certificat{% else %}Download certificate{% endif %} </a>
  1519.                                                                 </div>
  1520.                                                             {% endif %}
  1521.                                                                 
  1522.                                                             </div>
  1523.                                                             <hr>
  1524.                                                         </div>
  1525.                                                 {% endfor %}
  1526.                                                     
  1527.                                                 </div>
  1530.                                                 
  1531.                                                 
  1532.                                                   
  1533.                                             </div>
  1534.                                             
  1535.                                                 
  1536.                                                     <div class="col-12 col-md-6 col-lg-12 respT respMargeee">
  1537.                                                         <div class="titre_traitBleu titre_traitBleu2" style="margin-top:30px;">
  1538.                                                             {% if app.user %}
  1539.                                                                                     <a href="{{path('app_criteres_formations_index')}}"><button style="margin-bottom: 15px;" type="button" class="btn btn-warning">Gestion Critères</button></a>
  1541.                                                             {% endif %}
  1543.                                                             <div class="titre">
  1544.                                                                 <img class="img-fluid" src="{{asset('img/formations/qualiopi.png')}}" alt="">
  1545.                                                                 <p>{% trans %}critere-qualiopi-titre{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':92})}}"><button type="button"  style="margin-left:5px;z-index:99;position:relative" class="btn btn-warning"  ><i class="fa-solid fa-pen"></i></button></a>{% endif %}</p>
  1546.                                                             </div>
  1547.                                                             <div class="trait-bleu">
  1548.                                                                 <img class="img-fluid" src="{{asset('img/recrutement/Ligne 80.svg')}}" alt="">
  1549.                                                             </div>
  1550.                                                         </div>
  1552.                                                     {% for res in criteres %}
  1553.                                                         <div class="carte-pourcentage">
  1554.                                                             <div class="image">
  1555.                                                                 <img src="{{asset('img/formations/Ellipse_blanche.png')}}" alt="">
  1556.                                                             </div>
  1557.                                                             <div class="chiffre">
  1558.                                                                 {{res.Nombre}}
  1559.                                                             </div>
  1560.                                                             <div class="texte">
  1561.                                                                 <p>{% if app.request.locale == 'fr' %}{{res.TexteFr|raw}}{% else %}{{res.TexteEn|raw}}{% endif %}</p>
  1562.                                                             </div>
  1563.                                                         </div>
  1564.                                                     {% endfor %}
  1565.                                                     </div>
  1568.                                                
  1569.                                                
  1571.                                             </div>
  1574.                                            
  1575.                                             
  1576.                                                 
  1577.                                                     <div class="col-12 col-md-6 col-lg-12 respT respMargeee">
  1578.                                                         <div class="titre_traitBleu titre_traitBleu2 mb-5 pb-3" style="margin-top:30px;">
  1579.                                                             {% if app.user %}
  1580.                                                                 <a href="{{path('app_catalogue_index')}}"><button style="margin-bottom: 15px;" type="button" class="btn btn-warning">Gestion Catalogue</button></a>
  1582.                                                             {% endif %}
  1584.                                                             <div class="titre">
  1585.                                                                 <img class="img-fluid" src="{{asset('img/formations/qualiopi.png')}}" alt="">
  1586.                                                                 <p>{% if app.request.locale == 'fr' %}CATALOGUE CPI{% else %}CPI CATALOG{% endif %}</p>
  1587.                                                             </div>
  1588.                                                             <div class="trait-bleu">
  1589.                                                                 <img class="img-fluid" src="{{asset('img/recrutement/Ligne 80.svg')}}" alt="">
  1590.                                                             </div>
  1591.                                                         </div>
  1593.                                                   {% for res in cataloguesFormations %}
  1594.                                                         <div class="carte-pourcentage">
  1595.                                                             {% if res.document != 'ok' %}
  1596.                                                              <div class="document">
  1597.                                                                 <div class="btn-plannig d-flex justify-content-center" >
  1598.                                                                     <a href="{{ asset('uploads/catalogueFormation/' ~ res.document) }}" target="_blank" style="padding: 10px; background-color: #0048FF ; border-radius:30px ; color: white; text-decoration: none; font-weight:500; ">{% if app.request.locale == 'fr' %}Télécharger le catalogue{% else %}Download catalog{% endif %} </a>
  1599.                                                                 </div>
  1600.                                                             {% endif %}
  1601.                                                             
  1602.                                                         </div>
  1603.                                                         <hr>
  1604.                                                     {% endfor %}
  1605.                                                     
  1606.                                                     </div>
  1609.                                            
  1610.                                                
  1612.                                             </div>
  1614.                                         
  1616.                                         <div class="agenda" style="display:none !important;">
  1617.                                             <div class="titre_traitBleu">
  1618.                                                 <div class="titre">
  1619.                                                     <img class="img-fluid" src="{{asset('img/formations/session.png')}}" alt="">
  1620.                                                     <p>PROCHAINES SESSIONS</p>
  1621.                                                 </div>
  1622.                                                 <div class="trait-bleu">
  1623.                                                     <img class="img-fluid" src="{{asset('img/recrutement/Ligne 80.svg')}}" alt="">
  1624.                                                 </div>
  1625.                                             </div>
  1627.                                             <a href="#">
  1628.                                                 <div class="carte">
  1629.                                                     <div class="date">
  1630.                                                         27 MARS 2023
  1631.                                                     </div>
  1632.                                                     <div class="texte">
  1633.                                                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, ratione.</p>
  1634.                                                         <hr>
  1635.                                                     </div>
  1636.                                                 </div>
  1637.                                             </a>
  1638.                                             <a href="#">
  1639.                                                 <div class="carte">
  1640.                                                     <div class="date">
  1641.                                                         27 MARS 2023
  1642.                                                     </div>
  1643.                                                     <div class="texte">
  1644.                                                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, ratione.</p>
  1645.                                                         <hr>
  1646.                                                     </div>
  1647.                                                 </div>
  1648.                                             </a>
  1649.                                             <a href="#">
  1650.                                                 <div class="carte">
  1651.                                                     <div class="date">
  1652.                                                         27 MARS 2023
  1653.                                                     </div>
  1654.                                                     <div class="texte">
  1655.                                                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, ratione.</p>
  1656.                                                         <hr>
  1657.                                                     </div>
  1658.                                                 </div>
  1659.                                             </a>
  1660.                                             <a href="#">
  1661.                                                 <div class="carte">
  1662.                                                     <div class="date">
  1663.                                                         27 MARS 2023
  1664.                                                     </div>
  1665.                                                     <div class="texte">
  1666.                                                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, ratione.</p>
  1667.                                                         <hr>
  1668.                                                     </div>
  1669.                                                 </div>
  1670.                                             </a>
  1671.                                             <div class="bouton-bleu-clair my-3">
  1672.                                                 <button>Voir le planing complet</button>
  1673.                                             </div>
  1674.                                         </div>
  1675.                                     </div>
  1677.                                 </div>
  1678.                             </div>
  1679.                         </div>
  1680.                     </div>
  1681.                 </div>
  1682.             </div>
  1683.         </div>
  1684.         <div class="temoignage" style="display:none">
  1685.             <div class="container">
  1686.                 <div class="row">
  1687.                     <div class="formeBleu">
  1688.                         <div class="row justify-content-center d-flex">
  1689.                             <img src="img/formations/Groupe 197_blanc.svg" class="img-fluid">
  1690.                         </div>
  1691.                     </div>
  1692.                 </div>
  1693.                 <div style="padding-top:112px;" class="row justify-content-center justify-content-md-start">
  1694.                     <div class="col-12 col-md-6">
  1695.                         <div class="row mt-2">
  1696.                             <div class="titre">
  1697.                                 <p class="opensans_bold_red_15">TÉMOIGNAGES</p>
  1698.                             </div>
  1699.                         </div>
  1700.                     </div>
  1701.                 </div>
  1702.                 <div class="row " style="padding-bottom: 112px;">
  1703.                     <div class="col">
  1704.                         <div id="carouselExampleIndicators" class="carousel slide py-3" data-bs-ride="carousel">
  1705.                             <div class="carousel-indicators">
  1706.                                 <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
  1707.                                 <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
  1708.                                 <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  1709.                             </div>
  1710.                             <div class="carousel-inner">
  1711.                                 <div class="carousel-item active">
  1712.                                     <div class="col-12">
  1713.                                         <div class="row">
  1714.                                             <h1 class="title-citation">Aenean sed nunc imperdiet.</h1>
  1715.                                         </div>
  1716.                                         <hr>
  1717.                                         <p class="citation">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi mollitia illo necessitatibus vero, aspernatur nulla consequatur, dolorum reprehenderit ratione alias amet porro commodi laudantium? Quaerat quisquam tempore qui sapiente perspiciatis.</p>
  1718.                                         <p style="color:red; font-weight: bold;">JUSTO TURPIS</p>
  1719.                                         <hr>
  1720.                                     </div>
  1721.                                 </div>
  1722.                                 <div class="carousel-item">
  1723.                                     <div class="col-12">
  1724.                                         <div class="row">
  1725.                                             <h1 class="title-citation">Aenean sed nunc imperdiet.</h1>
  1726.                                         </div>
  1727.                                         <hr>
  1728.                                         <p class="citation">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi mollitia illo necessitatibus vero, aspernatur nulla consequatur, dolorum reprehenderit ratione alias amet porro commodi laudantium? Quaerat quisquam tempore qui sapiente perspiciatis.</p>
  1729.                                         <p style="color:red; font-weight: bold;">JUSTO TURPIS</p>
  1730.                                         <hr>
  1731.                                     </div>
  1732.                                 </div>
  1733.                                 <div class="carousel-item">
  1734.                                     <div class="col-12">
  1735.                                         <div class="row">
  1736.                                             <h1 class="title-citation">Aenean sed nunc imperdiet.</h1>
  1737.                                         </div>
  1738.                                         <hr>
  1739.                                         <p class="citation">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi mollitia illo necessitatibus vero, aspernatur nulla consequatur, dolorum reprehenderit ratione alias amet porro commodi laudantium? Quaerat quisquam tempore qui sapiente perspiciatis.</p>
  1740.                                         <p class="opensans_bold_red_15">JUSTO TURPIS</p>
  1741.                                         <hr>
  1742.                                     </div>
  1743.                                 </div>
  1744.                             </div>
  1745.                             <!-- Flèche précédente -->
  1746.                             <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
  1747.                                 <i class="fas fa-chevron-left"></i> <!-- Utilisation d'une icône de chevron vers la gauche -->
  1748.                                 <span class="visually-hidden">Previous</span>
  1749.                             </button>
  1751.                             <!-- Flèche suivante -->
  1752.                             <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
  1753.                                 <i class="fas fa-chevron-right"></i> <!-- Utilisation d'une icône de chevron vers la droite -->
  1754.                                 <span class="visually-hidden">Next</span>
  1755.                             </button>
  1756.                         </div>
  1757.                     </div>
  1758.                 </div>
  1759.             </div>
  1760.         </div>
  1762.     </main>
  1763. <script>
  1764.     $(document).ready(function () {
  1765.         $('.dropdown-toggle').dropdown();
  1766.     });
  1767. </script>
  1770. {% endblock %}