{% 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:detail' shop.slug %}" 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="grid md:grid-cols-5 gap-8 items-start">
    <div class="md:col-span-2 rounded-xl overflow-hidden bg-base-200 border border-base-300">
        <img src="https://images.evetech.net/types/{{ listing.eve_type.id }}/render?size=512"
             alt="{{ listing.eve_type.name }}" class="w-full h-auto">
    </div>
    <div class="md:col-span-3">
        <h1 class="text-3xl font-bold tracking-tight">{{ listing.eve_type.name }}</h1>
        <p class="text-base-content/50 mt-1">{{ listing.eve_type.eve_group.name }}</p>

        <div class="mt-6 flex items-center gap-4">
            <span class="text-4xl font-bold text-success">{{ listing.price_display }}</span>
            {% if listing.stock %}
            <span class="rounded-md bg-base-200 border border-base-300 px-3 py-1 text-sm font-semibold">{{ listing.stock }} {% trans "in stock" %}</span>
            {% else %}
            <span class="rounded-md bg-warning/90 px-3 py-1 text-sm font-semibold text-warning-content">{% trans "Build to order" %}</span>
            {% endif %}
        </div>

        {% comment %} Hidden until the order flow ships — revert to restore the Qty + Add-to-order CTA.
        <div class="mt-6 flex items-end gap-3 max-w-md">
            <div>
                <label for="qty" class="block text-xs uppercase tracking-wider text-base-content/50 mb-1">{% trans "Qty" %}</label>
                <input type="text" inputmode="numeric" id="qty" name="quantity" value="1"
                       oninput="this.value=this.value.replace(/[^0-9]/g,'').slice(0,3)"
                       class="w-16 rounded-lg bg-base-200 border border-base-300 px-2 py-3 text-center focus:outline-none focus:border-primary/60">
            </div>
            <button type="button" class="flex-1 cursor-pointer rounded-lg bg-primary text-primary-content font-semibold py-3 hover:bg-primary/90 transition">
                {% trans "Add to order" %}
            </button>
        </div>
        {% endcomment %}

        {% if listing.description_html %}
        <div class="shop-description mt-8 pt-8 border-t border-base-content/10">{{ listing.description_html }}</div>
        {% endif %}
    </div>
</div>
{% endblock %}