{% extends 'FrontofficeFr/base.html.twig' %}
{% block activeLois %}main-menu-active{% endblock %}
{% block titre %}{{ arretes.titreFr }}{% endblock %}
{% block body %}
    <link type="text/css" rel="stylesheet" href="{{ asset('assets/FrontofficeFr/css/lightslider.css') }}" />
    <style>
        .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;
            justify-self: center;
                padding-left: 28px;
            padding-right: 28px;
        }


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

        .btn-primary{
            background: #e8b154;
            border: 1px solid #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;
            }
        }
    </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;">Arrêtés</h3>
        </div>
    </div>

    <div class="row block_ac">
        <div class="col-md-9 pt-3">

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

            <img src="{{ asset(arretes.imageFr ?: '/assets/Backoffice/images/fcpm.png') }}" class="img-fluid" alt="Image principale">

            <div class="article-content">
                {{ arretes.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/detailArretes/{{ arretes.titreFr }}/{{ arretes.id }}/" target="_blank"><i class="fa fa-facebook"></i></a>
                    <a class="twitter" href="https://twitter.com/intent/tweet?status={{ arretes.titreFr }} http://www.fcpm.org.ma/fr/detailArretes/{{ arretes.titreFr }}/{{ arretes.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/detailArretes/{{ arretes.titreFr }}/{{ arretes.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/detailArretes/{{o.titreFr}}/{{ o.id }}/">
                        <div class="actualite_box">
                            <img src="{{ asset(o.imageFr ?: '/assets/Backoffice/images/fcpm.png') }}" 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">
                    Il n'existe aucun arrêtés 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>
        $(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 %}