Symfony Profiler

<div {{ attributes.add(stimulus_controller('training_filter')) }}>
    <section class="last-articles">
        <div class="flex flex-col gap-8 lg:gap-14 p-horizontal p-vertical">
            <h1 class="font-allerBold uppercase text-center lg:text-left text-2xl">Découvrez nos derniers <span class="text-blue-500">articles</span>
            </h1>
            <div class="flex flex-col lg:flex-row gap-12 lg:justify-between w-full">
                <div class="filters flex flex-col gap-8 w-full lg:w-fit">
                    <h3 class="hidden lg:block font-allerBold text-2xl text-left">Catégories</h3>

                    {# MOBILE CATEGORIES SELECT #}
                    <select class="hidden w-full lg:w-fit decoration-0 font-AllerRegular px-5 py-3 border border-grey-100 rounded-lg text-lg"
                            name="duree" id="duree-select">
                        <option value="">Pour quelle durée ?</option>
                        {% for category in this.allCategory %}
                            <option value="{{ category.id }}">{{ category.name }}</option>
                        {% endfor %}
                    </select>

                    {# DESKTOP CATEGORIES SELECT #}
                    <div class="hidden lg:flex flex-col gap-4">
                        {% for category in this.allCategory %}
                            <input class="hidden" data-model="category[]" type="checkbox" id="{{ category.name}}"
                                   name="category" value="{{ category.id }}"/>
                            <label class="transition-all cursor-pointer hover:text-pink-500 font-allerRegular text-sm text-grey-200"
                                   for="{{ category.name }}">{{ category.name }}</label>
                        {% endfor %}
                    </div>
                    <button class="hidden lg:block transition-all cursor-pointer hover:text-pink-500 font-allerRegular text-sm text-grey-200 text-left" data-action="live#action" data-action-name ="resetCat" id="reboot_filter">Réinitialiser les
                        filtres</button>

                </div>
                <div data-loading="addClass(hidden)"
                     class="grid grid-cols-1 gap-8 lg:grid-cols-2 3xl:grid-cols-3 justify-center">
                    {% if this.articleFilter is empty %}
                        <p class="font-allerLight italic text-pink-500 h-full"> Aucun résultat ne correspond à votre recherche. </p>
                    {% else %}
                        {% for article in this.articleFilter %}
                            {{ component('cards:blog_card', {id: article.id}) }}
                        {% endfor %}
                    {% endif %}
                </div>
                <div data-loading="addClass(block) removeClass(hidden)" class="hidden w-full flex justify-center items-center">
                    <lottie-player src="https://assets9.lottiefiles.com/packages/lf20_dkz94xcg.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop  autoplay></lottie-player>
                </div>
            </div>
        </div>
    </section>

</div>
templates/components/article_filter.html.twig line 1
