{% extends "conjunto/base.html" %}
{% load static i18n statici18n conjunto avatar gdaps %}
{% 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 %}
    class="antialiased cj-sidebar-left-mode-{{ cj_layout.sidebar_left_mode|default:'full' }} cj-sidebar-right-mode-{{ cj_layout.sidebar_right_mode|default:'collapsed' }}"
    data-default-sidebar-left-width="{{ cj_layout.sidebar_left_width }}"
    data-default-sidebar-right-width="{{ cj_layout.sidebar_right_width }}"
    data-sidebar-left-state-url="{% url 'conjunto:sidebar-state' 'left' %}"
    data-sidebar-right-state-url="{% url 'conjunto:sidebar-state' 'right' %}"
    {% if cj_layout.sidebar_left_mode_locked %}data-sidebar-left-mode-locked="1"{% endif %}
    {% if cj_layout.sidebar_right_mode_locked %}data-sidebar-right-mode-locked="1"{% endif %}
    style="--cj-sidebar-left-width: {{ cj_layout.sidebar_left_width }}; --cj-sidebar-left-mini-width: 3.5rem; --cj-sidebar-right-width: {{ cj_layout.sidebar_right_width }}; --cj-sidebar-right-mini-width: 3.5rem; --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">

        {# Left sidebar toggle — always visible, also on mobile #}
        {% block sidebar_left_toggle %}
        <button class="btn btn-ghost-secondary btn-icon flex-shrink-0"
                type="button"
                id="cj-sidebar-left-toggle"
                aria-label="{% trans 'Toggle left sidebar' %}"
                onclick="cjToggleSidebar('left')">
            {# CSS toggles which of the two icons is visible based on    #}
            {# ``body.cj-sidebar-left-mode-collapsed`` — no JS swap.     #}
            <i class="ti ti-layout-sidebar-left-collapse fs-2 cj-icon-when-expanded"></i>
            <i class="ti ti-layout-sidebar-left-expand fs-2 cj-icon-when-collapsed"></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 + notifications bell + 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 cj_layout.notifications and user.is_authenticated %}
                {% include "conjunto/notifications/_bell.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 %}

            {# Right sidebar toggle — placed last so it sits at the far right edge #}
            {% block sidebar_right_toggle %}
            <button class="btn btn-ghost-secondary btn-icon flex-shrink-0"
                    type="button"
                    id="cj-sidebar-right-toggle"
                    aria-label="{% trans 'Toggle right sidebar' %}"
                    onclick="cjToggleSidebar('right')">
                <i class="ti ti-layout-sidebar-right-collapse fs-2 cj-icon-when-expanded"></i>
                <i class="ti ti-layout-sidebar-right-expand fs-2 cj-icon-when-collapsed"></i>
            </button>
            {% endblock %}
        </div>
        {% endblock %}

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

{# ── Left sidebar ────────────────────────────────────────────────────────── #}
{# No ``hx-preserve`` — every hx-boost navigation must re-render the       #}
{# sidebar so the rail's active-state stays in sync with the current page. #}
{# Resize handle bindings are re-applied on ``htmx:load`` (idempotent via  #}
{# the ``data-resize-bound`` flag in ``conjunto.js``).                     #}
{% block sidebar_left %}
<aside id="cj-sidebar-left" class="cj-sidebar-left">
    {% block sidebar_left_content %}
    <ul class="navbar-nav cj-sidebar-nav" id="cj-sidebar-left-accordion">
        {% for item in menus.sidebar %}
            {% include "conjunto/includes/sidebar_item.html" with item=item %}
        {% endfor %}
    </ul>
    {% endblock %}
    <div id="cj-sidebar-left-resize" class="cj-sidebar-left-resize cj-sidebar-resize"
         data-side="left"></div>
</aside>
{% endblock %}

{# ── Right sidebar ───────────────────────────────────────────────────────── #}
{% block sidebar_right %}
<aside id="cj-sidebar-right" class="cj-sidebar-right">
    {% block sidebar_right_content %}
    <div class="cj-sidebar-right-stack">
        {% render_plugins "IRightSidebar" %}
    </div>
    {% endblock %}
    <div id="cj-sidebar-right-resize" class="cj-sidebar-right-resize cj-sidebar-resize"
         data-side="right"></div>
</aside>
{% endblock %}

{# ── Patient Summary Pane (medux-specific aside between sidebar and canvas) #}
{# Plugins / theme overrides fill this block via render_patient_summary_pane #}
{# or similar; the conjunto base ships only the placeholder. #}
{% block patient_summary_pane %}{% endblock %}

{# ── Page content (canvas) ───────────────────────────────────────────────── #}
<main id="main-content" class="cj-page-content" tabindex="-1">
{% 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 %}
                            {# This is for e.g. placing "BACK"-Links with ti-arrow-left in front of the title, etc. #}
                        {% endblock %}
                        <span class="page-title-icon">{% block page_title_icon %}{% endblock %}</span>
                        {% 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 %}{% block card %}{% endblock %}{% endblock %}
        </div>
    </div>
{% endblock canvas %}
</main>{# /#main-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>

{% comment %}
  Plugins implementing IPostLoginAction get a chance to render markup
  on every authenticated page load — typically a one-shot HTMX trigger
  that opens a modal (check-in prompt, consent reminder, …). Each
  implementation is responsible for gating its own visibility, usually
  via a session flag.
{% endcomment %}
{% if request.user.is_authenticated %}
    {% render_plugins "IPostLoginAction" %}
{% endif %}

{% endblock body %}

{% block app_scripts %}
{{ block.super }}
{% if cj_layout.shortcuts.enabled %}
{{ cj_layout.shortcuts.bindings|json_script:"cj-shortcut-bindings" }}
<script>window.cjShortcutsBindings = JSON.parse(document.getElementById("cj-shortcut-bindings").textContent);</script>
{% endif %}
{% conjunto_app_scripts %}
{% endblock %}