{% if relateds_bottom is not empty %}


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

<div class="relative" x-data="{ activeTab: '{{ relateds_bottom[0].id }}' }">

<div class="relative">
    <div class="w-full p-0 -mb-4 -mr-4">
        <div class="absolute -left-28 top-0 w-24 flex flex-col items-end">
            <div class="related_box_icon_left relative bg-primary w-20 h-20 flex flex-col items-center justify-center mb-2 mr-2.5">
                <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-end gap-1.5 text-xs font-default">
                {% for item in relateds_bottom %}
                <li>
                    <a 
                    class="bg-black/20 hover:bg-primary inline-block text-center text-white px-2 py-1.5 hover:pr-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>



</div>

<div class="lg:grid lg:gap-4 lg:grid-cols-[auto_300px] relative bg-[#ededed] -mx-4 p-4">
   {# tabs panels #}
        {% for box in relateds_bottom %}
        <div id="{{box.id}}" x-show="activeTab === '{{ box.id }}'">
            <div class="grid grid-cols-2 gap-4 items-center">
                {% for card in box.news %}
                    <div class="pb-4 {% if loop.index in [1,2] %} border-b  border-[#dddcdc] {% endif %}">
                        <a href="{{card.link}}" class="w-full flex justify-between items-center rounded-lg group relative {{xpost_class}}">
                            <div class="grid grid-cols-[112px_auto] gap-4 items-center">
                             
                                {% if card.image != '' %}
                                <div class="relative">
                                    <img loading="lazy" fetchpriority="low" class="bg-slate-100 flex-shrink-0 w-28 h-24 rounded-lg object-cover object-center group-hover:opacity-90" src="{{card.image}}"
                                    alt="" />
                                </div>
                        
                                {% else %}
                                <div class="bg-slate-100 flex-shrink-0 w-28 h-24 rounded-lg flex items-center justify-center text-slate-300">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
                                    </svg>
                                </div>
                                {% endif %}
                        
                                <div class="flex flex-col">
                                    <div class="card_title line-clamp-3 text-lg lg:text-base leading-5 font-medium font-condensed">
                                        {{card.title|raw}}
                                    </div>
                                    <div class="text-xs flex mt-1 text-slate-500">
                                        <span 
                                            id="card_pubdate_{{card.id}}" 
                                            class="text-slate-500" 
                                            x-data="timeAgoComponent({{ card.timestamp ?? 'null' }})" 
                                            x-init="updateTime()" 
                                            x-text="time">
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                {% endfor %}
            </div>
        </div>
        {% endfor %}

        <div class="min-h-[250px] bg-slate-100 border adbox_placeholder"> </div>
    </div>

</div>

</div>

{% endif %}
