{% load i18n %}
{% regroup listings by eve_type as hull_groups %}
{% for group in hull_groups %}
<section data-search-group>
    <div class="flex items-center gap-3 mt-8 mb-4">
        <img src="https://images.evetech.net/types/{{ group.grouper.id }}/icon?size=32" width="22" height="22" class="rounded" alt="">
        <h3 class="text-sm font-semibold">{{ group.grouper.name }}</h3>
        <div class="h-px flex-1 bg-base-content/10"></div>
    </div>
    <div class="grid grid-cols-4 sm:grid-cols-6 gap-3">
        {% for listing in group.list %}
        <div data-name="{{ listing.ship_name|lower }} {{ listing.eve_type.name|lower }}"
             class="group relative rounded-lg bg-base-200 border border-base-300 overflow-hidden hover:border-primary/50 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=256"
                     alt="{{ listing.eve_type.name }}" loading="lazy"
                     class="w-full h-full object-cover transition group-hover:scale-105">
                {% if not listing.stock %}
                <span class="absolute top-1.5 right-1.5 rounded-md bg-warning/90 px-1.5 py-0.5 text-[10px] font-semibold text-warning-content">{% trans "Build to order" %}</span>
                {% endif %}
            </div>
            <div class="p-2 pr-9">
                <h4 class="font-medium text-xs truncate" title="{{ listing.ship_name|default:listing.eve_type.name }}">{{ listing.ship_name|default:listing.eve_type.name }}</h4>
                <p class="text-success font-bold text-sm mt-0.5">{{ listing.price_display }}</p>
            </div>
            <a href="{% url 'storefront:fitted_item' shop.slug listing.pk %}" class="absolute inset-0 z-10 cursor-pointer"
               aria-label="{{ listing.ship_name|default:listing.eve_type.name }}"></a>
            <div class="absolute bottom-2 right-2 z-20" data-cart-control data-variant="card"
                 data-id="{{ listing.pk }}" data-name="{{ listing.ship_name|default:listing.eve_type.name }}"
                 data-price="{{ listing.price }}" data-price-display="{{ listing.price_display }}"
                 data-type-id="{{ listing.eve_type.id }}" data-section="fitted" data-stock="{% if listing.stock %}1{% endif %}"></div>
        </div>
        {% endfor %}
    </div>
</section>
{% endfor %}