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

{% set xpost_class = '' %}

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

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

{% 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="w-2 h-24 bg-primary mr-2"></div>
    <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" style="margin-bottom: 0;" 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="" />
     
            {% if has_comment %}
            <div class="card_badge badge absolute top-2 right-2">
                <div class="grid gap-0.5 grid-cols-[auto_12px] items-center justify-right  bg-black/50 text-white group-hover:bg-primary-light rounded-full text-xs relative px-1 w-10">
                    <span class=" text-xs text-right">{{card.comments_count.data}}</span>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-3 mr-0.5">
                        <path d="M4.913 2.658c2.075-.27 4.19-.408 6.337-.408 2.147 0 4.262.139 6.337.408 1.922.25 3.291 1.861 3.405 3.727a4.403 4.403 0 0 0-1.032-.211 50.89 50.89 0 0 0-8.42 0c-2.358.196-4.04 2.19-4.04 4.434v4.286a4.47 4.47 0 0 0 2.433 3.984L7.28 21.53A.75.75 0 0 1 6 21v-4.03a48.527 48.527 0 0 1-1.087-.128C2.905 16.58 1.5 14.833 1.5 12.862V6.638c0-1.97 1.405-3.718 3.413-3.979Z"></path>
                        <path d="M15.75 7.5c-1.376 0-2.739.057-4.086.169C10.124 7.797 9 9.103 9 10.609v4.285c0 1.507 1.128 2.814 2.67 2.94 1.243.102 2.5.157 3.768.165l2.782 2.781a.75.75 0 0 0 1.28-.53v-2.39l.33-.026c1.542-.125 2.67-1.433 2.67-2.94v-4.286c0-1.505-1.125-2.811-2.664-2.94A49.392 49.392 0 0 0 15.75 7.5Z"></path>
                    </svg>
                    
                </div>
            </div>
            {% endif %}
    
        </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-semibold">
                {{card.title|raw}}
            </div>
            {% include "templates/components/cards/info-labels.twig" %}
        </div>
    </div>
</a>