{% extends 'storefront/section_base.html' %}
{% load i18n %}

{% block section_content %}
{% if featured_listings or bpc_listings %}
{% trans "Search blueprints…" as search_placeholder %}

{% if view == 'table' %}
<div data-table data-page-size="25" data-table-style="tailwind" data-table-hidden-class="hidden">
    {% include 'storefront/_section_toolbar.html' with search_placeholder=search_placeholder search_width="sm:w-[calc(33.333%_-_0.5rem)]" table_search=True %}
    <div class="overflow-x-auto">
        {% include 'storefront/_bpc_table.html' %}
    </div>
    <nav data-table-pager class="mt-3"></nav>
</div>
{% else %}
{% include 'storefront/_section_toolbar.html' with search_placeholder=search_placeholder search_width="sm:w-[calc(33.333%_-_0.5rem)]" %}
{% if featured_listings %}
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-4">
    {% for listing in featured_listings %}
    <a href="{% url 'storefront:bpc_item' shop.slug listing.pk %}"
       data-name="{{ listing.eve_type.name|lower }}"
       class="group cursor-pointer flex items-center gap-3 p-2 rounded-lg bg-base-200 border border-warning/40 hover:border-warning transition">
        <div class="relative shrink-0">
            <img src="https://images.evetech.net/types/{{ listing.eve_type.id }}/bpc?size=64"
                 alt="{{ listing.eve_type.name }}" loading="lazy" width="64" height="64"
                 class="w-14 h-14 object-contain rounded bg-base-300/40">
            <span class="absolute -top-1.5 -left-1.5 rounded-full bg-base-100 text-warning text-xs leading-none p-0.5"><i class="ti ti-star-filled"></i></span>
        </div>
        <div class="min-w-0 flex-1">
            <h4 class="font-medium text-sm truncate" title="{{ listing.eve_type.name }}">{{ listing.eve_type.name }}</h4>
            <p class="text-success font-bold text-sm">{% if listing.from_per_run_display == 'Ask' %}{% trans "Ask" %}{% else %}{% trans "from" %} {{ listing.from_per_run_display }}{% endif %}</p>
        </div>
        <span class="shrink-0 text-xs text-base-content/40">{{ listing.variant_count }} {% trans "var" %}</span>
    </a>
    {% endfor %}
</div>
{% endif %}
{% if bpc_listings %}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 mt-4">
    {% for listing in bpc_listings %}
    <a href="{% url 'storefront:bpc_item' shop.slug listing.pk %}"
       data-name="{{ listing.eve_type.name|lower }}"
       class="group cursor-pointer flex items-center gap-3 p-2 rounded-lg bg-base-200 border border-base-300 hover:border-primary/50 transition">
        <img src="https://images.evetech.net/types/{{ listing.eve_type.id }}/bpc?size=64"
             alt="{{ listing.eve_type.name }}" loading="lazy" width="64" height="64"
             class="w-14 h-14 object-contain shrink-0 rounded bg-base-300/40">
        <div class="min-w-0 flex-1">
            <h4 class="font-medium text-sm truncate" title="{{ listing.eve_type.name }}">{{ listing.eve_type.name }}</h4>
            <p class="text-success font-bold text-sm">{% if listing.from_per_run_display == 'Ask' %}{% trans "Ask" %}{% else %}{% trans "from" %} {{ listing.from_per_run_display }}{% endif %}</p>
        </div>
        <span class="shrink-0 text-xs text-base-content/40">{{ listing.variant_count }} {% trans "var" %}</span>
    </a>
    {% endfor %}
</div>
{% endif %}
<p data-search-empty class="hidden py-12 text-center text-base-content/50">{% trans "No blueprints match your search." %}</p>
{% endif %}
{% else %}
<div class="rounded-xl bg-base-200 border border-base-300 p-10 text-center text-base-content/60">
    {% trans "No blueprint copies listed yet." %}
</div>
{% endif %}
{% endblock %}