{% set has_comment = card.comments_count.data > 0 %}

{% set xpost_class = '' %}

{% set is_xpost = card.crossposting.src is not empty %}

{% set thumbnail_size = 'w=112&h=96' %}

{% if is_xpost %}
    {% set card_label = card.crossposting.label %}
    {% set xpost_class = 'is_xpost_' ~ card.crossposting.src %}
{% else %}
    {% set card_label = card.label %}
{% 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.sizes.thumbnail.url != '' %}
        <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.sizes.thumbnail.url}}?{{thumbnail_size}}"
            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>

                {% if has_comment %}
                <div class="flex items-center">
                    <div class=" text-xs text-right flex items-center">  
                        <div class="mx-1 size-1 block bg-slate-300 rounded-full"></div>
                        {{card.comments_count.data}} 

                    </div>

                    <span class="text-slate-300 ml-1">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                            fill="currentColor" class="size-3">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-3">
                                <path fill-rule="evenodd" d="M3.43 2.524A41.29 41.29 0 0 1 10 2c2.236 0 4.43.18 6.57.524 1.437.231 2.43 1.49 2.43 2.902v5.148c0 1.413-.993 2.67-2.43 2.902a41.202 41.202 0 0 1-5.183.501.78.78 0 0 0-.528.224l-3.579 3.58A.75.75 0 0 1 6 17.25v-3.443a41.033 41.033 0 0 1-2.57-.33C1.993 13.244 1 11.986 1 10.573V5.426c0-1.413.993-2.67 2.43-2.902Z" clip-rule="evenodd" />
                            </svg>
                              
                        </svg>
                    </span>
                </div>
                {% endif %}
                
            </div>
        </div>
    </div>
</a>