{#
  Coffee House Shared Sidebar (Drawer) Layout.
  Used by apps with deep navigation (Beany/KMS, Digi).

  This replaces the {% block layout %} in ui_base.html.
  Apps using sidebar should extend ui_base.html and override layout block.

  Expected context:
    - app_name: str
    - user: dict|None
    - auth_service_url: str
    - request: Request
    - sidebar_brand_subtitle: str (optional, e.g. "Knowledge Management")
#}
<div class="drawer lg:drawer-open">
    <input id="ch-drawer" type="checkbox" class="drawer-toggle">
    <div class="drawer-content flex flex-col min-h-screen">
        {# Navbar with hamburger for mobile #}
        <div class="navbar bg-base-100 shadow-sm sticky top-0 z-30">
            <div class="navbar-start">
                <label for="ch-drawer" class="btn btn-ghost btn-square lg:hidden" aria-label="Menu">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" /></svg>
                </label>
                <a href="/" class="btn btn-ghost gap-2 text-lg font-semibold lg:hidden">
                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M18 8h1a4 4 0 010 8h-1M2 8h16v9a4 4 0 01-4 4H6a4 4 0 01-4-4V8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M6 1v3M10 1v3M14 1v3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    {{ app_name | default("App") }}
                </a>
                <div class="hidden lg:block"></div>
            </div>
            <div class="navbar-end gap-1">
                {% block sidebar_navbar_extra %}{% endblock %}

                {# Dark mode toggle #}
                <button id="ch-theme-toggle" class="btn btn-ghost btn-circle btn-sm" aria-label="Toggle dark mode">
                    <svg class="ch-icon-sun h-5 w-5" style="display:none" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                    </svg>
                    <svg class="ch-icon-moon h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                    </svg>
                </button>

                {# App switcher #}
                {% if user is defined and user and user.apps is defined %}
                {% include "components/app_switcher.html" %}
                {% endif %}

                {# User menu dropdown (matches navbar.html) — Change password + Logout.
                   Uses auth_service_url so the change-password link resolves to
                   same-origin Auth in the Auth app and cross-domain
                   https://auth.coffeehouse.tools/me/change-password in every
                   consumer that extends ui_base.html. #}
                {% if user is defined and user %}
                {% set _auth_base = auth_service_url | default('', true) %}
                <div class="dropdown dropdown-end pl-2">
                    <label tabindex="0" class="btn btn-ghost btn-sm gap-1" aria-label="User menu">
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <span class="hidden sm:inline">{{ user.name or user.sub or 'User' }}</span>
                        {% if user.role is defined and user.role %}
                        <span class="badge badge-ghost badge-sm hidden sm:inline">{{ user.role }}</span>
                        {% endif %}
                        <svg class="w-3 h-3 opacity-60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M19 9l-7 7-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </label>
                    <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box shadow p-2 w-56 z-50 border border-base-200">
                        <li class="menu-title"><span class="text-xs">{{ user.sub or '' }}</span></li>
                        <li>
                            <a href="{{ _auth_base }}/me/change-password?next={{ request.url | string | urlencode }}">
                                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                                Change password
                            </a>
                        </li>
                        <li>
                            <a href="{{ _auth_base }}/logout">
                                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                                Logout
                            </a>
                        </li>
                    </ul>
                </div>
                {% endif %}
            </div>
        </div>

        {# Main content area #}
        {% block breadcrumbs %}{% endblock %}
        <main id="main-content" class="flex-1 p-4 lg:p-6 ch-fade-in">
            {% include "components/flash.html" %}
            {% block content %}{% endblock %}
        </main>
    </div>

    {# Sidebar drawer #}
    <div class="drawer-side z-40">
        <label for="ch-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
        <aside class="bg-base-100 min-h-full w-64 p-4 flex flex-col">
            {# Brand block #}
            <div class="ch-sidebar-brand">
                <a href="/" class="block py-3 no-underline">
                    <div class="flex items-center gap-2">
                        <svg class="w-6 h-6 text-primary" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M18 8h1a4 4 0 010 8h-1M2 8h16v9a4 4 0 01-4 4H6a4 4 0 01-4-4V8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M6 1v3M10 1v3M14 1v3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <div>
                            <div class="font-bold text-lg">{{ app_name | default("App") }}</div>
                            {% if sidebar_brand_subtitle is defined and sidebar_brand_subtitle %}
                            <div class="text-xs text-base-content/60">{{ sidebar_brand_subtitle }}</div>
                            {% endif %}
                        </div>
                    </div>
                </a>
            </div>

            {# Navigation — provided by the app #}
            <nav class="flex-1 overflow-y-auto py-2" aria-label="Sidebar navigation">
                {% block sidebar_nav %}{% endblock %}
            </nav>

            {# User block at bottom of the drawer #}
            {% if user is defined and user %}
            {% set _auth_base = auth_service_url | default('', true) %}
            <div class="ch-sidebar-user">
                <div class="text-sm font-medium truncate">{{ user.name or 'User' }}</div>
                <div class="flex flex-wrap items-center gap-x-3 gap-y-1 mt-1">
                    {% if user.role is defined and user.role %}
                    <span class="badge badge-ghost badge-sm">{{ user.role }}</span>
                    {% endif %}
                    <a href="{{ _auth_base }}/me/change-password?next={{ request.url | string | urlencode }}" class="text-xs link link-hover">Change password</a>
                    <a href="{{ _auth_base }}/logout" class="text-xs link link-hover">Logout</a>
                </div>
            </div>
            {% endif %}
        </aside>
    </div>
</div>