{% load i18n %}
<table class="w-full text-sm mt-4">
    <thead>
        <tr class="text-base-content/40 text-xs uppercase tracking-wider border-b border-base-content/10">
            <th class="py-2 px-2 text-left font-medium"></th>
            <th class="py-2 px-2 text-left font-medium">{% trans "Name" %}</th>
            <th class="py-2 px-2 text-left font-medium">{% trans "Group" %}</th>
            <th class="py-2 px-2 text-right font-medium">{% trans "Price" %}</th>
            <th class="py-2 px-2 text-right font-medium">{% trans "Stock" %}</th>
        </tr>
    </thead>
    <tbody>
        {% for listing in featured_listings %}
        <tr data-name="{{ listing.eve_type.name|lower }}" class="border-b border-base-content/10 hover:bg-base-200/50">
            <td class="py-2 px-2">
                <img src="https://images.evetech.net/types/{{ listing.eve_type.id }}/icon?size=32"
                     width="28" height="28" class="rounded" alt="">
            </td>
            <td class="py-2 px-2 font-medium"><a href="{% url 'storefront:item' shop.slug listing.pk %}" class="hover:underline"><i class="ti ti-star-filled text-warning mr-1"></i>{{ listing.eve_type.name }}</a></td>
            <td class="py-2 px-2 text-base-content/60">{{ listing.eve_type.eve_group.name }}</td>
            <td class="py-2 px-2 text-right text-success font-semibold">{{ listing.price_display }}</td>
            <td class="py-2 px-2 text-right">
                {% if listing.stock %}{{ listing.stock }}{% else %}<span class="text-warning">{% trans "Build to order" %}</span>{% endif %}
            </td>
        </tr>
        {% endfor %}
        {% for listing in grouped_listings %}
        <tr data-name="{{ listing.eve_type.name|lower }}" class="border-b border-base-content/10 hover:bg-base-200/50">
            <td class="py-2 px-2">
                <img src="https://images.evetech.net/types/{{ listing.eve_type.id }}/icon?size=32"
                     width="28" height="28" class="rounded" alt="">
            </td>
            <td class="py-2 px-2 font-medium"><a href="{% url 'storefront:item' shop.slug listing.pk %}" class="hover:underline">{{ listing.eve_type.name }}</a></td>
            <td class="py-2 px-2 text-base-content/60">{{ listing.eve_type.eve_group.name }}</td>
            <td class="py-2 px-2 text-right text-success font-semibold">{{ listing.price_display }}</td>
            <td class="py-2 px-2 text-right">
                {% if listing.stock %}{{ listing.stock }}{% else %}<span class="text-warning">{% trans "Build to order" %}</span>{% endif %}
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>