{% 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="text" class="py-2 px-2 text-left font-medium">{% trans "Group" %}</th>
            <th data-sort="num" class="py-2 px-2 text-right font-medium">{% trans "Stock" %}</th>
            <th data-sort="num" class="py-2 px-2 text-right font-medium">{% trans "Price" %}</th>
            <th class="py-2 px-2"></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 }}/icon?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:module_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 data-sort-value="{{ listing.stock }}" class="py-2 px-2 text-right">{{ listing.stock }}</td>
            <td data-sort-value="{{ listing.price }}" class="py-2 px-2 text-right text-success font-semibold">{{ listing.price_display }}</td>
            <td class="py-2 px-2 text-right w-px whitespace-nowrap">
                <div class="inline-block" data-cart-control data-variant="table"
                     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>
            </td>
        </tr>
        {% endfor %}
        {% for listing in 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:module_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 data-sort-value="{{ listing.stock }}" class="py-2 px-2 text-right">{{ listing.stock }}</td>
            <td data-sort-value="{{ listing.price }}" class="py-2 px-2 text-right text-success font-semibold">{{ listing.price_display }}</td>
            <td class="py-2 px-2 text-right w-px whitespace-nowrap">
                <div class="inline-block" data-cart-control data-variant="table"
                     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>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>