{% extends "FrontofficeAr/base.html.twig" %}
{% block activeHome %}main-menu-active{% endblock %}
{% block titre %}جامعة غرف الصيد البحري{% endblock %}
{% block body %}
    <link rel="stylesheet" href="{{ asset("assets/FrontofficeFr/css/slider.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" />
    <link rel="stylesheet" href="{{ asset("assets/FrontofficeFr/css/galerry.css") }}" type="text/css" media="all">

    <style>
    
        .modal .prev, .modal .next {
            rotate: 180deg;
        }
        
        .titre_ac h5 {
            background-color: #3c70b3 !important;
            color: white;
            text-overflow: ellipsis;
            font-family: Tajawal;
            font-size: 19px;
            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: 594px;
            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;
        }
        
        .actualite_box_right {
            padding: 0 !important;
            box-shadow: -17px -16px 0px -8px rgb(232 177 84);
        }
   
        @media screen and (max-width: 1000px) {
            
            
            .pc{
                
                display:none;
            }
            
            .mob{
                
                display:block;
            }

             .image{
                width: 100%;
                height: 494px;
                border: 1px solid #3c70b3;
             }
             
             .slidtitre{
                    font-size:22px
                }

            .swiper1 {
                width: 100%;
                height: 594px;
                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: 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: 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: Tajawal;
            font-size:19px;
            padding: 7px;
        }

        .titre_slider h5{
            background-color: #3c70b3 !important;
            color: white;
            text-overflow: ellipsis;
            font-family: Tajawal;
            font-size:19px;
            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);
        }

        .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: 25px;
        }
        
        .swiper-pagination-bullet.swiper-pagination-bullet-active{
          display: revert !important;
          border-radius: 0px !important;
          color: #e8b154;
          background-color: transparent !important;
          opacity: 1;
        }

        .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;
        }

        h4 {
            font-size: 30px;
            color: #e8b154;
        }
        #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;
            }
            
            .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: -16px 30px 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;
                right: 41%;
                width: 71px;
                height: 4px;
                background: #3c70b3;
            }

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

            .heading-92913:after
            {
                content: "";
                position: absolute;
                bottom: 15px;
                right: 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_box img {
                height: auto !important;
            }

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

            .play i {
                font-size: 40px;
            }
            
            .image{
                height:250px;
                border: 1px solid #3c70b3;
            }
            .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;
            }

            .blog .blogInner .postExcerpts .postExcerptInner , .blog .blogInner .postExcerpts , .blog .blogInner .featureImg , .blog .blogInner .blogDateTime i {
            
                margin-right: 0px !important;
            }
            
            .site-section {
                margin-left: 0px !important;
                margin-bottom:20px !important;
                top:0px !important;
            }
            
            #weatherapiweatherwidget-2 .weatherapi-weather-wrap
             {
                transition: background .5s ease-in;
                color: #fff;
                clear: both;
                width: 414px !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;
        }
        
        .titre_pub{
            position: relative;
            margin-bottom: -23px;
        }

        {# .titre_pub:after
        {
            content: "";
            position: absolute;
            bottom: 40px;
            left: 1px;
            width: 150px;
            height: 4px;
            background: #e8b154;
        }
         #}

         .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 */
        }
        
        .image
         {
            width: 100%;
            margin-top: 15px;
            height: 473px;
            border: 1px solid #3c70b3;
        }
        
        .title-page {
            background-color: #3c70b3;
            color: white;
            width: 40%;
            margin-right: 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;
        }
        
        .color-calendar.basic .calendar__arrow-prev .calendar__arrow-inner::before {
            margin-left: 0.3em;
            transform: rotate(45deg) !important;
        }
        
        .color-calendar.basic .calendar__arrow-next .calendar__arrow-inner::before {
            margin-right: 0.3em;
            transform: rotate(-135deg) !important;
        }
        
        .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 mt-3">
                <h2 class="card-title text-center" style="color: #3c70b3;padding-left: 10px;">أخبار الغرف</h2>
                {% for a in actualitsChambre %}
                    {# {% if index != 0 %} #}
                        <div class="actualite_box_cl text-center" >
                            {% if a.url != '' %}
                                 <a href="{{ a.url }}" title='actualité Chambre' target='_black'>
                            {% else %}
                                <a href="/ar/detailActualitesChambre/{{ a.titreAr|replace({' ': '_'}) }}/{{ a.id }}/">
                            {% endif %}
                                <div class="actualite_box1 " style="direction: rtl; position: relative; min-height: 100px;">
                                    {% if a.imgPrincipal != '' %}
                                        <img style="height: 200px;width: 100%;" src="{{ asset(a.imgPrincipal) }}" />
                                    {% else %}
                                        <img style="height: 200px;width: 100%;" 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.titreAr|length > 30 ? a.titreAr|slice(0, 30) ~ '...' : a.titreAr }}
                                        </h5>
                                    </span>
                                </div>
                            </a>
                        </div>
                    {# {% endif %}
                    {% set index = index + 1 %} #}
                {% 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 class="card-title text-center" style="color: #3c70b3;font-weight: 900;">{{ a.titreAr|length > 100 ? a.titreAr|slice(0, 100) ~ '...' : a.titreAr }}</h2>
                                    <a href="/ar/detailActualite/{{ type }}/{{ codeType }}/{{ a.titreAr|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>
                                            
                                        </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;">مستجدات</h2>
                        <ul class="list-unstyled mt-3">
                            {% for a in Publication %}
                                <li class="mb-2 {% if a.titreAr != 'cpublication' %}with-border{% endif %}">
                                    <a href="/ar/detailPublication/{{ a.type }}/{{ a.titreAr|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: 9px;margin-left: 10px;"></i>
                                        <span style="font-size: larger;">
                                            {{ a.titreAr|length > 45 ? a.titreAr|slice(0, 45) ~ '...' : a.titreAr }}
                                        </span>
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                        <ul class="list-unstyled mt-3">
                            {% for a in annonce1 %}
                                <li class="mb-2 {% if a.titreAr != 'cpublication' %}with-border{% endif %}">
                                    <a href="/ar/detailAnnonce/{{ a.titreAr|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: 9px;margin-left: 10px;"></i>
                                        <span style="font-size: larger;">
                                            {{ a.titreAr|length > 45 ? a.titreAr|slice(0, 45) ~ '...' : a.titreAr }}
                                        </span>
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                        <ul class="list-unstyled mt-3">
                            {% for a in projet_lois1 %}
                                <li class="mb-2 {% if a.titreAr != 'cpublication' %}with-border{% endif %}">
                                    <a href="/ar/detailProjetlois/{{ a.titreAr|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: 9px;margin-left: 10px;"></i>
                                        <span style="font-size: larger;">
                                            {{ a.titreAr|length > 45 ? a.titreAr|slice(0, 45) ~ '...' : a.titreAr }}
                                        </span>
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                        <ul class="list-unstyled mt-3">
                            {% for e in Evenements1 %}
                                <li class="mb-2 {% if e.titreAr != 'cpublication' %}with-border{% endif %}">
                                    <a href="/ar/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: 9px;margin-left: 10px;"></i>
                                        <span style="font-size: larger;">
                                            {{ e.titreAr|length > 45 ? e.titreAr|slice(0, 45) ~ '...' : e.titreAr }}
                                        </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" style='margin-bottom:2%'>
            <h5 class="title-page">أحدث المقالات</h5>
        </div>
        <br/>
        <div class="row pc" style='margin:0% 4% 0% 4%;direction: rtl;'>

            <div class="col-md-1"></div>
            <div class='col-md-7' style='padding:0%'>
                {% 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="/ar/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.titreAr|length > 100 ? a.titreAr|slice(0, 100) ~ '...' : a.titreAr }}</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.titreAr|length > 100 ? a.titreAr|slice(0, 100) ~ '...' : a.titreAr }}</h4>
                                </div>
                                <span class="text-left date_ac" style='background-color:#106eea;color:white'>
                                    يوم {{ 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="/ar/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.titreAr|length > 100 ? a.titreAr|slice(0, 100) ~ '...' : a.titreAr }}</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.titreAr|length > 100 ? a.titreAr|slice(0, 100) ~ '...' : a.titreAr }}</h5>
                                </div>
                                <span class="text-left date_ac" style='background-color:#106eea;color:white'>
                                   يوم {{ 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">لا يوجد مقالات في الوقت الحالي</h2>
            {% endif %}

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


        <div class='col-md-12' style='padding:0%'>

            {% for a in articles %}

                <div style='float:left;' class="col-sm-6 actualite_box_cl text-center">
                    <a href="/ar/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.titreAr|length > 100 ? a.titreAr|slice(0, 100) ~ '...' : a.titreAr }}</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.titreAr|length > 100 ? a.titreAr|slice(0, 100) ~ '...' : a.titreAr }}</h5>
                            </div>
                            <span class="text-left date_ac" style='background-color:#106eea;color:white'>
                               يوم {{ a.date|date("d-m-Y") }}
                            </span>
                        </div>
                    </a>
                </div>

            {% endfor %}
        </div>

            {% if actualites|length == 0 %}
                <h2 class="text-center">لا يوجد مقالات في الوقت الحالي</h2>
            {% endif %}

        </div>


    </section>

    <div class='yellowLine'></div>
    <section id="container-fluid" class="container-fluid" style='padding-top: 0%;'>
         <div class="text-center " style='margin-bottom:2%'>
            <h5 class="title-page">آخر الأخبار</h5>
        </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="/ar/detailActualite/{{ type }}/{{ codeType }}/{{ a.titreAr|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.titreAr }}</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>
        </div>
    </section>


    <div class='yellowLine'></div>
    <section >
         <div class="text-center">
            <h5 class="title-page">مساحة إعلامية</h5>
        </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">صور</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">فيديوهات</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 ?: '/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">
                    لا توجد أي صورة أو فيديو متاح.
                </div>
            {% endif %}
        </main>
    
    </section>
    
    
    <div class='yellowLine'></div>
    <div class="text-center" style='margin-bottom:2%'>
        <h5 class="title-page" style="margin-top: 0px;">أصناف الصيد البحري </h5>
    </div>
    <section id="counts" class=" row counts mt-4">
        <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.titreAr }}</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-left: 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.titreAr }}</p>
                        </div>
                    </div>
                {% endfor %}
    
            </div>
        </div>
    </section>
    
    <div class='yellowLine'></div>
    <section id="Slide-Calendrier" class="Slide-Calendrier" >
        <div class="text-center">
            <h5 class="title-page">خريطة التقسيم المجالي لغرف الصيد البحري</h5>
        </div>
        <div class="row justify-content-center" style='display:flex;'>
            <div class="swiper swiper2" style='z-index:0;max-width:100%;max-height:500px;background-image:url("{{ asset("assets/FrontofficeFr/images/carte2.jpg") }}");background-position: top;background-repeat: no-repeat;background-size: 100%;'>
            </div>
        </div>
    </section>
    
    
    <div class='yellowLine'></div>
    <section id="Slide-Calendrier" class="Slide-Calendrier" >
        <div class="text-center" style='margin-bottom:2%'>
            <h5 class="title-page">حالة الطقس و أحداث</h5>
        </div>
        <div class="row justify-content-center mt-2 mb-4" style='display:flex;'>
            <div class='col-lg-4 test' style="max-width:100%;text-align: center;">
                <!-- Météo Plage Section -->
                <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 pb-3' style='max-width: 100%;'>
                <div id="color-calendar" style='margin-top:5%;display: flex;justify-content: center;z-index:0;'></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'>
               <select id="citySelect">
                  <option value="">-- اختر مدينة --</option>
                  <option value="1487401">الدار البيضاء</option>
                  <option value="1487410" selected>الرباط</option>
                  <option value="1487412">مراكش</option>
                  <option value="1487414">فاس</option>
                  <option value="1487416">طنجة</option>
                  <option value="1487418">أكادير</option>
                </select>
                                
                <div class="widget-container">
                    <div id="meteoWidget"></div>
                </div>
            </div>
        </div>
    </section>
    
    
    <div class='yellowLine'></div>
    <div class="text-center">
        <h5 class="title-page" style="margin-top:0px;background-color: #3c70b3;">شركاؤنا</h5>
    </div>
    <div style='width:100%;background:white;direction:ltr !important;'>
        <ul id="slider3">
            {% 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> 
    
    
        
{% 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.titreAr }}',
                        '/ar/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: '/ar/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',
        locale: 'fr',
        // an array of layout modifiers
        selectedDateClicked: (currentDate, DateEvents) => {
            if(DateEvents != '')
            {
                window.location = DateEvents[0].url;
            }
         }
     })



    </script>
{% endblock %}