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

{% 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 shop.description_html %}
<div class="shop-description relative overflow-hidden mb-8 rounded-xl bg-base-200/60 border border-base-300 border-l-4 border-l-warning p-6">
    <img src="https://images.evetech.net/types/35827/render?size=512" alt="" aria-hidden="true" class="shop-description__bg">
    <div class="shop-description__body relative">{{ shop.description_html }}</div>
</div>
{% endif %}

{% if featured_listings or grouped_listings %}
    <div class="flex items-center justify-between gap-3">
        <input type="search" id="hull-search" autocomplete="off"
               placeholder="{% trans 'Search hulls…' %}"
               class="w-full sm:max-w-xs rounded-lg bg-base-200 border border-base-300 px-3 py-2 text-sm placeholder:text-base-content/40 focus:outline-none focus:border-primary/60">
        <div class="inline-flex rounded-lg border border-base-content/15 overflow-hidden shrink-0">
            <a href="?view=grid" aria-label="{% trans 'Grid view' %}"
               class="px-3 py-2 flex items-center text-lg {% if view == 'grid' %}bg-base-300 text-base-content{% else %}text-base-content/40 hover:text-base-content{% endif %}">
                <i class="ti ti-layout-grid"></i>
            </a>
            <a href="?view=table" aria-label="{% trans 'Table view' %}"
               class="px-3 py-2 flex items-center text-lg {% if view == 'table' %}bg-base-300 text-base-content{% else %}text-base-content/40 hover:text-base-content{% endif %}">
                <i class="ti ti-list"></i>
            </a>
        </div>
    </div>

    {% if view == 'table' %}
        {% include 'storefront/_hulls_table.html' %}
    {% else %}
        {% include 'storefront/_hulls_featured.html' %}
        {% include 'storefront/_hulls_grid.html' %}
    {% endif %}

    <p id="hull-no-results" class="hidden py-12 text-center text-base-content/50">{% trans "No hulls match your search." %}</p>

    <script>
    (function () {
        const input = document.getElementById("hull-search");
        if (!input) return;
        const items = Array.from(document.querySelectorAll("[data-name]"));
        const groups = Array.from(document.querySelectorAll("[data-hull-group]"));
        const noResults = document.getElementById("hull-no-results");
        input.addEventListener("input", function () {
            const q = input.value.trim().toLowerCase();
            let anyVisible = false;
            items.forEach(function (el) {
                const match = !q || el.dataset.name.indexOf(q) !== -1;
                el.classList.toggle("hidden", !match);
                if (match) anyVisible = true;
            });
            groups.forEach(function (group) {
                group.classList.toggle("hidden", !group.querySelector("[data-name]:not(.hidden)"));
            });
            noResults.classList.toggle("hidden", anyVisible);
        });
    })();
    </script>
{% else %}
<div class="rounded-xl bg-base-200 border border-base-300 p-10 text-center text-base-content/60">
    {% trans "No items listed yet." %}
</div>
{% endif %}
{% endblock %}