{% extends 'FrontofficeFr/base.html.twig' %}
{% block activeAc %}main-menu-active{% endblock %}
{% block body %}
    <link type="text/css" rel="stylesheet" href="{{ asset('assets/FrontofficeFr/css/lightslider.css') }}" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .carousel {
            position: relative;
            text-align: -webkit-center;
        }
        .carousel-inner {
            position: relative;
            width: 1000px;
            overflow: hidden;
        }
        .carousel-control-next-icon
        {
            background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
            background-color: #3c70b3;
            padding: 20px;
        }
        .carousel-control-prev-icon
        {
            background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
            background-color: #3c70b3;
            padding: 20px;
        }
        .text-primary{
            color:#e8b154 !important;
        }
        .block_ac {
            width: 100%;
            margin: 0;
            background-color: aliceblue;
            padding: 0px 0px;
        }

        .block_ac h3 {
            font-weight: bold;
            color: #0d0d4d;
            margin-bottom: 20px;
        }

        .block_ac iframe {
            width: 100%;
            height: 500px;
            max-height: 500px;
            padding: 20px;
        }

        .block_ac img.img-fluid {
            width: 90%;
            height: 500px;
            border-radius: 10px;
            display: block;
            margin: 0px 80px 12px 80px;
                object-fit: contain;
        }

        .block_ac .article-content {
            font-size: 18px;
            line-height: 1.6;
            color: #333;
            text-align: justify;
            display: block;
            margin: 0px 80px 12px 80px
        }

        .gallery {
            padding: 0;
            margin: 20px auto;
            text-align: center;
        }

        .gallery img {
            width: 100%;
            max-height: 400px;
            object-fit: cover;
            border-radius: 10px;
            margin-bottom: 10px;
        }

        #share-block {
            margin: 40px auto;
            padding: 15px;
            max-width: 500px;
            border: 1px solid black;
            border-radius: 30px;
            background-color: #0d0d4d;
            text-align: center;
        }

        #share {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 15px;
        }

        #share a {
            font-size: 24px;
            color: white;
            transition: transform 0.2s;
        }

        #share a:hover {
            transform: scale(1.2);
            color: gold;
        }

        /* Sidebar */
        .blockActu {
            padding-top: 30px;
            background-color: #fff;
            border-left: 2px solid #eee;
        }

        .actualite_box_cl {
            border: 2px solid #3c70b3;
            border-radius: 5px;
            margin: 40px !important;
            margin-bottom: 20px;
            background: #fdfdfd;
            transition: box-shadow 0.3s;
            text-align: center;
        }

        .actualite_box_cl:hover { 
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
        }

        .actualite_box img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            border-radius: 10px;
            margin-bottom: 10px;
        }

        .date_ac {
            font-size: 15px;
            font-weight: 600;
            color: #3c70b3;
            margin-top: 0px;
            display: block;
        }

        /* Responsive */
        @media screen and (max-width: 768px) {
            .block_ac iframe {
                height: 200px;
                padding: 20px;
            }

            #share {
                flex-direction: column;
                align-items: center;
            }

            .blockActu {
                border-left: none;
                margin-top: 30px;
            }
        }

        .actualite_box {
            background: #ffffff;
            /* max-width: 230px; */
            min-height: 345px;
            padding: 0 !important;
            box-shadow: 0px 0px 0px 0px !important;
            display: block;
            margin: 0 auto 20px auto;
        }

        .article-content {
            display: table-caption;
            width: 90%;
        }

        ..article-content p {
            margin-bottom: 1.2em !important;
        }

        .article-content p img {
            max-width: 100% !important;
            height: 500px !important;
            display: block !important;
            margin: 20px auto !important;
            border-radius: 10px !important;
            object-fit: contain;
        }

        .article-content h1,
        .article-content h2,
        .article-content h3,
        .article-content h4 {
            color: #0d0d4d;
            margin-top: 30px;
            margin-bottom: 15px;
            font-weight: bold;
        }

        .article-content ul,
        .article-content ol {
            margin: 10px 20px;
            padding-left: 20px;
        }

        .article-content blockquote {
            font-style: italic;
            border-left: 5px solid #ccc;
            padding-left: 15px;
            margin: 20px 0;
            color: #555;
            background-color: #f8f8f8;
        }

        #share-block {
            margin: 40px auto;
            padding: 4px;
            max-width: 300px;
            border: 1px solid #3c70b3;
            border-radius: 15px;
            background-color: #3c70b3;
            text-align: center;
        }
        #share {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 5px;
            margin-bottom: -25px;
        }
        #share a:hover {
            transform: scale(1.2);
            color: #e8b154;
        }

         @media (max-width: 768px) {
            .block_ac .article-content {
                margin: 0px 20px 12px 20px;
            }

            .block_ac img.img-fluid {
                width: 100% !important;
                height: auto !important;
                margin: 20px 0px 20px 0px;
            }

            #share {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                gap: 10px;
                margin-top: 5px;
                margin-bottom: -25px;
                align-content: stretch;
                flex-direction: row-reverse;
            }

            .block_ac h3 {
                font-weight: bold;
                color: #0d0d4d;
                margin-bottom: 20px;
                text-align: center;
            }
        }

        .actualite-link {
            display: inline-block;
            font-size: 15px;
            color: #007BFF; /* Bleu Bootstrap */
            text-decoration: none;
            border-bottom: 1px dashed #007BFF;
                margin: 0px 80px 12px 80px;
            transition: color 0.3s ease, border-color 0.3s ease;
            word-break: break-word;
        }

        .actualite-link:hover {
            color: #0056b3;
            border-bottom-color: transparent;
            text-decoration: underline;
        }
    </style>
    <div class="actualites_title">
        <br/>
        <div class="text-center">
            <img src="{{ asset('/assets/Backoffice/images/logo-fcpm.png') }}" alt="FCPM Logo" />
            <h3 class="title-page" style="color:white;">FCPM Dans la presse</h3>
        </div>
    </div>

    <div class="row block_ac">
        <div class="col-md-9 pt-3">
            {# <h3 class="text-center">{{ actualite.titreFr }}</h3> #}

            <div class="row" style="margin: 0px 80px 0px 80px;">
                <div class="col-md-9 " >
                    <h3 class="text-right">{{ actualite.titreAr }}</h3>
                </div>
                {% if actualite.fichierFr is not empty %}
                    <div class="col-md-3" style="text-align: left;">
                        <a href="{{ actualite.fichierFr }}" download class="btn btn-primary">
                            Télécharger le fichier
                        </a>
                    </div>
                {% endif %}
            </div>

            {% if actualite.urlVideo != '' %}
                {# <iframe src="{{ actualite.urlVideo|replace({'watch?v=' : 'embed/'}) }}" frameborder="0" allowfullscreen></iframe> #}
                {% set videoId = actualite.urlVideo|split('watch?v=')|last|split('&')|first %}
                <iframe src="https://www.youtube.com/embed/{{ videoId }}" frameborder="0" allowfullscreen></iframe>
            {% else %}
                {# <img src="{{ asset(actualite.imgPrincipal ?: '/assets/Backoffice/images/fcpm.png') }}" class="img-fluid" alt="Image principale"> #}
                {% if images|length > 0 %}
                    <div id="imageCarousel" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            {% for img in images %}
                                <div class="carousel-item {% if loop.first %}active{% endif %}">
                                    {# Assuming the img.img contains a full URL or relative path to the image #}
                                    <img src="{{ img.img }}" class="d-block w-100" alt="Image de publication">
                                </div>
                            {% endfor %}
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#imageCarousel" data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#imageCarousel" data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </button>
                    </div>

                {% else %}
                    {# <img src="{{ asset(actualite.imgPrincipal ?: '/assets/Backoffice/images/fcpm.png') }}" class="img-fluid" alt="Image principale"> #}
                    <img src="{{ asset(actualite.imgPrincipal ?: '/assets/Backoffice/images/fcpm.png') }}" class="img-fluid" alt="Image principale">
                {% endif %}
            {% endif %}

            {% if actualite.url is not empty %}
                <a href="{{ actualite.url }}" class="actualite-link" target="_blank" rel="noopener">
                    {{ actualite.url }}
                </a>
            {% endif %}

            <div class="article-content  mt-4">
                {{ actualite.textFr|raw }}
            </div>


            <div id="share-block">
                <span style="color:white;">Partager sur :</span>
                <div id="share">
                    <a class="facebook" href="https://www.facebook.com/share.php?u=http://www.fcpm.org.ma/fr/detailArticle/{{ actualite.id }}/&title={{ actualite.titreFr }}" target="_blank"><i class="fa fa-facebook"></i></a>
                    <a class="twitter" href="https://twitter.com/intent/tweet?status={{ actualite.titreFr }} http://www.fcpm.org.ma/fr/detailArticle/{{ actualite.id }}/" target="_blank"><i class="fa fa-twitter"></i></a>
                    <a class="googleplus" href="https://plus.google.com/share?url=http://www.fcpm.org.ma/fr/detailArticle/{{ actualite.id }}/" target="_blank"><i class="fa fa-google-plus"></i></a>
                </div>
            </div>
        </div>

        <div class="col-md-3 blockActu">
            <h3 class="text-center text-primary pt-3 ">Autres</h3>

            {% for o in others %}
                <div class="actualite_box_cl">
                    <a href="/fr/detailActualite/{{ type }}/{{ codeType }}/{{ o.titreFr|replace({' ': '_'}) }}/{{ o.id }}/">
                        <div class="actualite_box">
                            <img src="{{ o.imgPrincipal }}" alt="Autre actualité">
                            <h3>{{ o.titreFr }}</h3>
                            {# <p>
                                {{ o.textFr|striptags|length > 50 ? o.textFr|striptags|slice(0, 50) ~ '...' : o.textFr|striptags }}
                            </p> #}
                            <span class="date_ac">Le {{ o.date|date("d-m-Y") }}</span>
                            {# <a class="btn btn-info mt-2" href="/fr/detailArticle/{{ o.id }}/">Voir plus</a> #}
                        </div>
                    </a>
                </div>
            {% else %}
                <div class="actualite_box_cl">
                    Aucun article similaire
                </div>
            {% endfor %}
        </div>
    </div>

{% endblock %}
{% block js %}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="{{ asset('assets/FrontofficeFr/js/lightslider.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#image-gallery-slider-htPC').lightSlider({
                gallery:true,
                item:1,
                thumbItem:9,
                slideMargin: 0,
                speed:500,
                pause: 5000,
                auto:true,
                loop:true,
                onSliderLoad: function() {
                    $('#image-gallery-slider-htPC').removeClass('cS-hidden');
                }
            });
        });
    </script>

{% endblock %}