{% include 'partial/home/search.html.twig' %}


<!-- Hero Start -->
<div class="container-fluid pt-5 bg-dark-cyber hero-header-alt mb-5">
    <div class="container pt-5">
        <div class="row g-5 pt-5">
            <div class="align-self-center text-center text-lg-center mb-lg-5">
                <h1 class="display-4 text-white mb-4 animated slideInRight shine-text">Articles</h1>
            </div>
        </div>
    </div>
</div>
<!-- Hero End -->

<div class="container py-3">
    <div class="text-center">
        <div class="btn btn-sm border rounded-pill text-danger px-3 mb-3">Articles</div>
        <h1 class="fw-bold mt-3">Parcourez nos articles</h1>

        <!-- Barre de filtre (style page catégorie) -->
        <div class="search-wrapper mx-auto my-4" style="max-width: 500px;">
            <div class="input-group shadow-sm">
                <span class="input-group-text bg-white border-end-0 rounded-start-pill">
                    <i class="fas fa-search text-muted"></i>
                </span>
                <input 
                    type="text" 
                    id="blogArticleSearch" 
                    class="form-control border-start-0 rounded-end-pill" 
                    placeholder="Filtrer les résultats..." 
                    aria-label="Recherche d'actualités">
            </div>
        </div>
    </div>
</div>

<!-- Cybersecurity News Start -->
<div class="container-fluid mb-5">
    <div class="container ">
       
        <div class="row g-4" id="blogArticleList">
            {% for blogArticle in blogArticles %}
                <div class="col-lg-4 wow fadeIn blogArticle-item" data-wow-delay="0.3s">
                    <div class="case-item position-relative overflow-hidden rounded mb-2">
                        <img class="img-fluid fixed-image" src="{{ vich_uploader_asset(blogArticle, 'imageFile') }}" alt="{{ blogArticle.title }}">
                        <a class="case-overlay text-decoration-none" href="{{ path('home.blog_article.show', { slug: blogArticle.slug }) }}">
                            <small>{{ blogArticle.category.title | default('') }}</small>
                            <h5 class="lh-base text-white mb-3">{{ blogArticle.title }}</h5>
                            <span class="btn btn-square btn-primary"><i class="fa fa-arrow-right"></i></span>
                        </a>
                    </div>
                </div>
            {% else %}
                <div class="col-12 text-center">
                    <p class="text-muted">Aucun article trouvé.</p>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
<!-- Cybersecurity News End -->

<script>
    document.getElementById('blogArticleSearch').addEventListener('input', function() {
        const searchTerm = this.value.toLowerCase();
        const items = document.querySelectorAll('.blogArticle-item');

        items.forEach(item => {
            const title = item.querySelector('h5').textContent.toLowerCase();
            if (title.includes(searchTerm)) {
                item.style.display = 'block';
            } else {
                item.style.display = 'none';
            }
        });
    });
</script>

<!-- Back to Top -->
<a href="#" class="btn btn-lg text-light bg-cyber-red btn-lg-square back-to-top pt-2">
    <i class="bi bi-arrow-up"></i>
</a>