{% 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 %}

{% if section == 'modules' %}
{# Compact layout for icon items (modules/rigs/drones/implants) — no hero render. #}
<a href="{% url 'storefront:section' shop.slug 'modules' %}" 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="max-w-2xl">
    <div class="flex items-center gap-4">
        <img src="https://images.evetech.net/types/{{ listing.eve_type.id }}/icon?size=64"
             alt="{{ listing.eve_type.name }}" width="64" height="64"
             class="shrink-0 rounded-lg bg-base-200 border border-base-300">
        <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="mt-6 flex items-center gap-4">
        <span class="text-3xl font-bold text-success">{{ listing.price_display }}</span>
        <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>
    </div>

    <div class="mt-6" data-cart-control data-variant="detail"
         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>
</div>

{% else %}
{# Hero layout for ships — the 3D render carries the page. #}
<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>

        <div class="mt-6" data-cart-control data-variant="detail"
             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="{{ section }}"></div>

        {% 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>
{% endif %}
{% endblock %}
