{% extends "conjunto/base.html" %}
{% load static i18n statici18n conjunto avatar %}
{% comment %}
  Full application layout: topbar + sidebar + scrollable canvas +
  statusbar + two offcanvas panels.

  This is the template to extend for regular in-app pages. It preserves
  all historical block names that used to live in ``conjunto/base.html``
  (top_bar, sidebar, canvas, page_*, content, footer, statusbar,
  offcanvas_*). Projects that previously extended ``conjunto/base.html``
  for the app layout should switch to this template.
{% endcomment %}

{% block body_attrs %}
    data-default-sidebar-width="{{ cj_layout.sidebar_width }}"
    data-sidebar-width-url="{% url 'conjunto:sidebar-width' %}"
    style="--cj-sidebar-width: {{ cj_layout.sidebar_width }}; --cj-navbar-height: 3.5rem; --cj-statusbar-height: 2.5rem;"
{% endblock %}

{% block body %}

{# ── Topbar ─────────────────────────────────────────────────────────────── #}
{% block top_bar %}
<header id="cj-topbar"
        class="navbar d-print-none {% if cj_layout.topbar_fixed %}fixed-top{% else %}sticky-top{% endif %}"
        style="height: var(--cj-navbar-height);">
    <div class="{% if cj_layout.style == 'fluid' %}container-fluid{% else %}container-xl{% endif %} gap-2">

        {# Sidebar toggle — always visible, also on mobile #}
        {% block sidebar_toggle %}
        <button class="btn btn-ghost-secondary btn-icon flex-shrink-0"
                type="button"
                id="cj-sidebar-toggle"
                aria-label="{% trans 'Toggle sidebar' %}"
                onclick="cjToggleSidebar()">
            <i class="ti ti-menu-2 fs-4"></i>
        </button>
        {% endblock %}

        {# Brand #}
        {% block top_bar_brand %}
        <a href="/" class="navbar-brand navbar-brand-autodark me-0">
            <img src="{% static 'brand.svg' %}" height="32" alt="{{ site.name|default:globals.project_title }}"
                 class="navbar-brand-image"
                 onerror="this.style.display='none'; this.nextElementSibling.style.display='inline';">
            <span style="display:none;">{{ site.name|default:globals.project_title }}</span>
        </a>
        {% endblock %}

        {# Center: horizontal top-bar menu (menus.main) #}
        {% block top_bar_center %}
        {% if menus.main %}
        <nav class="navbar-nav flex-row d-none d-md-flex me-auto gap-1">
            {% for item in menus.main %}{% if item.visible %}
            <div class="nav-item{% if item.has_children %} dropdown{% endif %}">
                {% if item.has_children %}
                <a class="nav-link dropdown-toggle" href="#"
                   data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                    {% if item.get_icon %}<i class="ti ti-{{ item.get_icon }} me-1"></i>{% endif %}
                    <span class="nav-link-title">{{ item.get_title }}</span>
                </a>
                <div class="dropdown-menu">
                    {% for child in item.children %}{% if child.visible %}
                    <a class="dropdown-item{% if child.selected %} active{% endif %}" href="{{ child.url }}">
                        {% if child.get_icon %}<i class="ti ti-{{ child.get_icon }} me-2"></i>{% endif %}
                        {{ child.get_title }}
                        {% if child.badge %}<span class="badge {{ child.badge_class|default:'badge-sm bg-red ms-auto' }}">{{ child.badge }}</span>{% endif %}
                    </a>
                    {% if child.separator_after %}<div class="dropdown-divider"></div>{% endif %}
                    {% endif %}{% endfor %}
                </div>
                {% else %}
                <a class="nav-link{% if item.selected %} active{% endif %}" href="{{ item.url }}">
                    {% if item.get_icon %}<i class="ti ti-{{ item.get_icon }} me-1"></i>{% endif %}
                    <span class="nav-link-title">{{ item.get_title }}</span>
                    {% if item.badge %}<span class="badge {{ item.badge_class|default:'badge-sm bg-red' }}">{{ item.badge }}</span>{% endif %}
                </a>
                {% endif %}
            </div>
            {% endif %}{% endfor %}
        </nav>
        {% else %}
        <span class="me-auto"></span>
        {% endif %}
        {% endblock %}

        {# Page-level action buttons (child templates inject here, e.g. offcanvas triggers) #}
        {% block top_bar_actions %}{% endblock %}

        {# Right side: theme toggle + user menu #}
        {% block top_bar_right %}
        <div class="navbar-nav flex-row gap-1 align-items-center ms-auto">
            {% if cj_layout.theme_switcher %}
                {% include "conjunto/includes/theme_toggle.html" %}
            {% endif %}

            {% if user.is_authenticated %}
            <div class="nav-item dropdown">
                <a href="#" class="nav-link d-flex lh-1 text-reset p-0 gap-2"
                   data-bs-toggle="dropdown" aria-label="{% trans 'Open user menu' %}">
                    {% avatar user size="sm" %}
                    <div class="d-none d-xl-block lh-sm">
                        <div class="fw-medium small">{{ user.get_full_name|default:user.username }}</div>
                        {% if user.email %}<div class="text-muted" style="font-size:.7rem;">{{ user.email }}</div>{% endif %}
                    </div>
                </a>
                <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                    {% for item in menus.user %}{% if item.visible %}
                    {% if item.separator_before %}<div class="dropdown-divider"></div>{% endif %}
                    <a href="{{ item.url }}" class="dropdown-item{% if item.selected %} active{% endif %}">
                        {% if item.get_icon %}<i class="ti ti-{{ item.get_icon }} me-2"></i>{% endif %}
                        {{ item.get_title }}
                    </a>
                    {% if item.separator_after %}<div class="dropdown-divider"></div>{% endif %}
                    {% endif %}{% endfor %}
                    <div class="dropdown-divider"></div>
                    <form method="post" action="{% url 'logout' %}">
                        {% csrf_token %}
                        <button type="submit" class="dropdown-item">
                            <i class="ti ti-logout me-2"></i>{% trans "Logout" %}
                        </button>
                    </form>
                </div>
            </div>
            {% else %}
            <div class="nav-item">
                <a href="{% url 'login' %}" class="nav-link">{% trans "Login" %}</a>
            </div>
            {% endif %}
        </div>
        {% endblock %}

    </div>
</header>
{% endblock %}

{# ── Sidebar ─────────────────────────────────────────────────────────────── #}
{% block sidebar %}
{% include "conjunto/includes/sidebar.html" %}
{% endblock %}

{# ── Page content (canvas) ───────────────────────────────────────────────── #}
<div class="cj-page-content">
{% block canvas %}
    {# Page header #}
    {% block page_header %}
    <div class="page-header d-print-none">
        <div class="{% if cj_layout.style == 'fluid' %}container-fluid{% else %}container-xl{% endif %}">
            <div class="row g-2 align-items-center">
                <div class="col">
                    {% block page_pretitle_wrapper %}
                    <div class="page-pretitle">{% block page_pretitle %}{% endblock %}</div>
                    {% endblock %}
                    <h2 class="page-title">
                        {% block page_title_prefix %}{% endblock %}
                        {% block page_title %}{% endblock %}
                    </h2>
                    <div class="text-secondary">
                        {% block page_subtitle %}{% endblock %}
                    </div>
                </div>
                <div class="col-auto ms-auto d-print-none mt-3">
                    <div class="btn-list">{% block page_actions %}{% endblock %}</div>
                </div>
            </div>
        </div>
    </div>
    {% endblock %}

    {# Messages are rendered as toasts via the toasts block below. #}
    {% block messages %}{% endblock %}

    {# Main content #}
    <div class="page-body">
        <div class="{% if cj_layout.style == 'fluid' %}container-fluid{% else %}container-xl{% endif %}">
            {% block content %}{% endblock %}
        </div>
    </div>
{% endblock canvas %}
</div>{# /.cj-page-content #}

{# ── Statusbar / Footer (fixed bottom) ──────────────────────────────────── #}
{% block footer %}
<footer id="cj-statusbar" class="cj-statusbar d-print-none">
    {% block statusbar %}
    {% include "conjunto/includes/footer.html" %}
    {% endblock %}
</footer>
{% endblock %}

{# ── Offcanvas Left ──────────────────────────────────────────────────────── #}
<div class="offcanvas offcanvas-start" tabindex="-1"
     id="cj-offcanvas-left" aria-labelledby="cj-offcanvas-left-label">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="cj-offcanvas-left-label"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="{% trans 'Close' %}"></button>
    </div>
    <div class="offcanvas-body">
        {% block offcanvas_left %}{% endblock %}
    </div>
</div>

{# ── Offcanvas Right ─────────────────────────────────────────────────────── #}
<div class="offcanvas offcanvas-end" tabindex="-1"
     id="cj-offcanvas-right" aria-labelledby="cj-offcanvas-right-label">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="cj-offcanvas-right-label"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="{% trans 'Close' %}"></button>
    </div>
    <div class="offcanvas-body">
        {% block offcanvas_right %}{% endblock %}
    </div>
</div>

{% endblock body %}

{% block app_scripts %}
{{ block.super }}
{% conjunto_app_scripts %}
{% endblock %}