{% if not _htmx_partial | default(false) %}
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}{% if page_title %}{{ page_title }} — {{ app_name | default("App") }}{% else %}{{ app_name | default("App") }}{% endif %}{% endblock %}</title>
  <link rel="icon" href="{{ _favicon | default('/static/assets/dazzle-favicon.svg') }}" type="image/svg+xml">

  {# Inter font #}
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

  {# CSS Cascade Layer order — defines priority: base < framework < app < overrides #}
  <style>@layer base, framework, app, overrides;</style>

  {# Tailwind CSS + DaisyUI — compiled bundle replaces both CDNs (#377) #}
  {% if _tailwind_bundled | default(false) %}
  <link rel="stylesheet" href="{{ 'css/dazzle-bundle.css' | static_url }}">
  {% else %}
  <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.14/dist/full.min.css" rel="stylesheet" type="text/css" />
  <script src="https://cdn.tailwindcss.com"></script>
  {% endif %}

  {% set _cdn_base = "https://cdn.jsdelivr.net/gh/manwithacat/dazzle@v" ~ _dazzle_version ~ "/dist" %}
  {% if _use_cdn | default(false) %}
  {# Dazzle framework CSS + JS — jsDelivr CDN #}
  <link rel="stylesheet" href="{{ _cdn_base }}/dazzle.min.css">
  <script defer src="{{ _cdn_base }}/dazzle.min.js"></script>
  {% else %}
  {# HTMX + extensions (vendored) #}
  <script src="{{ 'vendor/htmx.min.js' | static_url }}"></script>
  <script src="{{ 'vendor/htmx-ext-json-enc.js' | static_url }}"></script>
  <script src="{{ 'vendor/idiomorph-ext.min.js' | static_url }}"></script>
  <script src="{{ 'vendor/htmx-ext-preload.js' | static_url }}"></script>
  <script src="{{ 'vendor/htmx-ext-response-targets.js' | static_url }}"></script>
  <script src="{{ 'vendor/htmx-ext-loading-states.js' | static_url }}"></script>
  <script src="{{ 'vendor/htmx-ext-sse.js' | static_url }}"></script>
  {# Alpine.js + plugins #}
  <script defer src="{{ 'vendor/sortable.min.js' | static_url }}"></script>
  <script defer src="{{ 'vendor/alpine-sort.min.js' | static_url }}"></script>
  <script defer src="{{ 'vendor/alpine-persist.min.js' | static_url }}"></script>
  <script defer src="{{ 'js/dz-alpine.js' | static_url }}"></script>
  <script defer src="{{ 'js/workspace-editor.js' | static_url }}"></script>
  <script defer src="{{ 'vendor/alpine.min.js' | static_url }}"></script>
  {# Dazzle framework CSS (local — framework layer via @import) #}
  <link rel="stylesheet" href="{{ 'css/dazzle-framework.css' | static_url }}">
  <script defer src="{{ 'js/dz-a11y.js' | static_url }}"></script>
  <script defer src="{{ 'js/dz-islands.js' | static_url }}"></script>
  {% endif %}

  {# CSRF token injection for HTMX requests (v1.0.0) #}
  <script>
  document.addEventListener('htmx:configRequest', function(e) {
    var cookie = document.cookie.split('; ').find(function(c) { return c.startsWith('dazzle_csrf='); });
    if (cookie) {
      e.detail.headers['X-CSRF-Token'] = cookie.split('=')[1];
    }
  });
  </script>

  {# Lucide icons (v0.38.0: nav group icons) #}
  {% if not _use_cdn | default(false) %}
  <script defer src="{{ 'vendor/lucide.min.js' | static_url }}"></script>
  {% else %}
  <script defer src="{{ _cdn_base }}/dazzle-icons.min.js"
          onerror="this.onerror=null;this.src='{{ 'vendor/lucide.min.js' | static_url }}'"></script>
  {% endif %}

  {# Design token CSS custom properties #}
  <style>
    :root {
      {% if design_tokens %}
      {% for key, value in design_tokens.items() %}
      --dz-{{ key }}: {{ value }};
      {% endfor %}
      {% else %}
      --dz-primary: #3b82f6;
      --dz-secondary: #6c757d;
      --dz-success: #28a745;
      --dz-danger: #dc3545;
      --dz-warning: #ffc107;
      --dz-space-xs: 0.25rem;
      --dz-space-sm: 0.5rem;
      --dz-space-md: 1rem;
      --dz-space-lg: 1.5rem;
      --dz-space-xl: 2rem;
      --dz-radius: 0.25rem;
      {% endif %}
    }
  </style>

  {% block head_extra %}{% endblock %}
</head>
{% endif %}
<body class="min-h-screen bg-base-200" style="font-family: var(--font-sans)" hx-boost="true" hx-ext="morph,preload,response-targets,loading-states">
  {% block body %}
  {% endblock %}

  {# Toast notifications — Alpine dzToast component #}
  <div id="dz-toast" class="toast toast-end toast-top" aria-live="polite"
       x-data="dzToast">
    <template x-for="t in toasts" :key="t.id">
      <div :class="'alert alert-' + t.type + (t.leaving ? ' dz-toast-leave' : '')"
           @click="dismiss(t.id)">
        <span x-text="t.message"></span>
      </div>
    </template>
  </div>

  {# Screen-reader page announcer for hx-boost navigation #}
  <div id="dz-page-announcer" aria-live="assertive" aria-atomic="true" class="sr-only"></div>

  {# Server-rendered user preferences for client-side access (v0.38.0) #}
  {% if user_preferences %}
  <script type="application/json" id="dz-user-prefs">{{ user_preferences | tojson }}</script>
  {% endif %}

  {# Feedback widget — injected when feedback_widget is enabled in DSL #}
  {% if _feedback_widget_enabled | default(false) %}
  <link rel="stylesheet" href="{{ 'css/feedback-widget.css' | static_url }}">
  <script src="{{ 'js/feedback-widget.js' | static_url }}"></script>
  <script>
    document.body.dataset.userRole = "{{ user_roles[0]|replace('role_', '') if user_roles else '' }}";
    document.body.dataset.userEmail = "{{ user_email | default('') }}";
  </script>
  {% endif %}

  {% block scripts_extra %}{% endblock %}
</body>
{% if not _htmx_partial | default(false) %}
</html>
{% endif %}
