{% if latest_news is not empty %}

<section class="border p-4 rounded-lg">

    <div x-data="{ activeTab: 0 }" class="mx-auto w-full">

        <span class="uppercase text-primary font-semibold mb-2 block">Notizie:</span>
        <ul class="text-slate-500 mb-4">
            {% for key, list in latest_news %}
                <li class="inline-block mr-1"> 
                    <button @click="activeTab = {{loop.index0}}" :class="{ 'bg-slate-50 text-slate-900 border-slate-300': activeTab === {{loop.index0}} }" class="flex gap-2 items-center rounded-full px-4 h-8 py-2 text-sm font-semibold border">
                    <span>#{{key}}</span>
                    </button> 
                </li>
            {% endfor %}
        </ul> 

        <div>
            {% for list in latest_news %}
                <!-- Panel 1 -->
                <section x-show="activeTab === {{loop.index0}}">
                 
                        <div class="lg:grid lg:grid-cols-1 lg:gap-4">
                            {% for card in list|slice(0,3) %}
                            
                                    {% include 'templates/components/cards/card.twig' %}
                                
                            {% endfor %}
                        </div>
                 
                </section> 
            {% endfor %}
        </div>

    </div>

</section>

{% endif %}

