{% extends "base.html" %}

{# v0.62 CSS refactor: inline Tailwind → semantic .dz-layout-* classes
   (components/fragments.css). Top bar + main content + footer shell;
   centered max-w container at 64rem with responsive padding bump
   at lg+. #}

{% block body %}
<div class="dz-layout-shell">
  {# Top bar #}
  <div class="dz-layout-topbar">
    <div class="dz-layout-topbar-title">
      <span class="dz-layout-topbar-title-text">{{ app_name | default("Dazzle") }}</span>
    </div>
    <div class="dz-layout-topbar-nav">
      {% for nav_item in nav_items | default([]) %}
      <a href="{{ nav_item.route }}" class="dz-layout-nav-link"
         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="dz-layout-main" tabindex="-1">
    {% block content %}{% endblock %}
  </main>

  {# Footer #}
  <footer class="dz-layout-footer">
    <p>Powered by {{ app_name | default("Dazzle") }}</p>
  </footer>
</div>
{% endblock %}