{% load i18n %}
{% if featured_listings %}
<section data-hull-group>
    <div class="flex items-center gap-3 mt-8 mb-4">
        <h3 class="text-xs font-semibold uppercase tracking-widest text-warning">{% trans "Featured" %}</h3>
        <div class="h-px flex-1 bg-base-content/10"></div>
    </div>
    <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
        {% for listing in featured_listings %}
        <a href="{% url 'storefront:item' shop.slug listing.pk %}"
           data-name="{{ listing.eve_type.name|lower }}"
           class="group cursor-pointer block rounded-xl bg-base-200 border border-warning/40 overflow-hidden hover:border-warning transition">
            <div class="relative aspect-square overflow-hidden bg-base-300/40">
                <img src="https://images.evetech.net/types/{{ listing.eve_type.id }}/render?size=512"
                     alt="{{ listing.eve_type.name }}" loading="lazy"
                     class="w-full h-full object-cover transition group-hover:scale-105">
                <span class="absolute top-2 left-2 text-warning text-lg"><i class="ti ti-star-filled"></i></span>
                {% if listing.stock %}
                <span class="absolute top-2 right-2 rounded-md bg-base-100/80 px-2 py-0.5 text-xs font-semibold">{{ listing.stock }}</span>
                {% else %}
                <span class="absolute top-2 right-2 rounded-md bg-warning/90 px-2 py-0.5 text-xs font-semibold text-warning-content">{% trans "Build to order" %}</span>
                {% endif %}
            </div>
            <div class="p-3">
                <h4 class="font-semibold text-base truncate" title="{{ listing.eve_type.name }}">{{ listing.eve_type.name }}</h4>
                <p class="text-success font-bold text-lg mt-0.5">{{ listing.price_display }}</p>
            </div>
        </a>
        {% endfor %}
    </div>
</section>
{% endif %}