{#
  Coffee House Shared Navbar Component.

  Expected context variables:
    - app_name: str (e.g. "Auth", "CHQR", "Beany KMS", "Digi")
    - user: dict|None (JWT payload with .name, .apps, .sub)
    - auth_service_url: str (e.g. "https://auth.coffeehouse.tools")
    - nav_links: list[dict] (optional) — [{href, label, active?}]
    - request: Request object

  Below the `lg` breakpoint the centre links are hidden, so the same
  `nav_links` also render in a menu behind a button at the start of the bar.
  The button is a focusable div (DaisyUI's focus dropdown; Safari does not
  focus a real <button> on click, so a <button> would never open it). It is
  not an `a.btn-ghost`: brand scripts treat the first `.navbar-start
  a.btn-ghost` as the logo link. Escape closes it via /ui/js/dropdown.js.
#}{% from "macros/i18n.html" import ch_t %}
<div class="navbar bg-base-100 shadow-sm sticky top-0 z-30">
    <div class="navbar-start">
        {# Mobile hamburger — only shown if sidebar layout uses this #}
        {% block navbar_start_mobile %}{% endblock %}

        {# Navbar-only layout: the nav links below lg #}
        {% if nav_links is defined and nav_links %}
        <div class="dropdown lg:hidden" data-ch-nav-menu>
            <div tabindex="0" role="button" class="btn btn-ghost btn-square btn-sm" aria-label="{{ ch_t('Open navigation menu') }}" aria-haspopup="menu">
                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box shadow p-2 w-56 z-50 border border-base-200" aria-label="{{ ch_t('Navigation') }}">
                {% for link in nav_links %}
                <li><a href="{{ link.href }}" class="{% if link.active is defined and link.active %}active{% endif %}"{% if link.active is defined and link.active %} aria-current="page"{% endif %}>{{ link.label }}</a></li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}

        {# Logo + App name #}
        <a href="/" class="btn btn-ghost gap-2 text-lg font-semibold">
            <svg class="w-6 h-6" 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(ch_t("App")) }}
        </a>
    </div>

    {# Center: horizontal nav links (navbar-only layout) #}
    {% if nav_links is defined and nav_links %}
    <div class="navbar-center hidden lg:flex">
        <ul class="menu menu-horizontal px-1 gap-1">
            {% for link in nav_links %}
            <li><a href="{{ link.href }}" class="{% if link.active is defined and link.active %}active{% endif %}">{{ link.label }}</a></li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}

    <div class="navbar-end gap-1">
        {% block navbar_extra %}{% endblock %}

        {# Dark mode toggle #}
        <button id="ch-theme-toggle" class="btn btn-ghost btn-circle btn-sm" aria-label="{{ ch_t('Toggle dark mode') }}">
            {# Sun icon (shown in dark mode → click to go light) #}
            <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>
            {# Moon icon (shown in light mode → click to go dark) #}
            <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 (avatar/name → Change password + Logout).
           Falls back to same-origin Auth when `auth_service_url` is unset (Auth
           itself) or points at another app's domain (consumer apps). #}
        {% 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="{{ ch_t('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 ch_t('User') }}</span>
                <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>
                        {{ ch_t("Change password") }}
                    </a>
                </li>{% if i18n_switch_url is defined and i18n_switch_url %}
                <li>
                    <a href="{{ i18n_switch_url }}?next={{ request.url | string | urlencode }}" lang="{% if ch_i18n.locale == 'hy' %}en{% else %}hy{% endif %}" class="min-h-11 lg:min-h-0">
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="m5 8 6 6M4 14l6-6 2-3M2 5h12M7 2h1M22 22l-5-10-5 10M14 18h6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        {% if ch_i18n.locale == 'hy' %}English{% else %}Հայերեն{% endif %}
                    </a>
                </li>{% endif %}
                <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>
                        {{ ch_t("Logout") }}
                    </a>
                </li>
            </ul>
        </div>
        {% endif %}
    </div>
</div>