{% extends 'FrontofficeAr/base.html.twig' %}
{% block activePress %}main-menu-active{% endblock %}
{% block titre %}{{ actualite.titreAr }}{% 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: cover;
        }

        .block_ac .article-content {
            font-size: 18px;
            line-height: 1.6;
            color: #333;
            text-align: justify;
            display: block;
            margin: 20px 80px 20px 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: cover;
        }

        .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;
        }
        .blog .blogInner .featureImg a img {
            width: 100%;
            margin-right: 10px !important;
            -webkit-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;
        }
         @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 12px 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;
            }
        }
    </style>
    <div class="actualites_title">
        <br/>
        <div class="text-center">
            <img src="{{ asset("/assets/Backoffice/images/logo-fcpm.png") }}" />
            <h3 class="title-page" style="color:white;">الجامعة في الصحافة</h3>
        </div>
    </div>
    <div class="row block_ac">
        <div class="col-md-9 pt-3">
            <h3 class="text-center">{{ actualite.titreAr }}</h3>

            {% 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">
            {% endif %}

            <div class="article-content">
                {{ actualite.textAr|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/ar/detailArticle/{{ actualite.id }}/&title={{ actualite.titreAr }}" target="_blank"><i class="fa fa-facebook"></i></a>
                    <a class="twitter" href="https://twitter.com/intent/tweet?status={{ actualite.titreAr }} http://www.fcpm.org.ma/ar/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/ar/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 ">أخرى</h3>

            {% for o in others %}
                <div class="actualite_box_cl">
                    <a href="/ar/detailArticle/{{ o.id }}/">
                        <div class="actualite_box">
                            <img src="{{ o.imgPrincipal }}" alt="Autre actualité">
                            <h3>{{ o.titreAr }}</h3>
                            {# <p>
                                {{ o.textAr|striptags|length > 50 ? o.textAr|striptags|slice(0, 50) ~ '...' : o.textAr|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 %}