{% extends 'FrontofficeFr/base.html.twig' %}
{% block activeHome %}main-menu-active{% endblock %}
{% block titre %}Fédération des chambres des pêches maritimes{% endblock %}
{% block body %}
    <link rel="stylesheet" href="{{ asset("assets/FrontofficeFr/css/slider.css") }}" type="text/css" media="all">
    <link rel="stylesheet" href="{{ asset("assets/FrontofficeFr/css/galerry.css") }}" type="text/css" media="all">
    <link rel="stylesheet" href="{{ asset("assets/Backoffice/js/calendar/bootstrap_calendar.css") }}" type="text/css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/color-calendar/dist/css/theme-basic.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/color-calendar/dist/css/theme-glass.css" />

    <style>
        .titre_ac h5 {
            background-color: #3c70b3 !important;
            color: white;
            text-overflow: ellipsis;
            font-family: system-ui;
            font-size: 16px;
            padding: 16.6px !important;
        }
        .pc{
                
                display:flex;
        } 
        .mob{
            
            display:none;
        }
        .play{
            opacity: 0%;
        }
        .play:hover{
            opacity : 1;
        }
        .slidtitre{
            font-size:32px
        }  
        .bx-wrapper{
            
            width:100% !important;
            background:white;
        }
        .swiper1 {
            width: 100%;
            height: 573px;
            margin-top: 8px;
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;    
            display: flex;
            justify-content: center;
            font-weight: bold;
            color: #fff;  
        }
        .swiper2 {
            width: 800px;
            height: 650px;  
        }
        .yellowLine{
            height: 5px;
            background: gold;
            width: 60%;
            margin: 0% 20% 0% 20%;
            border-radius: 30px;
        }
        .met{
         width : 90%
        }

        .to{
         width: 100%;
        }

        .to h2
        {
          font-size:30px;
          width: 80%
        }

        h4{
            font-size:28px
        }

        .image{
            width: 100%;
            height: 473px;
            border: 1px solid #3c70b3 !important;

        }
        
         @media screen and (max-width: 1600px) {
            
            .main-menu > li > a {
                font-size: 12px;
            }
         }
        
         @media screen and (max-width: 1419px) {
            
            .main-menu > li > a {
                font-size: 15px;
            }
         }
         
         @media screen and (max-width: 1419px) {
            
            .main-menu > li > a {
                font-size: 12px;
            }
         }
   
        @media screen and (max-width: 1000px) {
            
            
            .pc{
                
                display:none;
            }
            
            .mob{
                
                display:block;
            }

             .image{
                width: 100%;
                height: 494px;
             }
             
             .slidtitre{
                    font-size:22px
                }

            .swiper1 {
                width: 100%;
                height: 573px; /*546px;*/
                margin-top: 8px;
            }
            
            
            .swiper2 {
                width: 800px;
                height: 300px;  
            }

            .evme{
            max-width:100%;
            }

            .met{
            width : 70%
            }

            .to{
            top:50%;
            max-height: 600px;
            width: 100%;
            height: 10rem;
            }

            .to h2
            {
            font-size:18px;
            width: 80%;
            line-height: 2rem;
            }

            h4{
                font-size:16px
            }
        }

        @media screen and (min-width: 1000px) {
            .lft{
                left:2%
            }
         }

         @media screen and (min-width: 1100px) {
            .lft{
                left:5%
            }
         }

         @media screen and (min-width: 1200px) {
            .lft{
                left:8%
            }
         }

         @media screen and (min-width: 1300px) {
            .lft{
                left:10%
            }
         }

         @media screen and (min-width: 1400px) {
            .lft{
                left:11%
            }
         }

         @media screen and (min-width: 1500px) {
            .lft{
                left:13%
            }
         }

         @media screen and (min-width: 1600px) {
            .lft{
                left:14%
            }
         }

         @media screen and (min-width: 1700px) {
            .lft{
                left:15%
            }
         }
         
         @media screen and (min-width: 1800px) {
            .lft{
                left:17%
            }
         }

         @media screen and (min-width: 1900px) {
            .lft{
                left:17%
            }
         }

         @media screen and (min-width: 2000px) {
            .lft{
                left:20%
            }
         }
   


        @media screen and (max-width: 600px) {

            .actualite_box_cl {
                padding: 7px !important;
                width: 100%;
            }
        }

        .titre_ac{
            height:50px;
        }
        .titre_ac h5{
            background-color: #3c70b3 !important;
            color: white;
            text-overflow: ellipsis;
            font-family: system-ui;
            font-size:16px;
            padding: 7px;
        }

        .titre_slider h5{
            background-color: #3c70b3 !important;
            color: white;
            text-overflow: ellipsis;
            font-family: system-ui;
            font-size:16px;
            padding: 17px;
        }


        .actualite_box1{
            background: #ffffff;
            padding: 0 !important;
            /*box-shadow: 10px -10px 0px -2px rgb(232 177 84);*/
            box-shadow: 14px -15px 0px -8px rgb(232 177 84);
        }

        .actualite_box_left {
            padding: 0 !important;
            box-shadow: -8px -9px 0px -1px #e8b154;
        }

        .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
            bottom: 0px !important;
            left: 0;
            width: 100%;
            background: #3c70b3;
            padding-bottom: 15px;
        }
        
        .swiper-pagination-bullet.swiper-pagination-bullet-active{
          display: revert !important;
          border-radius: 0px !important;
          color: #e8b154;
          background-color: transparent !important;
          opacity: 1;
        }
        h4 {
            font-size: 20px;
            color: #e8b154;
        }

        .galerry {
            position: relative !important;
            text-align: center !important; 
            z-index: 1;
            padding-top: 30px;
            padding-bottom: 30px;
        }

        .galerry::before {
            content: "";
            position: absolute !important;
            top: 0; left: 0; right: 0; bottom: 0;
            background: url("{{ asset('/assets/FrontofficeFr/images/pattern-background-islamic-12.jpg') }}") center center !important;
            /* background-repeat: no-repeat;
            background-size: cover; */
            opacity: 0.3;
            z-index: -1;
        }

        #slider3 img{
            width:200px;
            height:150px;
        }

        /* Responsive (Mobile) */
        @media (max-width: 768px) {
            
            .swiper-button-next, .swiper-rtl .swiper-button-prev {
                display: none !important;
                right: 9px;
                left: auto;
            }

            .swiper-button-next, .swiper-button-prev {
                position: absolute;
                top: 40%;
                 display: none !important;
            }
            .bx-window{
                position: relative;
                overflow: hidden;
                width: 100% !important;
            }

            #slider3 {
                gap: 10px;
                flex-direction: column;
                align-items: center;
                height:100px;
            }

            #slider3 li img {
                max-width: 100%;
            }
            #slider3 img{
                width:500px;
                height:100px;
            }

            #slider3 li {
                display: inline-block;
                vertical-align: top;
                margin: 5px;
                width: 200px !important;
            }
            .bx-window:before{
                display:none;
            }

            .heading-92913 {
                font-size: 22px;
            }

            .carousel-row--img {
                flex: 1 1 100%;
                max-width: 100%;
            }

            .column {
                width: 60px;
            }

            .prev, .next {
                font-size: 20px;
                padding: 10px;
            }

            .close {
                font-size: 26px;
            }

            .carousel-row--img img
            {
                width: 265px;
                height: 180px;
                object-fit: cover;
                cursor: pointer;
                transition: 0.4s;
                border: 3px solid #3c70b3;
                border-radius: 5px;
            }

            .bg-image {
                height: auto !important;
                padding: 30px 10px;
            }

            .count-box {
                margin-bottom: 20px;
                width: 100%;
                max-width: 100%;
            }

            .count-box span {
                font-size: 24px;
            }

            .count-box p {
                font-size: 14px;
            }

            .blog {
                max-width: 400px;
                margin: -15px -16px 15px 15px;
            }

            .blog .blogInner
            {
                border: 1px solid rgba(156, 156, 156, 0.3);
                overflow: hidden;
                margin-bottom: 20px;
            }
            
            .titre-footer
            {
                margin-top: 30px;
                margin-bottom: 35px;
                font-size: 23px;
                color: #3c70b3;
                position: relative;
            }

            .heading-92913:after
            {
                content: "";
                position: absolute;
                bottom: 15px;
                left: 32%;
                width: 150px;
                height: 4px;
                background: #3c70b3;
            }

            .heading-92913:after {
                content: "";
                position: absolute;
                bottom: 15px;
                left: 27%;
                width: 150px;
                height: 4px;
                background: #3c70b3;
            }

            .heading-92913:after
            {
                content: "";
                position: absolute;
                bottom: 15px;
                left: 32%;
                width: 150px;
                height: 4px;
                background: #3c70b3;
            }

            .pc {
                flex-direction: column;
                display: flex;
            }

            .col-md-7, .col-md-5, .col-sm-6 {
                width: 100% !important;
                max-width: 100%;
                padding: 0 10px;
            }

            .actualite_box1 img {
                height: 300px !important;
            }

            .titre_slider h5,
            .titre_ac h5 {
                font-size: 14px;
            }

            .play i {
                font-size: 40px;
            }
            
            .image{
                height:250px;
            }
            .swiper1 {
                width: 100%;
                height: 330px;
                margin-top: 8px;
            }
            .swiper-button-next, .swiper-button-prev {
                position: absolute;
                top: 40%;
            }
            .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
                top: 90% !important;
                left: 0;
                width: 100%;
                padding-top: 5px;
            }
            
            .site-section {
                margin-right: 0px !important;
                margin-bottom:20px !important;
                top:0px !important;
            }
            
            
            #weatherapiweatherwidget-2 .weatherapi-weather-wrap
             {
                transition: background .5s ease-in;
                color: #fff;
                clear: both;
                width: 428px !important;
            }
            
            #citySelect
             {
                font-size: 16px;
                padding: 2px;
                /* margin-bottom: 11px; */
                margin: 10px;
                border: 2px solid #106eea;
            }
            .carousel-inner
            {
                position: relative;
                width: auto !important;
                overflow: hidden;
            }
        }


        .bx-window:before{
            display:none;
        }
        

        .bi-newspaper::before {
            content: "\f4a3";
            vertical-align: 5rem;
        }
        
        .bi-youtube::before {
            /*content: "\f62b";*/
            content: "\f4a3";
             vertical-align: 5rem;
        }
        
        .youtube .bi-youtube::before {
            content: "\f62b";
             vertical-align: 0rem;
        }

        .text-pub h5{
            font-size: 16px !important;
        }

        .text-pub h5:hover{
            color: rgb(60 112 179) !important;
        }

        .titre_pub{
            position: relative;
            margin-bottom: -23px;
        }


         .with-border {
            border: 1px solid #ccc;
            border-radius: 6px;
            padding: 10px;
            background-color: #f9f9f9; /* optionnel */
            transition: background-color 0.2s;
        }

        .with-border:hover {
            background-color: #f0f8ff; /* léger survol bleu */
        }
        
        .title-page {
            background-color: #3c70b3;
            color: white;
            width: 40%;
            margin-left: 30%;
            border-bottom-right-radius: 50px;
            border-bottom-left-radius: 50px;
            border-top-right-radius: inherit;
            border-top-left-radius: inherit;
            padding: 5px;
            margin-top: -15px;
        }
        
        .actualite_box .play .bi-newspaper::before {
            content: "\f4a3";
            vertical-align: -5rem;
        }
        
        .actualite_box .play .bi-youtube::before {
            /*content: "\f62b";*/
            content: "\f4a3";
             vertical-align: -5rem;
        }
        
        .actualite_box .play .youtube .bi-youtube::before {
            content: "\f62b";
             vertical-align: -5rem;
        }
        
        .yellowLine {
            height: 5px;
            background: #e8b154;
            width: 60%;
            margin: 0% 20% 0% 20%;
            border-radius: 30px;
        }
        
        .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
            font-size: 15px;
            font-weight: 600;
            background: #e8b154;
            color: white !important;
            border: none;
            border-radius: 0px;
        }
        
        .nav-tabs .nav-item .nav-link{
            font-size: 15px;
            font-weight: 600;
            color: #e8b154;
            border: none;
            border-radius: 0px;
        }
        
        #mediaTabsContent {
            position: relative !important;
            text-align: center !important;
            z-index: 1;
            padding-top: 30px;
            padding-bottom: 30px;
        }
        
        #mediaTabsContent::before {
            content: "";
            position: absolute !important;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url(/assets/FrontofficeFr/images/pattern-background-islamic-12.jpg) center center !important;
            opacity: 0.3;
            z-index: -1;
        }
        
        #citySelect{
          font-size: 16px;
          padding: 2px;
          margin-bottom: 10px;
          border: 2px solid #106eea;
        }
        .weatherapi-weather-wrap{
            height: 355px !important;
            width: 600px !important;
            padding: 5px;
        }
          
        .carousel-control-prev-icon , .carousel-control-next-icon{
          display:none;
        }
    </style>

    <main id="main">
        
        <section id="container-fluid" class="container1" style="padding-top: 0%;">
            <div class="row pc">
                <div class="col-md-3 p-2">
                    <h2 style="color: #3c70b3;padding-left: 10px;text-align:center;">Actualités des chambres</h2>
                    {% for a in actualitsChambre %}
                        <div class=" actualite_box_cl text-center" >
                            {% if a.url != '' %}
                                <a href="{{ a.url }} " title='actualité Chambre' target='_black'>
                            {% else %}
                                <a href="/fr/detailActualitesChambre/{{ a.titreFr|replace({' ': '_'}) }}/{{ a.id }}/">
                            {% endif %}
                                <div class="actualite_box1" style="direction: rtl; position: relative; min-height: 100px;">
                                    {% if a.imgPrincipal != '' %}
                                        <img style="height: 200px;" src="{{ asset(a.imgPrincipal) }}" />
                                    {% else %}
                                        <img style="height: 200px;" src="{{ asset('/assets/Backoffice/images/fcpm.png') }}" class="img-fluid" alt="">
                                    {% endif %}

                                    <div style="display: flex; flex-wrap: nowrap; flex-direction: column; justify-content: space-between; height: 240px; position: absolute; left: 0; right: 0; bottom: 22px;">
                                        <div></div>
                                        <div></div>
                                    </div>

                                    <div class="play" style="display: flex;flex-wrap: nowrap;flex-direction: column;justify-content: space-between;height: 216px;background: linear-gradient(180deg, rgba(0 0 0 / 0%) 0%, rgba(0,0,0,0.2) 31%, rgba(0 0 0 / 0.2) 64%, rgba(0,0,0,1) 100%);position: absolute;left: 0;right: 0;bottom: 48px;">
                                        <div></div>
                                        {% if a.urlVideo != '' %}
                                            <i style="color: #ffffffa1; font-size: 60px;" class="bi bi-youtube"></i>
                                        {% else %}
                                            <i style="color: #ffffffa1; font-size: 60px;" class="bi bi-newspaper"></i>
                                        {% endif %}
                                    </div>
                            
                                    <span class=" text-left titre_ac" style="background-color: #3c70b3; color: white;">
                                        <h5>
                                            {{ a.titreFr|length > 30 ? a.titreFr|slice(0, 30) ~ '...' : a.titreFr }}
                                        </h5>
                                    </span>
                                </div>
                            </a>
                        </div>
                    {% endfor %}
                </div>
                <div class="col-md-6 " >
                    <div class="swiper swiper1">
                        <div class="swiper-wrapper swi">
                            {% set index = 0 %}
                            {% for a in actualites %}
                                {% set type = a.type == "FCPM" ? "Actualités_de_la_Fédération" : "Actualités_Nationales_et_Internationales" %}
                                {% set codeType = a.type == "FCPM" ? 2 : 1 %}
                                <div class="swiper-slide text-center">
                                    <div class="slide__content">
                                        <h2 style="color: #3c70b3;padding-left: 10px;text-align: center;">{{ a.titreFr|length > 100 ? a.titreFr|slice(0, 100) ~ '...' : a.titreFr }}</h2>

                                        <a href="/fr/detailActualite/{{ type }}/{{ codeType }}/{{ a.titreFr|replace({' ': '_'}) }}/{{ a.id }}/">
                                            {% if a.imgPrincipal != '' %}
                                                <img style="width: 100%;height:auto;" class="img-fluid image" alt="" src="{{ asset(a.imgPrincipal) }}" />
                                            {% else %}
                                                <img style="width: 100%;height:auto;" src="{{ asset('/assets/Backoffice/images/fcpm.png') }}" class="img-fluid image"  alt="">
                                            {% endif %}
                                        </a>
                                        <span class="text-left  titre_slider" style="background-color: #3c70b3; color: white;">
                                            <h5>
                                                {# {{ a.titreFr|length > 100 ? a.titreFr|slice(0, 100) ~ '...' : a.titreFr }} #}
                                            </h5>
                                        </span>
                                    </div>
                                </div>
                                {% set index = index + 1 %}
                            {% endfor %}
                        </div>
                        <div class="swiper-pagination"></div>
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                    </div>
                </div>
                <div class="col-md-3 p-2">
                    <div class=" h-100">
                        <div class="card-body">
                            <h2 class="card-title text-center" style="color: #3c70b3;">Nouveautés</h2>
                            <ul class="list-unstyled mt-3">
                                {% for a in Publication %}
                                    <li class="mb-2 {% if a.titreFr != 'cpublication' %}with-border{% endif %}">
                                        <a href="/fr/detailPublication/{{ a.type }}/{{ a.titreFr|replace({' ': '_'}) }}/{{ a.id }}/"
                                        class="text-decoration-none text-dark d-flex align-items-start">
                                            <i class="fa fa-circle me-2"
                                            style="font-size: 8px; color: #3c70b3; margin-top: 6px;"></i>
                                            <span style="font-size: larger;">
                                                {{ a.titreFr|length > 45 ? a.titreFr|slice(0, 45) ~ '...' : a.titreFr }}
                                            </span>
                                        </a>
                                    </li>
                                {% endfor %}
                            </ul>
                            <ul class="list-unstyled mt-3">
                                {% for a in annonce1 %}
                                    <li class="mb-2 {% if a.titreFr != 'cpublication' %}with-border{% endif %}">
                                        <a href="/fr/detailAnnonce/{{ a.titreFr|replace({' ': '_'}) }}/{{ a.id }}/"
                                        class="text-decoration-none text-dark d-flex align-items-start">
                                            <i class="fa fa-circle me-2"
                                            style="font-size: 8px; color: #3c70b3; margin-top: 6px;"></i>
                                            <span style="font-size: larger;">
                                                {{ a.titreFr|length > 45 ? a.titreFr|slice(0, 45) ~ '...' : a.titreFr }}
                                            </span>
                                        </a>
                                    </li>
                                {% endfor %}
                            </ul>
                            <ul class="list-unstyled mt-3">
                                {% for a in projet_lois1 %}
                                    <li class="mb-2 {% if a.titreFr != 'cpublication' %}with-border{% endif %}">
                                        <a href="/fr/detailProjetlois/{{ a.titreFr|replace({' ': '_'}) }}/{{ a.id }}/"
                                        class="text-decoration-none text-dark d-flex align-items-start">
                                            <i class="fa fa-circle me-2"
                                            style="font-size: 8px; color: #3c70b3; margin-top: 6px;"></i>
                                            <span style="font-size: larger;">
                                                {{ a.titreFr|length > 45 ? a.titreFr|slice(0, 45) ~ '...' : a.titreFr }}
                                            </span>
                                        </a>
                                    </li>
                                {% endfor %}
                            </ul>
                            <ul class="list-unstyled mt-3">
                                {% for e in Evenements1 %}
                                    <li class="mb-2 {% if e.titreFr != 'cpublication' %}with-border{% endif %}">
                                        <a href="/fr/detailsEvenement/{{ e.id }}/"
                                        class="text-decoration-none text-dark d-flex align-items-start">
                                            <i class="fa fa-circle me-2"
                                            style="font-size: 8px; color: #3c70b3; margin-top: 6px;"></i>
                                            <span style="font-size: larger;">
                                                {{ e.titreFr|length > 45 ? e.titreFr|slice(0, 45) ~ '...' : e.titreFr }}
                                            </span>
                                        </a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>

                {% if actualites|length == 0 %}
                    <h2 class="text-center">Aucune actualité pour le moment</h2>
                {% endif %}
            </div>
        </section>
        
        
        <div class='yellowLine'></div>
        <section id="container-fluid" class="container-fluid" style='padding-top: 0%;'>
        <div class="text-center">
            <h6 class="title-page">DERNIÈRES ARTICLES</h6>
        </div>
        <br/>
        <div class="row pc" style='margin:0% 4% 0% 4%;'>
            <div class="col-md-1"></div>
            <div class='col-md-7'>
                {% set index = 0 %}
                {% for a in articles %}
    
                    {% if index == 0 %}
                    <div style='float:left' class="col-sm-12 actualite_box_cl text-center">
                        <a href="/fr/detailArticle/{{ a.id }}/">
                            <div class="actualite_box" style='direction: rtl;position:relative'>
                                {% if a.imgPrincipal !='' %}
                                  <img style='height:526px;' src="{{ asset(a.imgPrincipal) }}" />
                                {% else %}
                                <img style='height:526px;' src="{{ asset("/bundles/Backoffice/images/fcpm.png") }}" class="img-fluid" alt="">
                                {% endif %}
    
                                <div style='display: flex;flex-wrap: nowrap;flex-direction: column;justify-content: space-between;height:240px;position:absolute;left:0;right:0;bottom:22px'>
                                    <div></div>
                                    <div></div>
                                    <h5 style='color:#ffffffcf;text-overflow: ellipsis;font-family: system-ui;font-size:24px'>{{ a.titreFr|length > 100 ? a.titreFr|slice(0, 100) ~ '...' : a.titreFr}}</h5>
                                </div>
    
                                <div class='play' style='display: flex;flex-wrap: nowrap;flex-direction: column;justify-content: space-between;height:525px;background:linear-gradient(180deg, rgba(0 0 0 / 0%) 0%, rgba(0,0,0,20%) 31%, rgba(0 0 0 / 20%) 64%, rgba(0,0,0,1) 100%);position:absolute;left:0;right:0;bottom:22px'>
                                    <div></div>
                                    {% if a.urlVideo !='' %}
                                    <i style='color:#ffffffa1;font-size:90px' class="bi bi-youtube"></i>
                                    {% else  %}
                                    <i style='color:#ffffffa1;font-size:90px' class="bi bi-newspaper"></i>
                                    {% endif %}
                                    <h4 style='color:#ffffffcf;text-overflow: ellipsis;font-family: system-ui;font-size:24px;'>{{ a.titreFr|length > 100 ? a.titreFr|slice(0, 100) ~ '...' : a.titreFr }}</h4>
                                </div>
                                <span class="text-left date_ac" style='background-color:#106eea;color:white'>
                                   le {{ a.date|date("d-m-Y") }}
                                </span>
                            </div>
                        </a>
                    </div>
                    {% endif %}
    
                {% set index = index+1 %}    
                {% endfor %}
    
            </div>
    
            <div class='col-md-3' >
    
               {% set index = 0 %}
                {% for a in articles %}
    
                    {% if index != 0 %}
                    <div  class="actualite_box_cl text-center">
                        <a href="/fr/detailArticle/{{ a.id }}/">
                            <div class="actualite_box" style='direction: rtl;position:relative;min-height: 100px'>
                                
                                {% if a.imgPrincipal !='' %}
                                  <img style='height:240px;' src="{{ asset(a.imgPrincipal) }}" />
                                {% else %}
                                <img style='height:240px;' src="{{ asset("/bundles/Backoffice/images/fcpm.png") }}" class="img-fluid" alt="">
                                {% endif %}
    
                                
                                <div style='display: flex;flex-wrap: nowrap;flex-direction: column;justify-content: space-between;height:240px;position:absolute;left:0;right:0;bottom:22px'>
                                    <div></div>
                                    <div></div>
                                    <h5 style='color:#ffffffcf;text-overflow: ellipsis;font-family: system-ui;font-size:16px'>{{ a.titreFr|length > 100 ? a.titreFr|slice(0, 100) ~ '...' : a.titreFr }}</h5>
                                </div>
    
    
                                <div class='play' style='display: flex;flex-wrap: nowrap;flex-direction: column;justify-content: space-between;height:240px;background:linear-gradient(180deg, rgba(0 0 0 / 0%) 0%, rgba(0,0,0,20%) 31%, rgba(0 0 0 / 20%) 64%, rgba(0,0,0,1) 100%);position:absolute;left:0;right:0;bottom:22px'>
                                    <div></div>
                                    {% if a.urlVideo !='' %}
                                    <i style='color:#ffffffa1;font-size:60px' class="bi bi-youtube"></i>
                                    {% else  %}
                                    <i style='color:#ffffffa1;font-size:60px' class="bi bi-newspaper"></i>
                                    {% endif %}
                                    <h5 style='color:#ffffffcf;text-overflow: ellipsis;font-family: system-ui;font-size:16px'>{{ a.titreFr|length > 100 ? a.titreFr|slice(0, 100) ~ '...' : a.titreFr }}</h5>
                                </div>
                                <span class="text-left date_ac" style='background-color:#106eea;color:white'>
                                   le {{ a.date|date("d-m-Y") }}
                                </span>
                            </div>
                        </a>
                    </div>
                    {% endif %}
    
                {% set index = index+1 %}    
                {% endfor %}
            </div>
            <div class="col-md-2"></div>
            {% if actualites|length == 0 %}
                <h2 class="text-center">Aucune actualité pour le moment</h2>
            {% endif %}

        </div>

        <div class="row mob" style='margin:0% 4% 0% 4%;'>

        <div class='col-md-12'>

            {% for a in articles %}

                <div style='float:left' class="col-sm-6 actualite_box_cl text-center">
                    <a href="/fr/detailArticle/{{ a.id }}/">
                        <div class="actualite_box" style='direction: rtl;position:relative;min-height: 100px'>
                            
                            {% if a.imgPrincipal !='' %}
                              <img style='height:240px;' src="{{ asset(a.imgPrincipal) }}" />
                            {% else %}
                            <img style='height:240px;' src="{{ asset("/bundles/Backoffice/images/fcpm.png") }}" class="img-fluid" alt="">
                            {% endif %}

                            
                            <div style='display: flex;flex-wrap: nowrap;flex-direction: column;justify-content: space-between;height:240px;position:absolute;left:0;right:0;bottom:22px'>
                                <div></div>
                                <div></div>
                                <h5 style='color:#ffffffcf;text-overflow: ellipsis;font-family: system-ui;font-size:16px'>{{ a.titreFr|length > 100 ? a.titreFr|slice(0, 100) ~ '...' : a.titreFr }}</h5>
                            </div>


                            <div class='play' style='display: flex;flex-wrap: nowrap;flex-direction: column;justify-content: space-between;height:240px;background:linear-gradient(180deg, rgba(0 0 0 / 0%) 0%, rgba(0,0,0,20%) 31%, rgba(0 0 0 / 20%) 64%, rgba(0,0,0,1) 100%);position:absolute;left:0;right:0;bottom:22px'>
                                <div></div>
                                {% if a.urlVideo !='' %}
                                <i style='color:#ffffffa1;font-size:60px' class="bi bi-youtube"></i>
                                {% else  %}
                                <i style='color:#ffffffa1;font-size:60px' class="bi bi-newspaper"></i>
                                {% endif %}
                                <h5 style='color:#ffffffcf;text-overflow: ellipsis;font-family: system-ui;font-size:16px'>{{ a.titreFr|length > 100 ? a.titreFr|slice(0, 100) ~ '...' : a.titreFr }}</h5>
                            </div>
                            <span class="text-left date_ac" style='background-color:#106eea;color:white'>
                               le {{ a.date|date("d-m-Y") }}
                            </span>
                        </div>
                    </a>
                </div>

            {% endfor %}
        </div>

            {% if actualites|length == 0 %}
                <h2 class="text-center">Aucune actualité pour le moment</h2>
            {% endif %}

        </div>
    </section>
    
 
        <div class='yellowLine'></div>
        <section id="container-fluid" class="container-fluid" style='padding-top: 0%;'>
             <div class="text-center">
                <h6 class="title-page">DERNIÈRES ACTUALITÉS</h6>
            </div>
            <br/>
            <div class="container text-center">
                <div id="actualiteCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="4000">
                  <div class="carousel-inner">
                    {% for group in acts|batch(3, '&nbsp;') %}
                      <div class="carousel-item {% if loop.first %}active{% endif %}">
                        <div class="row">
                          {% for a in group %}
                            {% if a != '&nbsp;' %}
                              {% set type = a.type == "FCPM" ? "Actualités_de_la_Fédération" : "Actualités_Nationales_et_Internationales" %}
                              {% set codeType = a.type == "FCPM" ? 2 : 1 %}
                              <div class="col-sm-4 actualite_box_cl text-center">
                                <a href="/fr/detailActualite/{{ type }}/{{ codeType }}/{{ a.titreFr|replace({' ': '_'}) }}/{{ a.id }}/">
                                  <div class="actualite_box" style="direction: rtl; position:relative; min-height: 300px;">
                                    <div style="width: 100%; display: flex; justify-content: center;">
                                      <div style="position: absolute; background: #ff0e37; color: white; padding: 0% 5%; border-radius: 0 0 30px 30px;">
                                        {{ a.type }}
                                      </div>
                                    </div>
                                    {% if a.imgPrincipal != '' %}
                                      <img style="height:300px; width:100%; object-fit:cover;" src="{{ asset(a.imgPrincipal) }}" />
                                    {% else %}
                                      <img style="height:300px; width:100%; object-fit:cover;" src="{{ asset('/bundles/Backoffice/images/fcpm.png') }}" class="img-fluid" alt="">
                                    {% endif %}
                                    <div style="background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 31%, rgba(0,0,0,0.7) 64%, rgba(0,0,0,1) 100%); position: absolute; left: 0; right: 0; bottom: 22px;">
                                      <h5 style="color:white; font-family: system-ui; font-size:16px">{{ a.titreFr }}</h5>
                                    </div>
                                    <span class="text-left date_ac" style="background-color:#106eea; color:white">
                                      le {{ a.date|date("d-m-Y") }}
                                    </span>
                                  </div>
                                </a>
                              </div>
                            {% endif %}
                          {% endfor %}
                        </div>
                      </div>
                    {% endfor %}
                 </div>
            </div>
        </section>
        
        
        <div class='yellowLine'></div>
        <section>
            <div class="text-center">
                <h6 class="title-page">ESPACE MÉDIA</h6>
            </div>
        
            <main style="text-align: center;" class="gallery">
                {% if Galerie|length > 0 %}
                    <!-- Tabs navigation -->
                    <ul class="nav nav-tabs justify-content-center" id="mediaTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="photos-tab" data-bs-toggle="tab" data-bs-target="#photos" type="button" role="tab" aria-controls="photos" aria-selected="true">Photos</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="videos-tab" data-bs-toggle="tab" data-bs-target="#videos" type="button" role="tab" aria-controls="videos" aria-selected="false">Vidéos</button>
                        </li>
                    </ul>
        
                    <!-- Tabs content -->
                    <div class="tab-content" id="mediaTabsContent">
                        <!-- Photos Tab -->
                        <div class="tab-pane fade show active" id="photos" role="tabpanel" aria-labelledby="photos-tab">
                            <div class="carousel-row" id="carousel-gallery">
                                {% for a in Galerie %} {# if a.type == 'image'#}
                                    {% if a.type == 0 %}
                                        <div class="carousel-row--img">
                                            <img class="hover-shadow" alt="" src="{{ asset(a.image ? a.image : '/assets/Backoffice/images/fcpm.png') }}" />
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            </div>
        
                            <div class="pagination-controls text-center mt-3" id="paginationContainer"></div>
        
                            <div id="myModal" class="modal no-select" style="z-index: 9999;">
                                <span class="close cursor">&times;</span>
                                <a class="prev no-select">&#10094;</a>
                                <a class="next no-select">&#10095;</a>
                                <div class="modal-content">
                                    {% for a in Galerie  %} {# if a.type == 'image'#}
                                        {% if a.type == 0 %}
                                            <div class="my-slides">
                                                <img style="width: 100%;" src="{{ asset(a.image ?: '/assets/Backoffice/images/fcpm.png') }}" />
                                            </div>
                                        {% endif %}
                                    {% endfor %}
                                    <div class="caption-container">
                                        <p id="caption"></p>
                                    </div>
        
                                    <div class="column-box">
                                        {% for a in Galerie %} {# if a.type == 'image'#}
                                            {% if a.type == 0 %}
                                                <div class="column">
                                                    <img class="demo" style="width: 100%;" src="{{ asset(a.image ?: '/assets/Backoffice/images/fcpm.png') }}" />
                                                </div>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
        
                        <!-- Videos Tab -->
                        <div class="tab-pane fade" id="videos" role="tabpanel" aria-labelledby="videos-tab">
                            <div class="carousel-row" id="carousel-videos">
                                {% for a in Galerie %}
                                    {% if a.type == 1 %}
                                        {% set videoId = (a.image | split('watch?v=')) | last | split('&') | first %}
                                        <div class="carousel-row--img">
                                        <iframe
                                            width="100%"
                                            height="300"
                                            src="https://www.youtube.com/embed/{{ videoId }}"
                                            frameborder="0"
                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                            allowfullscreen>
                                        </iframe>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                {% else %}
                    <div class="actualite_box_cl">
                        Aucune image ou vidéo disponible.
                    </div>
                {% endif %}
            </main>
        </section>


        <div class='yellowLine'></div>
        <section id="counts" class=" row counts">
            <div class="text-center">
                <h6 class="title-page">LES TYPES DE PÊCHE MARITIME</h6>
            </div>
            <div class="col-md-6">
            <div class="swiper swiper2" style='padding:4%;;max-width:100%;max-height:600px;z-index:0'>
                <div class="swiper-wrapper">
                        {% for s in slider %}
                            <div class="swiper-slide" style='background-image:url("{{ asset(s.img) }}");color:white;background-repeat: no-repeat;background-size: cover;object-fit: contain;'>
                                <div class="slide__content">
                                    <div class="slide__text  to" style="text-shadow: 2px 2px #000000;">
                                        <h2 class="slide__text-heading slidtitre" style='font-family: system-ui;margin-bottom: 0%;height: 0px;'>{{ s.titreFr }}</h2>
                                        <p class="slide__text-desc"></p>
                                            {% if s.url != "" %}
                                                <a href="{{ s.url }}" class="slide__text-link">Voir plus</a>
                                            {% endif %}
                                    </div>
                                </div>
                            </div>
                            {% set index = index+1 %}
                        {% endfor %}
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="row site-section bg-image overlay"  style="z-index:0;height: 272px; background-image: linear-gradient(rgba(0,0,0,42%), rgba(0,0,0,0.4)), url('/assets/FrontofficeFr/images/plage.webp'); background-size: cover; background-position: center;top: 160px;margin-right: 70px;">
                    {% for stat in dataStat %}
                        {% if stat.detailOrder == 1 %}
                            {% set icon = asset("assets/Backoffice/images/canne-a-peche.png") %}
                        {% elseif stat.detailOrder == 2 %}
                            {% set icon = asset("assets/Backoffice/images/bateau-de-peche.png") %}
                        {% elseif stat.detailOrder == 3 %}
                            {% set icon = asset("assets/Backoffice/images/bateau-de-haut.png") %}
                        {% elseif stat.detailOrder == 4 %}
                            {% set icon = asset("assets/Backoffice/images/plongeur.png") %}
                        {% else %}
                            {% set icon = '' %}
                        {% endif %}
                    
                        <div class="col-lg-3 col-md-6">
                            <div class="count-box">
                                <img style="height:70px;width:70px" src="{{ icon }}" />
                                <span style="margin-top:5%" data-purecounter-start="0" data-purecounter-end="{{ stat.valeur }}" data-purecounter-duration="1" class="purecounter"></span>
                                <p style="margin-top:5%">{{ stat.titreFr }}</p>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
            
        </section>
        
        
        <div class='yellowLine'></div>
        <section id="Slide-Calendrier" class="Slide-Calendrier" style="z-index:0" >
            <div class="text-center">
                <h6 class="title-page">CARTE DU DÉCOUPAGE TERRITORIAL DES CHAMBRES DE LA PÊCHE MARITIME</h6>
            </div>
            <div class="row justify-content-center mt-4" style='display:flex;'>
                <div class="swiper swiper2" style=';z-index:0;max-width:100%;max-height:auto;background-image:url("{{ asset("assets/FrontofficeFr/images/carte_fr_2.jpg") }}");background-position: top;background-repeat: no-repeat;background-size: contain;'>
                </div>
            </div>
        </section>
        
        
        <div class='yellowLine'></div>
        <section id="Slide-Calendrier" class="Slide-Calendrier" >
            <div class="text-center">
                <h6 class="title-page">MÉTÉO ET EVENEMENTS</h6>
            </div>
            <div class="row justify-content-center mt-2 mb-4" style='display:flex;'>
                <div class='col-lg-4 test mt-4' style='max-width: 100%;'>
                    <div class="meteo-plage"  style='margin: 5%;padding: 0%;max-width: 90%;z-index:0'>
                        <iframe
                            width="100%"
                            height="350"
                            src="https://embed.windy.com/embed2.html?lat=34.02&lon=-6.83&detailLat=34.02&detailLon=-6.83&width=650&height=450&zoom=10&level=surface&overlay=wind&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=kt&metricTemp=C&radarRange=-1"
                            frameborder="0">
                        </iframe>
                    </div>
                </div>

                <div class='col-lg-4 mt-3 pb-3' style='max-width: 100%;;z-index:0'>
                    <div id="color-calendar" style='margin-top:5%;display: flex;justify-content: center;'></div>
                </div>
                
                {#<div class='col-lg-4 mt-4' style='max-width: 100%;'>#}
                {#    <div class="met" style='margin: 5%;padding: 5%;max-width: 90%;' id="ww_7b6d646262bc8" v='1.3' loc='auto' a='{"t":"horizontal","lang":"fr","sl_lpl":1,"ids":[],"font":"Arial","sl_ics":"one_a","sl_sot":"celsius","cl_bkg":"image","cl_font":"#FFFFFF","cl_cloud":"#FFFFFF","cl_persp":"#81D4FA","cl_sun":"#FFC107","cl_moon":"#FFC107","cl_thund":"#FF5722"}'>#}
                {#        <a href="https://weatherwidget.org/pl/" id="ww_7b6d646262bc8_u" target="_blank">Bezpłatny Widget Pogodowy HTML</a> #}
                {#        strony internetowej#}
                {#    </div>#}
                {#    <script async src="https://app1.weatherwidget.org/js/?id=ww_7b6d646262bc8"></script>#}
                {#</div>#}
                
                <div class='col-lg-4 mt-4'>
                    <select id="citySelect">
                        <option value="">-- Choisissez une ville --</option>
                        <option value="1487401">Casablanca</option>
                        <option value="1487410" selected>Rabat</option>
                        <option value="1487412">Marrakech</option>
                        <option value="1487414">Fès</option>
                        <option value="1487416">Tanger</option>
                        <option value="1487418">Agadir</option>
                    </select>
                    
                    <div class="widget-container">
                        <div id="meteoWidget"></div>
                    </div>
                </div>
                
        </section>

        
        
        

        
        <div style='width:100%;background:white;'>
            <div class="text-center" >
                <div class='yellowLine'></div>
                <h6 class="title-page" style="margin-top: 0px;">NOS PARTENAIRES</h6>
            </div>
            <ul id="slider3" style=''>
                {% for p in partenaires %}
                    {% set site = "#" %}
                    {% if p.site != "" %}
                        {% set site = p.site %}
                    {% endif %}
                    <li><a href="{{ site }}" target="_blank"><img src="{{ asset(p.logo) }}" alt="{{ p.titre }}"></a></li>
                {% endfor %}
            </ul>
        </div> 


        
    </main>
{% endblock %}
{% block js %}

    <script src="{{ asset("assets/Backoffice/js/calendar/bootstrap_calendar.js") }}"></script>
    <script src="{{ asset("assets/FrontofficeFr/js/jquery.bxSlider.js") }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/color-calendar/dist/bundle.min.js"></script>
    <script src="{{ asset("assets/FrontofficeFr/assets/vendor/purecounter/purecounter_vanilla.js") }}"></script>
    <script src="{{ asset("assets/FrontofficeFr/js/galerry.js") }}"></script>

    <script type="text/javascript">

        const select = document.getElementById("citySelect");
         const widgetDiv = document.getElementById("meteoWidget");
        
        const cityId = 1487410;
        widgetDiv.innerHTML = ""; // Reset
    
        if (cityId) {
          const widgetId = "weatherapi-widget-" + cityId;
          widgetDiv.innerHTML = `
            <div id="${widgetId}"></div>
          `;
    
          const script = document.createElement("script");
          script.src = `https://www.weatherapi.com/weather/widget.ashx?loc=${cityId}&wid=1&tu=1&div=${widgetId}`;
          script.async = true;
          document.body.appendChild(script);
        }
        
            
          select.addEventListener("change", () => {
            const cityId = select.value;
            widgetDiv.innerHTML = ""; // Reset
        
            if (cityId) {
              const widgetId = "weatherapi-weather-widget-4 weatherapi-widget-" + cityId;
              widgetDiv.innerHTML = `
                <div id="${widgetId}"></div>
              `;
        
              const script = document.createElement("script");
              script.src = `https://www.weatherapi.com/weather/widget.ashx?loc=${cityId}&wid=1&tu=1&div=${widgetId}`;
              script.async = true;
              document.body.appendChild(script);
            }
          });
       
       /********************/
        /***************************/


        new PureCounter();

        var mapSerialise = {{ map|json_encode|raw }};

       

        $(".mapArea").on("click", function(e){
            e.preventDefault();

            var map = JSON.parse(mapSerialise);

            var code = $(this).attr("alt");


            var titre = map[code].nom;
            var text = map[code].textFr;

            document.getElementById("mapContent").innerHTML = "<b>"+titre+"</b><br/>"+text;
        });

        //----- calendar

        $(document).ready( function(){
            var cTime = new Date(), month = cTime.getMonth()+1, year = cTime.getFullYear();

            theMonths = ["Janvier", "Fevrier", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Decembre"];

            theDays = ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"];
            events = [
                {% for e in events %}
                    [
                        "{{ "%2d"|format(e.dateEvenement|date("d"))|replace({' ': ''}) }}/{{ "%2d"|format(e.dateEvenement|date("m"))|replace({' ': ''}) }}/{{ "%2d"|format(e.dateEvenement|date("Y"))|replace({' ': ''}) }}",
                        '{{ e.titreFr }}',
                        '/fr/detailsEvenement/{{ e.id }}/',
                        '#fb6b5b',
                        ''
                    ],
                {% endfor %}
            ];


            $('#slider3').bxSlider({
                ticker: true,
                tickerSpeed: 8000,
                tickerHover: true
            });


            const swiper = new Swiper('.swiper1', {
                // Optional parameters
                direction: 'horizontal',
                loop: true,

                autoplay: {
                    delay: 4000,
                    disableOnInteraction: false,
                },

                // If we need pagination

                /*
                pagination: {
                    el: '.swiper-pagination',
                    clickable : true,
                }, */

                
                pagination: {
                    el: '.swiper-pagination',
                    type: 'bullets',
                    clickable: true,
                    renderBullet: function (index, className) {
                        return '<span class="' + className + '">' + (index + 1) + '</span>';
                    },
                },
                

                // Navigation arrows
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },

                // And if we need scrollbar
                scrollbar: {
                    el: '.swiper-scrollbar',
                },
             });



            var swiper6 = new Swiper(".swiper2", {
                 autoplay: {
                    delay: 5000,
                    disableOnInteraction: false,
                },
                grabCursor: true,
                effect: "creative",
                creativeEffect: {
                    prev: {
                        shadow: true,
                        translate: ["-120%", 0, -500],
                    },
                    next: {
                        shadow: true,
                        translate: ["120%", 0, -500],
                    }
                }
            });

    });

    const myEvents = [
    {% for e in events %}
      {
        start: '{{ (e.dateEvenement|date("Y")) }}-{{ (e.dateEvenement|date("m")) }}-{{ (e.dateEvenement|date("d")) }}T06:00:00',
        end: '{{ (e.dateEvenement|date("Y")) }}-{{ (e.dateEvenement|date("m")) }}-{{ (e.dateEvenement|date("d")) }}T06:00:00',
        url: '/fr/detailsEvenement/{{ e.id }}/'
        // more key value pairs here
      },
    {% endfor %}
    ];


    new Calendar({
        id: '#color-calendar',
        eventsData: myEvents,
        // custom colors
        primaryColor: '#3c70b3',
        headerBackgroundColor: 'black',
        // small or large
        calendarSize: 'large',
        // an array of layout modifiers
        selectedDateClicked: (currentDate, DateEvents) => {
            if(DateEvents != '')
            {
                window.location = DateEvents[0].url;
            }
         }
     })



    </script>
{% endblock %}