{#
 # ============================================================================
 # MOLECULE: SETTINGS NAV
 # ============================================================================
 #
 # Sidebar de navigation pour la section paramètres utilisateur.
 # Affiche le profil, les liens de navigation et la déconnexion.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre  | Type   | Défaut   | Description                            |
 # |------------|--------|----------|----------------------------------------|
 # | user       | User   | (requis) | Objet utilisateur courant              |
 # | activePage | string | ''       | Page active: settings/subscription/support |
 #
 # ============================================================================
 #}

{% set activePage = activePage ?? '' %}
{% set initials = (user.firstName ? user.firstName|slice(0,1) : '') ~ (user.lastName ? user.lastName|slice(0,1) : '') %}
{% if initials|length == 0 %}{% set initials = user.email|slice(0,1) %}{% endif %}
{% set unreadCount = support_unread_count_user() %}

{# Mobile : pill nav horizontal #}
<nav class="flex items-center gap-1 p-1 bg-gray-100 rounded-xl lg:hidden overflow-x-auto">
    <a href="{{ path('app_settings') }}"
       class="flex items-center gap-2 px-4 py-1.5 rounded-lg text-sm font-medium whitespace-nowrap transition-all
              {{ activePage == 'settings' ? 'bg-white shadow-sm text-gray-900' : 'text-gray-500 hover:text-gray-700' }}">
        Paramètres
    </a>
    <a href="{{ path('app_settings_subscription') }}"
       class="flex items-center gap-2 px-4 py-1.5 rounded-lg text-sm font-medium whitespace-nowrap transition-all
              {{ activePage == 'subscription' ? 'bg-white shadow-sm text-gray-900' : 'text-gray-500 hover:text-gray-700' }}">
        Abonnement
    </a>
    <a href="{{ path('app_settings_notifications') }}"
       class="flex items-center gap-2 px-4 py-1.5 rounded-lg text-sm font-medium whitespace-nowrap transition-all
              {{ activePage == 'notifications' ? 'bg-white shadow-sm text-gray-900' : 'text-gray-500 hover:text-gray-700' }}">
        Notifications
    </a>
    <a href="{{ path('app_settings_badges') }}"
       class="flex items-center gap-2 px-4 py-1.5 rounded-lg text-sm font-medium whitespace-nowrap transition-all
              {{ activePage == 'badges' ? 'bg-white shadow-sm text-gray-900' : 'text-gray-500 hover:text-gray-700' }}">
        Badges
    </a>
    <a href="{{ path('app_settings_referral') }}"
       class="flex items-center gap-2 px-4 py-1.5 rounded-lg text-sm font-medium whitespace-nowrap transition-all
              {{ activePage == 'referral' ? 'bg-white shadow-sm text-gray-900' : 'text-gray-500 hover:text-gray-700' }}">
        Parrainage
    </a>
    <a href="{{ path('app_support_index') }}"
       class="relative flex items-center gap-2 px-4 py-1.5 rounded-lg text-sm font-medium whitespace-nowrap transition-all
              {{ activePage == 'support' ? 'bg-white shadow-sm text-gray-900' : 'text-gray-500 hover:text-gray-700' }}">
        Support
        {% if unreadCount > 0 %}
            <span class="inline-flex items-center justify-center w-4 h-4 text-[10px] font-bold bg-primary text-white rounded-full">
                {{ unreadCount > 9 ? '9+' : unreadCount }}
            </span>
        {% endif %}
    </a>
    <a href="{{ path('app_logout') }}" data-turbo="false"
       class="ml-auto flex items-center gap-2 px-4 py-1.5 rounded-lg text-sm font-medium whitespace-nowrap transition-all text-gray-500 hover:text-gray-700">
        Déconnexion
    </a>
</nav>

{# Desktop : sidebar verticale #}
<aside class="hidden lg:flex flex-col w-56 flex-shrink-0">
    <div class="sticky top-8 bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">

        {# User card #}
        <div class="flex items-center gap-3 p-4 border-b border-gray-100">
            <div class="w-10 h-10 rounded-full bg-gradient-to-br from-gradient-start to-gradient-end flex items-center justify-center text-base font-bold text-white flex-shrink-0">
                {{ initials|upper }}
            </div>
            <div class="min-w-0">
                <p class="text-base font-semibold text-gray-900 truncate">{{ user.firstName }} {{ user.lastName }}</p>
                <p class="text-sm text-gray-400 truncate">{{ user.email }}</p>
            </div>
        </div>

        {# Nav items #}
        <div class="p-3">
            <p class="text-xs font-semibold uppercase tracking-widest text-gray-400 mb-1 px-3 pt-1 pb-1">Compte</p>

            <a href="{{ path('app_settings') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-base font-medium transition-all my-0.5
                      {{ activePage == 'settings'
                         ? 'bg-[linear-gradient(135deg,rgba(12,129,228,0.12)_0%,rgba(58,158,235,0.08)_100%)] text-primary-dark font-semibold'
                         : 'text-gray-600 hover:bg-[linear-gradient(135deg,rgba(12,129,228,0.08)_0%,rgba(58,158,235,0.05)_100%)] hover:text-primary-dark' }}">
                {% include '_atoms/icon/icon.html.twig' with { name: 'settings', size: 'md', color: 'primary' } only %}
                Paramètres
            </a>

            <a href="{{ path('app_settings_subscription') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-base font-medium transition-all my-0.5
                      {{ activePage == 'subscription'
                         ? 'bg-[linear-gradient(135deg,rgba(12,129,228,0.12)_0%,rgba(58,158,235,0.08)_100%)] text-primary-dark font-semibold'
                         : 'text-gray-600 hover:bg-[linear-gradient(135deg,rgba(12,129,228,0.08)_0%,rgba(58,158,235,0.05)_100%)] hover:text-primary-dark' }}">
                {% include '_atoms/icon/icon.html.twig' with { name: 'wallet', size: 'md', color: 'primary' } only %}
                Abonnement
            </a>

            <a href="{{ path('app_settings_notifications') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-base font-medium transition-all my-0.5
                      {{ activePage == 'notifications'
                         ? 'bg-[linear-gradient(135deg,rgba(12,129,228,0.12)_0%,rgba(58,158,235,0.08)_100%)] text-primary-dark font-semibold'
                         : 'text-gray-600 hover:bg-[linear-gradient(135deg,rgba(12,129,228,0.08)_0%,rgba(58,158,235,0.05)_100%)] hover:text-primary-dark' }}">
                {% include '_atoms/icon/icon.html.twig' with { name: 'bell', size: 'md', color: 'primary' } only %}
                Notifications
            </a>

            <a href="{{ path('app_settings_badges') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-base font-medium transition-all my-0.5
                      {{ activePage == 'badges'
                         ? 'bg-[linear-gradient(135deg,rgba(12,129,228,0.12)_0%,rgba(58,158,235,0.08)_100%)] text-primary-dark font-semibold'
                         : 'text-gray-600 hover:bg-[linear-gradient(135deg,rgba(12,129,228,0.08)_0%,rgba(58,158,235,0.05)_100%)] hover:text-primary-dark' }}">
                {% include '_atoms/icon/icon.html.twig' with { name: 'crown', size: 'md', color: 'primary' } only %}
                Badges
            </a>

            <a href="{{ path('app_settings_referral') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-base font-medium transition-all my-0.5
                      {{ activePage == 'referral'
                         ? 'bg-[linear-gradient(135deg,rgba(12,129,228,0.12)_0%,rgba(58,158,235,0.08)_100%)] text-primary-dark font-semibold'
                         : 'text-gray-600 hover:bg-[linear-gradient(135deg,rgba(12,129,228,0.08)_0%,rgba(58,158,235,0.05)_100%)] hover:text-primary-dark' }}">
                {% include '_atoms/icon/icon.html.twig' with { name: 'gift', size: 'md', color: 'primary' } only %}
                Parrainage
            </a>

            <a href="{{ path('app_support_index') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-base font-medium transition-all my-0.5
                      {{ activePage == 'support'
                         ? 'bg-[linear-gradient(135deg,rgba(12,129,228,0.12)_0%,rgba(58,158,235,0.08)_100%)] text-primary-dark font-semibold'
                         : 'text-gray-600 hover:bg-[linear-gradient(135deg,rgba(12,129,228,0.08)_0%,rgba(58,158,235,0.05)_100%)] hover:text-primary-dark' }}">
                {% include '_atoms/icon/icon.html.twig' with { name: 'message', size: 'md', color: 'primary' } only %}
                <span class="flex-1">Support</span>
                {% if unreadCount > 0 %}
                    <span class="inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1.5 text-xs font-bold bg-primary text-white rounded-full">
                        {{ unreadCount > 9 ? '9+' : unreadCount }}
                    </span>
                {% endif %}
            </a>
        </div>

        {# Déconnexion #}
        <div class="px-3 pb-3 border-t border-gray-100 pt-2 mt-1">
            <a href="{{ path('app_logout') }}" data-turbo="false"
               class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-base font-medium text-gray-500 transition-all
                      hover:bg-error/5 hover:text-error">
                {% include '_atoms/icon/icon.html.twig' with { name: 'exit', size: 'md', color: 'current' } only %}
                Déconnexion
            </a>
        </div>

    </div>
</aside>