{% extends "base.html" %}
{% load static %}
{% block html_class %}dashboard-shell{% endblock %}
{% block body %}
<style>
  /* Let document grow so the window scrolls */
  html.dashboard-shell,
  html.dashboard-shell body {
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }
  /* Breadcrumb bar — dark background, light text (same as old topbar crumbs) */
  #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">

  {% include "components/topnav.html" %}

  {# ── Breadcrumb sub-bar ──────────────────────────────────── #}
  {# Sticky beneath the sticky topnav (h-14 = 3.5rem) so users keep #}
  {# their navigation context when scrolling long pages. #}
  <div id="topnav-crumbs" class="sticky z-30 bg-ruforum-topbar" style="top: 3.5rem; 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 %}

      {% if user.is_authenticated and user.pending_admin_review %}
        <div class="mb-5 flex items-start gap-3 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900" role="status">
          <svg class="mt-0.5 h-4 w-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
          <div>
            <p class="font-semibold">Account under review</p>
            <p class="text-amber-900/80">Your account is awaiting administrator approval. You can browse the platform freely, but submission actions on grants, businesses, and course content are disabled until approval.</p>
          </div>
        </div>
      {% endif %}

      {% 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>

  {% if user.is_authenticated %}{% include "assistant/widget.html" %}{% endif %}
</div>
{% endblock %}

{% block extra_js %}
{{ block.super }}
<script src="{% static 'vendor/chart.umd.min.js' %}" defer></script>
<script src="{% static 'js/dashboard_charts.js' %}" defer></script>
{% if user.is_authenticated %}
<script src="{% static 'vendor/marked.min.js' %}" defer></script>
<script src="{% static 'vendor/purify.min.js' %}" defer></script>
<script src="{% static 'js/assistant.js' %}" defer></script>
{% endif %}
{% endblock %}