{% load i18n %}
<section data-search-group>
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 mt-4">
        {% for listing in listings %}
        <div data-name="{{ listing.eve_type.name|lower }}"
             class="group relative flex items-center gap-2.5 p-2 rounded-lg bg-base-200 border border-base-300 hover:border-primary/50 transition">
            <img src="https://images.evetech.net/types/{{ listing.eve_type.id }}/icon?size=64"
                 alt="{{ listing.eve_type.name }}" loading="lazy" width="64" height="64"
                 class="w-12 h-12 object-contain shrink-0 rounded bg-base-300/40">
            <div class="min-w-0 flex-1">
                <h4 class="font-medium text-sm leading-tight line-clamp-2" title="{{ listing.eve_type.name }}">{{ listing.eve_type.name }}</h4>
                <p class="text-success font-bold text-sm">{{ listing.price_display }} <span class="text-base-content/40 font-normal">· {{ listing.stock }}</span></p>
            </div>
            <a href="{% url 'storefront:module_item' shop.slug listing.pk %}" class="absolute inset-0 z-10" aria-label="{{ listing.eve_type.name }}"></a>
            <div class="relative z-20 shrink-0" data-cart-control data-variant="card"
                 data-id="{{ listing.pk }}" data-name="{{ listing.eve_type.name }}"
                 data-price="{{ listing.price }}" data-price-display="{{ listing.price_display }}"
                 data-type-id="{{ listing.eve_type.id }}" data-section="modules" data-stock="{{ listing.stock }}"></div>
        </div>
        {% endfor %}
    </div>
</section>