{% extends "base.html" %}
{% load static %}
{% block html_class %}dashboard-shell{% endblock %}
{% block body %}
<style>
  html.dashboard-shell,
  html.dashboard-shell body {
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }
  #topnav-crumbs { display:flex; align-items:center; min-width:0; }
  #topnav-crumbs nav { display:flex; align-items:center; gap:0.375rem; font-family:'Barlow',system-ui,sans-serif; font-size:0.75rem; white-space:nowrap; overflow:hidden; }
  #topnav-crumbs a { color:rgba(255,255,255,0.62); font-weight:500; text-decoration:none; transition:color 0.15s; }
  #topnav-crumbs a:hover { color:rgba(255,255,255,0.95); }
  #topnav-crumbs nav > span:last-child { color:#e8bb5a; font-weight:600; overflow:hidden; text-overflow:ellipsis; }
  #topnav-crumbs .crumb-sep { width:10px; height:10px; min-width:10px; flex-shrink:0; color:rgba(255,255,255,0.34); }
  /* Collapse the bar entirely on pages that don't define a breadcrumb nav,
     so the empty strip never shows below the topnav. */
  #topnav-crumbs:not(:has(nav)) { display:none; }
</style>

<div class="flex min-h-screen min-h-[100dvh] flex-col bg-ruforum-surface">

  {% comment %}
    Public pages serve both signed-in and anonymous visitors. Authenticated
    users get the full app chrome (their Dashboard + module nav); anonymous
    visitors get the marketing header (section nav + Create account) instead
    of the dashboard topnav, whose "Dashboard" link is a login-gated dead end
    for them and which hides the signup CTA.
  {% endcomment %}
  {% if user.is_authenticated %}
    {% include "components/topnav.html" %}
  {% else %}
    {% include "components/public_header.html" %}
  {% endif %}

  {# ── Breadcrumb sub-bar ────────────────────────────────── #}
  <div id="topnav-crumbs" class="bg-ruforum-topbar" style="border-bottom: 1px solid rgba(255,255,255,0.08);">
    <div class="mx-auto flex h-9 w-full max-w-7xl items-center px-6 text-white/70">
      {% block breadcrumbs %}{% endblock %}
    </div>
  </div>

  {# ── Main content ──────────────────────────────────────── #}
  <main id="main-content" tabindex="-1" class="w-full min-w-0 flex-1">
    <div class="mx-auto max-w-7xl px-6 pb-8 pt-5">
      {% block messages %}
        {% include "layouts/partials/dashboard_messages.html" %}
      {% endblock %}
      {% block content %}{% endblock %}
    </div>
  </main>

  <footer class="border-t border-ruforum-border bg-white/40 py-5 text-center font-meta text-xs text-ruforum-text-muted">
    &copy; {% now "Y" %} RUFORUM &middot; Integrated Information, Learning, and Management Platform
  </footer>

</div>
{% endblock %}