{% load static i18n %}
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}{{ shop.name }}{% endblock %}</title>
    <link rel="icon" type="image/svg+xml" href="{% static 'shop/favicon.svg' %}">
    <meta name="csrf-token" content="{{ csrf_token }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.44.0/dist/tabler-icons.min.css"
          integrity="sha512-lN84NfQHM5zFEciWFvS3+AT7M8WTKA5QNTn7x7eK7W+V74EglzVYc7PkoQW4sFvIg/5+PPdwp3nd4DUS+Szihw=="
          crossorigin="anonymous" referrerpolicy="no-referrer">
    <link rel="stylesheet" href="{% static 'shop/storefront.css' %}">
</head>
<body class="min-h-screen bg-base-100 text-base-content flex flex-col"
      data-shop-slug="{{ shop.slug }}"
      data-order-url="{% url 'storefront:submit_order' shop.slug %}"
      data-login-url="{% url 'storefront:login' shop.slug %}"
      {% if buyer %}data-buyer="1" data-buyer-discord="{{ buyer.discord_handle }}"
      data-buyer-name="{{ buyer.name }}" data-buyer-portrait="{{ buyer.portrait }}"{% endif %}>
    <header class="border-b border-base-300 bg-base-200/60">
        <div class="max-w-6xl mx-auto px-4 py-4 flex items-center justify-between gap-4">
            <h1 class="text-2xl font-bold tracking-tight">{% block header %}{{ shop.name }}{% endblock %}</h1>
            {# reserved for future section tabs + "Login with EVE SSO" #}
            <nav class="text-sm flex items-center gap-4">{% block header_nav %}
                <button type="button" data-cart-open aria-label="Open request"
                        class="relative inline-flex items-center text-base-content/70 hover:text-base-content transition-colors">
                    <i class="ti ti-shopping-cart text-2xl leading-none"></i>
                    <span data-cart-badge class="hidden absolute -top-2 -right-2 rounded-full bg-primary text-primary-content text-[10px] font-bold leading-none px-1.5 py-0.5">0</span>
                </button>
                {% if buyer %}
                <div class="flex items-center gap-2">
                    <img src="{{ buyer.portrait }}" alt="" class="w-6 h-6 rounded">
                    <span class="text-base-content/80">{{ buyer.name }}</span>
                    <span class="text-base-content/30" aria-hidden="true">&middot;</span>
                    <a href="{% url 'storefront:logout' shop.slug %}"
                       class="text-base-content/50 hover:text-base-content transition-colors">Logout</a>
                </div>
                {% else %}
                <a href="{% url 'storefront:login' shop.slug %}" class="btn btn-sm btn-primary">
                    <i class="ti ti-login"></i> Login with EVE
                </a>
                {% endif %}
            {% endblock %}</nav>
        </div>
    </header>

    <main class="max-w-6xl mx-auto w-full px-4 py-8 flex-1">
        {% block content %}{% endblock %}
    </main>

    <footer class="border-t border-base-300 bg-base-200/60">
        <div class="max-w-6xl mx-auto px-4 py-6 text-center text-xs text-base-content/50">
            <p>&copy; 2014 CCP hf. All rights reserved. "EVE", "EVE Online", "CCP",
               and all related logos and images are trademarks or registered trademarks of CCP hf.</p>
        </div>
    </footer>

    {# Cart "request" drawer — client-side prototype, populated by cart.js. #}
    <div data-cart-backdrop class="hidden fixed inset-0 bg-black/50 z-40"></div>
    <aside data-cart-drawer
           class="fixed top-0 right-0 h-full w-full max-w-md bg-base-100 border-l border-base-300 z-50 translate-x-full transition-transform duration-200 flex flex-col">
        <div class="flex items-center justify-between px-4 py-4 border-b border-base-300">
            <h2 class="text-lg font-bold" data-cart-title>{% trans "Your request" %}</h2>
            <button type="button" data-cart-close aria-label="{% trans 'Close' %}"
                    class="text-base-content/50 hover:text-base-content"><i class="ti ti-x text-xl"></i></button>
        </div>
        <div data-cart-body class="flex-1 overflow-y-auto px-4"></div>
        <div data-cart-foot class="border-t border-base-300 px-4 py-4"></div>
    </aside>
    <script src="{% static 'shop/cart.js' %}" defer></script>

    {# Table view opts in via [data-table]; the enhancer no-ops when none is present. #}
    <script src="{% static 'shop/backoffice_tables.js' %}" defer></script>
    <script>
    // Instant client-side filter for any [data-search] toolbar (see _section_toolbar.html).
    // Filters [data-name] items, hides empty [data-search-group] sections, and toggles a
    // [data-search-empty] "no results" element.
    document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll("[data-search]").forEach(function (root) {
            var input = root.querySelector("[data-search-input]");
            if (!input) return;
            var items = Array.from(document.querySelectorAll("[data-name]"));
            var groups = Array.from(document.querySelectorAll("[data-search-group]"));
            var empty = document.querySelector("[data-search-empty]");
            input.addEventListener("input", function () {
                var q = input.value.trim().toLowerCase();
                var any = false;
                items.forEach(function (el) {
                    var match = !q || el.dataset.name.indexOf(q) !== -1;
                    el.classList.toggle("hidden", !match);
                    if (match) any = true;
                });
                groups.forEach(function (g) {
                    g.classList.toggle("hidden", !g.querySelector("[data-name]:not(.hidden)"));
                });
                if (empty) empty.classList.toggle("hidden", any);
            });
        });
    });
    </script>
</body>
</html>
