<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Art-DAG{% endblock %}</title>

    <!-- Tailwind CSS (same CDN as coop) -->
    <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
    <script>
    tailwind.config = {
        theme: {
            extend: {
                colors: {
                    dark: {
                        600: '#374151',
                        700: '#1f2937',
                        800: '#111827',
                        900: '#030712',
                    }
                }
            }
        }
    }
    </script>
    <!-- HTMX -->
    <script src="https://unpkg.com/htmx.org@2.0.8"></script>
    <!-- Hyperscript (for nav-tree scrolling arrows) -->
    <script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
    <!-- Font Awesome (for auth-menu + nav icons) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

    {% block head %}{% endblock %}

    <style>
        /* HTMX loading indicator */
        .htmx-indicator { display: none; }
        .htmx-request .htmx-indicator { display: inline-flex; }
        img { max-width: 100%; height: auto; }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        .scrollbar-hide::-webkit-scrollbar { display: none; }
        .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
    </style>
    <script>
        if (matchMedia('(hover: hover) and (pointer: fine)').matches) {
            document.documentElement.classList.add('hover-capable');
        }
    </script>
</head>
<body class="bg-stone-50 text-stone-900 min-h-screen">
    <div class="max-w-screen-2xl mx-auto py-1 px-1">
    {% block header %}
    {# Coop-style header: sky banner with title, nav-tree, auth-menu, cart-mini #}
    <div class="w-full">
      <div class="flex flex-col items-center md:flex-row justify-center md:justify-between w-full p-1 bg-sky-500">
        <div class="w-full flex flex-row items-top">
          {# Cart mini #}
          {% block cart_mini %}{% endblock %}

          {# Site title #}
          <div class="font-bold text-5xl flex-1">
            <a href="/" class="flex justify-center md:justify-start">
              <h1>{% block brand %}Art-DAG{% endblock %}</h1>
            </a>
          </div>

          {# Desktop nav: nav-tree + auth-menu #}
          <nav class="hidden md:flex gap-4 text-sm ml-2 justify-end items-center flex-0">
            {% block nav_tree %}{% endblock %}
            {% block auth_menu %}{% endblock %}
          </nav>
        </div>
      </div>
      {# Mobile auth #}
      <div class="block md:hidden text-md font-bold">
        {% block auth_menu_mobile %}{% endblock %}
      </div>
    </div>
    {% endblock %}

    {# App-specific sub-nav (Runs, Recipes, Effects, etc.) #}
    {% block sub_nav %}{% endblock %}

    </div>{# close max-w-screen-2xl wrapper #}

    <main class="bg-dark-800 text-gray-100 min-h-screen">
      <div class="max-w-screen-2xl mx-auto px-4 py-4">
        {% block content %}{% endblock %}
      </div>
    </main>

    {% block footer %}{% endblock %}
    {% block scripts %}{% endblock %}
</body>
</html>
