{% 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 data-sort="text" class="py-2 px-2 text-left font-medium">{% trans "Name" %}</th>
            <th data-sort="num" class="py-2 px-2 text-right font-medium">{% trans "Variants" %}</th>
            <th data-sort="num" class="py-2 px-2 text-right font-medium">{% trans "Stock" %}</th>
            <th class="py-2 px-2 text-right font-medium">{% trans "From" %}</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">
                <div class="relative w-7 h-7">
                    <img src="https://images.evetech.net/types/{{ listing.eve_type.id }}/bpc?size=32"
                         width="28" height="28" class="rounded" alt="">
                    <span class="absolute -top-1.5 -left-1.5 rounded-full bg-base-100 text-warning text-[10px] leading-none p-0.5" title="{% trans 'Featured' %}"><i class="ti ti-star-filled"></i></span>
                </div>
            </td>
            <td class="py-2 px-2 font-medium"><a href="{% url 'storefront:bpc_item' shop.slug listing.pk %}" class="hover:underline">{{ listing.eve_type.name }}</a></td>
            <td data-sort-value="{{ listing.variant_count }}" class="py-2 px-2 text-right text-base-content/60">{{ listing.variant_count }}</td>
            <td data-sort-value="{{ listing.total_stock }}" class="py-2 px-2 text-right">
                {{ listing.total_stock }}
            </td>
            <td class="py-2 px-2 text-right text-success font-semibold">{{ listing.from_per_run_display }}</td>
        </tr>
        {% endfor %}
        {% for listing in bpc_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 }}/bpc?size=32"
                     width="28" height="28" class="rounded" alt="">
            </td>
            <td class="py-2 px-2 font-medium"><a href="{% url 'storefront:bpc_item' shop.slug listing.pk %}" class="hover:underline">{{ listing.eve_type.name }}</a></td>
            <td data-sort-value="{{ listing.variant_count }}" class="py-2 px-2 text-right text-base-content/60">{{ listing.variant_count }}</td>
            <td data-sort-value="{{ listing.total_stock }}" class="py-2 px-2 text-right">
                {{ listing.total_stock }}
            </td>
            <td class="py-2 px-2 text-right text-success font-semibold">{{ listing.from_per_run_display }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>