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

{% block title %}{{ listing.ship_name|default: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 'fitted' %}" 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.ship_name|default:listing.eve_type.name }}</h1>
        <p class="text-base-content/50 mt-1">{{ listing.eve_type.name }}</p>

        <div class="mt-6 flex items-center gap-4">
            <span class="text-4xl font-bold text-success">{{ listing.price_display }}</span>
            {% if not listing.stock %}
            <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.ship_name|default:listing.eve_type.name }}"
             data-price="{{ listing.price }}" data-price-display="{{ listing.price_display }}"
             data-type-id="{{ listing.eve_type.id }}" data-section="fitted" data-stock="{% if listing.stock %}1{% endif %}"></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>

<div class="mt-10 grid md:grid-cols-2 gap-8">
    <div>
        <div class="flex items-center justify-between gap-3 mb-3">
            <h2 class="text-sm font-semibold uppercase tracking-widest text-base-content/50">{% trans "Fitting" %}</h2>
            <button type="button" data-eft-copy class="rounded-md bg-base-200 border border-base-300 hover:border-primary/60 px-3 py-1.5 text-sm font-semibold inline-flex items-center gap-1.5">
                <i class="ti ti-clipboard"></i> {% trans "Copy EFT" %}
            </button>
        </div>
        <textarea data-eft-text class="hidden">{{ eft }}</textarea>
        <table class="w-full text-sm">
            <tbody>
                {% for group in fit.fitting %}
                <tr class="border-b border-base-content/10"><td colspan="2" class="pt-4 pb-1 text-xs uppercase tracking-wider text-base-content/40">{{ group.label }} ({{ group.count }})</td></tr>
                {% for item in group.items %}
                <tr class="border-b border-base-content/5">
                    <td class="py-1.5 pr-2 flex items-center gap-2">
                        <img src="https://images.evetech.net/types/{{ item.type_id }}/icon?size=32" width="22" height="22" class="rounded shrink-0" alt="">
                        <span>{{ item.name }}</span>
                    </td>
                    <td class="py-1.5 text-right text-base-content/50">{% if item.charge %}{{ item.charge.name }}{% endif %}</td>
                </tr>
                {% endfor %}
                {% endfor %}
                {% if fit.drones %}
                <tr class="border-b border-base-content/10"><td colspan="2" class="pt-4 pb-1 text-xs uppercase tracking-wider text-base-content/40">{% trans "Drones" %}</td></tr>
                {% for d in fit.drones %}
                <tr class="border-b border-base-content/5"><td class="py-1.5 flex items-center gap-2"><img src="https://images.evetech.net/types/{{ d.type_id }}/icon?size=32" width="22" height="22" class="rounded" alt="">{{ d.name }}</td><td class="py-1.5 text-right text-base-content/50">×{{ d.qty }}</td></tr>
                {% endfor %}
                {% endif %}
                {% if fit.cargo %}
                <tr class="border-b border-base-content/10"><td colspan="2" class="pt-4 pb-1 text-xs uppercase tracking-wider text-base-content/40">{% trans "Cargo" %}</td></tr>
                {% for c in fit.cargo %}
                <tr class="border-b border-base-content/5"><td class="py-1.5 flex items-center gap-2"><img src="https://images.evetech.net/types/{{ c.type_id }}/icon?size=32" width="22" height="22" class="rounded" alt="">{{ c.name }}</td><td class="py-1.5 text-right text-base-content/50">×{{ c.qty }}</td></tr>
                {% endfor %}
                {% endif %}
            </tbody>
        </table>
    </div>

    {% if fit.manifest %}
    <div>
        <h2 class="text-sm font-semibold uppercase tracking-widest text-base-content/50 mb-3">{% trans "Also included" %}</h2>
        <p class="text-xs text-base-content/40 mb-3">{% trans "Transfers with the ship. Not part of the EFT fitting." %}</p>
        <table class="w-full text-sm">
            <tbody>
                {% for m in fit.manifest %}
                <tr class="border-b border-base-content/5">
                    <td class="py-1.5 flex items-center gap-2">
                        <img src="https://images.evetech.net/types/{{ m.type_id }}/icon?size=32" width="22" height="22" class="rounded shrink-0" alt="">
                        <span>{{ m.name }}</span>
                    </td>
                    <td class="py-1.5 text-right text-base-content/40 whitespace-nowrap">{{ m.location }}</td>
                    <td class="py-1.5 pl-2 text-right text-base-content/50">×{{ m.qty }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}
</div>

<script>
(function () {
    var btn = document.querySelector("[data-eft-copy]");
    var src = document.querySelector("[data-eft-text]");
    if (!btn || !src) return;
    btn.addEventListener("click", function () {
        var text = src.value;
        var done = function () {
            var old = btn.innerHTML;
            btn.innerHTML = '<i class="ti ti-check"></i> Copied';
            setTimeout(function () { btn.innerHTML = old; }, 1500);
        };
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text).then(done, function () {});
        } else {
            src.classList.remove("hidden"); src.select();
            try { document.execCommand("copy"); done(); } catch (e) {}
            src.classList.add("hidden");
        }
    });
})();
</script>
{% endblock %}