{% 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" >Catégories</h1>
            </div>
         
            
        </div>
    </div>
</div>
<!-- Hero End -->

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

        <!-- Search bar améliorée -->
        <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="categorySearch" 
                    class="form-control border-start-0 rounded-end-pill" 
                    placeholder="filtrer les resultats..." 
                    aria-label="Recherche de catégorie"
                >
            </div>
        </div>

    </div>

    <div class="row g-4" id="categoryList">
        {% for category in categories %}
            {% if category.blogArticles | length > 0 %}
            <div class="col-md-6 col-lg-4 category-item">
                <div class="card h-100 shadow-sm border-0 rounded-4 p-4 text-center hover-shadow bg-white">
                    <div class="mb-3">
                        <i class="{{ category.icon }} fa-3x text-danger"></i>
                    </div>
                    <h5 class="fw-bold category-title">{{ category.title }}</h5>
                    <p class="text-muted small">
                        {{ category.shortDescription|length > 100 ? category.shortDescription|slice(0, 100) ~ '…' : category.shortDescription }}
                    </p>
                    <a href="{{ path('home.blog_article_by_category.list', { id_category: category.id }) }}" class="stretched-link text-decoration-none text-danger fw-semibold">
                        Voir les articles <i class="fa fa-arrow-right ms-1"></i>
                    </a>
                </div>
            </div>
            {% endif %}
        {% else %}
            <div class="col-12 text-center">
                <p class="text-muted">Aucune catégorie trouvée.</p>
            </div>
        {% endfor %}
    </div>
</div>


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

        categories.forEach(category => {
            const title = category.querySelector('.category-title').textContent.toLowerCase();
            if (title.includes(searchTerm)) {
                category.style.display = 'block';
            } else {
                category.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>