{% if relateds_sidebar is not empty %}


{% set box_icon  = theme.icon|default('tworld') %}
{% set box_label = theme.label|default('Notizie') %}

<div class="sticky top-28" x-data="{ activeTab: '{{ relateds_sidebar.boxes[0].id }}' }">
    <div class="w-full p-0 -mb-4 -mr-4">
        <div class="absolute -right-28 top-0 w-24">
            <div class="related_box_icon relative bg-primary w-20 h-20 flex flex-col items-center justify-center mb-2">
                <div class="{{ box_icon }} mb-1"></div>
                <div class="text-white text-center text-xs font-medium">
                    {{ box_label }}
                </div>
            </div>

            {# tabs labels #}
            <ul class="flex flex-col items-start gap-1.5 text-xs font-default">
                {% for item in relateds_sidebar.boxes %}
                <li>
                    <a 
                    class="bg-black/20 hover:bg-primary inline-block text-center text-white px-2 py-1.5 hover:pl-4 transition-all"
                    :class="{ 'bg-primary': activeTab === '{{ item.id }}' }"
                    @click.prevent="activeTab = '{{ item.id }}'"
                    href="#{{ item.id }}"
                    title="{{ item.label }}">
                    {{ item.label }}
                </a>
                </li>
                {% endfor %}
            </ul>


        </div>
    </div>


    {# tabs panels #}
    <div class="">

        {% for box in relateds_sidebar.boxes %}

        <div id="{{box.id}}" x-show="activeTab === '{{ box.id }}'">

            <div class="grid grid-cols-1">
                {% for card in box.posts %}
                <div class="mb-4 border-b border-black/10 last:border-b-0">
                    {% include "templates/components/cards/card-sidebar.twig" %}
                </div>
                {% endfor %}
            </div>

        </div>


        {% endfor %}
        
    </div>
</div>

{% endif %}

