{% extends "base.html" %}

{% block body %}
<div class="min-h-screen flex flex-col">
  {# Top bar #}
  <div class="navbar bg-[hsl(var(--card))] shadow-sm">
    <div class="flex-1">
      <span class="text-lg font-semibold">{{ app_name | default("Dazzle") }}</span>
    </div>
    <div class="flex-none gap-2">
      {% for nav_item in nav_items | default([]) %}
      <a href="{{ nav_item.route }}" class="inline-flex items-center h-8 px-3 rounded-[4px] text-[hsl(var(--muted-foreground))] text-[13px] font-medium hover:bg-[hsl(var(--muted))] hover:text-[hsl(var(--foreground))] transition-colors duration-[80ms]"
         hx-get="{{ nav_item.route }}"
         hx-target="#main-content"
         hx-swap="morph:innerHTML transition:true"
         hx-push-url="true"
         preload="mousedown"
         data-dazzle-nav="{{ nav_item.route }}">
        {{ nav_item.label }}
      </a>
      {% endfor %}
    </div>
  </div>

  {# Page content #}
  <main id="main-content" class="flex-1 container mx-auto p-4 lg:p-6 max-w-5xl" tabindex="-1">
    {% block content %}{% endblock %}
  </main>

  {# Footer #}
  <footer class="footer footer-center p-4 bg-[hsl(var(--card))] text-[hsl(var(--foreground))] border-t border-[hsl(var(--border))]">
    <p>Powered by {{ app_name | default("Dazzle") }}</p>
  </footer>
</div>
{% endblock %}