{% extends 'base.html.twig' %}
{% block asset_css %}
    <link href="{{ asset('assets/css/aos.css') }}" rel="stylesheet">
    <style>
        span li {
            list-style: none;
        }

        span li::before {
            content: "\25AA";
            color: #87AB11;
            font-size: 20px;
            font-weight: bold;
            display: inline-block;
            width: 1em;
            margin-left: 10px;
        }

        p {
            color: black;
        }

        .card_article {
            margin-top: 5%;
            margin-left: 10%;
            margin-right: 10%;
            margin-bottom: 5%;
        }

        .text_legend {
            color: #183b6d;
            font-style: italic;
            font-weight: bold;
            text-decoration: italic;
        }

        /*Titre*/
        .titre_article {
            color: #001d55;
            font-size: 24px;
            font-weight: bold;
            line-height: 1.5;
        }

        /*Depuis .....*/
        .text_jumbotron {
            color: #000c4c;
            font-size: 16px;
        }

        .card_hr {
            position: absolute;
            background-color: #87AB11 !important;
            padding: 1.5px !important;
            border-radius: 10px;
            width: 100%%;
            margin-top: 5px;
            left: 40%;
            right: 40%;
        }

        .card_tryptique:hover {
            transform: translateX(30px);
        }

        .card_tryptique:hover hr {
            background-color: white;
        }

        .card_tryptique:hover .card_title {
            color: white;
        }

        .card_tryptique {
            border-left: 5px solid #007b31 !important;
            transition: transform 0.3s ease;
        }

        .actu_image {
            width: 100%;
            height: 275px;
        }

        .card_actu {
            height: 500px;
        }
        .titre_actu{
            height:50px;
        }
        .icon_actu {
            color: green !important;
        }
        @media only screen and (max-width: 990px) {
            .card_article {
                margin: 10px !important;
            }
        }

        @media only screen and (max-width: 1280px) {
            .div_logo {
                display: none !important;
            }

            .titre_article {
                margin-bottom: 20px !important;
            }
        }
    </style>
{% endblock %}
{% block body %}
    <!--Breadcrumb-->
    <section class="blog">
        <!-- banner -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 col-sm12 col-md-12 col-lg-12 col-xl-12 p-0">
                    <img src="../assets/images/banner/banner-1.png" alt="banner-1" class="w-100">
                </div>
            </div>
        </div>
        <!-- / banner -->
        <div class="bannerimg cover-image bg-background3" data-bs-image-src="../assets/images/banners/banner2.jpg">
            <div class="header-text mb-0">
                <div class="container">
                    <div class="text-center">
                        <h1 class="">Liste d'article</h1>
                        <ol class="breadcrumb text-center">
                            <li class="breadcrumb-item"><a href="{{ path('app_public_page') }}">Accueil</a></li>
                            <li class="breadcrumb-item active text-white" aria-current="page">Liste article</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--/Breadcrumb-->

    <!--Add listing-->
    <section>
        <div class="container">
            <div class="row">
                <!--Add lists-->
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                    <div class="row" data-number-rows="{{ actualites|length }}">
                        {% for actualite in actualites %}
                            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12">
                                <div class="card card_actu">
                                    <div class="item7-card-img actu_image">
                                        <a href="{{ path('app_public_actualite_show', { 'id': actualite.id }) }}"></a>
                                        <img src="{{ asset(actualite.image) }}" alt="img" class="cover-image"
                                             style="width:100%;height:100%;object-fit:cover" />
                                    </div>
                                    <div class="card-body card_actualites" style="height:250px">
                                        <div class="item7-card-desc d-flex mb-2">
                                            <a href="{{ path('app_public_actualite_show', { 'id': actualite.id }) }}"><i
                                                        class="fa fa-calendar-o text-muted me-2 icon_actu"></i>{{ actualite.dateActus|date('d/m/Y') }}
                                            </a>
                                        </div>
                                        <a href="{{ path('app_public_actualite_show', { 'id': actualite.id }) }}" class="text-dark">
                                            <h4 class="font-weight-semibold titre_actu  d-flex align-items-center" style="height:75px !important;width:100%">{{ actualite.libelle }}</h4>
                                        </a>
                                        <div class="desc_actu" style="height:100px">
                                            <p class="desc_courte_actu">{{ actualite.descCourte }}</p>
                                        </div>
                                        <div class="btn_actu" style="position:absolute;bottom:20px">
                                            <a href="{{ path('app_public_actualite_show', { 'id': actualite.id }) }}" class="btn btn-primary btn-sm lire-suite">Lire la
                                                suite</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <!--/Add lists-->


            </div>
        </div>
    </section>
    <!--Add listing-->
{% endblock %}
{% block asset_js %}
    <script src="{{ asset('assets/js/aos.js') }}"></script>
    <script>
        AOS.init({
            duration: 1500,
            once: true
        });


    </script>
    <script>
        //Fonction pour limiter le text et remplacer par (...)
        //Avec paramètre la classe de l'élément et la limite 
        function textTruncate(className,limit){
            console.log("Tonga ato ");
            var characterLimit = limit;
            var elements = document.querySelectorAll(className);


            // Now you can use array methods on elementArray
            elements.forEach(function(element) {
                var elementText = element.textContent;
                if (elementText.length > characterLimit) {
                    var truncatedText = elementText.substring(0, characterLimit) + "...";
                    element.textContent = truncatedText;
                    console.log(truncatedText);
                    return truncatedText
                }
                else{
                    console.log(elementText);
                    return elementText
                }
            });

            /* for (var i = 0; i < elements.length; i++) {
                var elementText = elements[i].textContent;
                if (elementText.length > characterLimit) {
                    var truncatedText = elementText.substring(0, characterLimit) + "...";
                    elements[i].textContent = truncatedText;
                    return truncatedText
                }
                else{
                    return elementText
                }
            } */
        }
        $( document ).ready(function() {
            textTruncate("p.desc_courte_actu",150);
            textTruncate("h4.titre_actu",35);
        })
    </script>
{% endblock %}