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

{% block title %}{{ listing.eve_type.name }} — {{ shop.name }}{% endblock %}

{% block content %}
{% if is_preview %}
<div role="alert" class="mb-6 rounded-lg border border-warning/40 bg-warning/10 px-4 py-3 text-sm text-warning">
    {% trans "Unpublished — only managers can see this preview." %}
</div>
{% endif %}

<a href="{% url 'storefront:section' shop.slug 'bpc' %}" class="inline-flex items-center gap-1 text-sm text-base-content/50 hover:text-base-content mb-6">
    <i class="ti ti-arrow-left"></i> {% blocktrans with name=shop.name %}Back to {{ name }}{% endblocktrans %}
</a>

<div class="flex items-center gap-4 mb-6">
    <img src="https://images.evetech.net/types/{{ listing.eve_type.id }}/bpc?size=64"
         alt="{{ listing.eve_type.name }}" width="64" height="64" class="shrink-0 rounded-lg">
    <div class="min-w-0">
        <h1 class="text-2xl font-bold tracking-tight truncate">{{ listing.eve_type.name }}</h1>
        <p class="text-base-content/50">{{ listing.eve_type.eve_group.name }}</p>
    </div>
</div>

<div class="overflow-x-auto">
<table class="w-full text-sm">
    <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">{% trans "ME" %}</th>
            <th class="py-2 px-2 text-left font-medium">{% trans "TE" %}</th>
            <th class="py-2 px-2 text-left font-medium">{% trans "Runs" %}</th>
            <th class="py-2 px-2 text-right font-medium">{% trans "Available" %}</th>
            <th class="py-2 px-2 text-right font-medium">{% trans "Price / run" %}</th>
            <th class="py-2 px-2 text-right font-medium">{% trans "Price" %}</th>
            <th class="py-2 px-2"></th>
        </tr>
    </thead>
    <tbody>
        {% for v in variants %}
        <tr class="border-b border-base-content/10">
            <td class="py-2 px-2 font-medium">{{ v.me }}</td>
            <td class="py-2 px-2 font-medium">{{ v.te }}</td>
            <td class="py-2 px-2">{{ v.runs }}</td>
            <td class="py-2 px-2 text-right">{{ v.stock }}</td>
            <td class="py-2 px-2 text-right text-base-content/40">{{ v.price_per_run_display }}</td>
            <td class="py-2 px-2 text-right text-success font-semibold">{{ v.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="{{ v.pk }}"
                     data-name="{{ listing.eve_type.name }} · ME{{ v.me }} TE{{ v.te }} · {{ v.runs }} runs"
                     data-price="{{ v.price }}" data-price-display="{{ v.price_display }}"
                     data-type-id="{{ listing.eve_type.id }}" data-section="bpc" data-stock="{{ v.stock }}"></div>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
</div>
{% endblock %}