<nav class="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 sticky top-0 z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex items-center gap-4">
                <a href="/" class="flex items-center gap-3 group">
                    <img src="/static/shopyo.svg" class="w-8 h-8 group-hover:rotate-12 transition-transform" alt="Shopyo Logo">
                    <div class="flex items-baseline gap-2">
                        <span class="font-black text-xl tracking-tight text-slate-900 dark:text-white uppercase">{{OUR_APP_NAME}}</span>
                        <span class="text-slate-400 dark:text-slate-600 font-bold text-[10px] uppercase tracking-[0.2em] border-l border-slate-200 dark:border-slate-800 pl-2">
                            {{ active_page|default('System')|capitalize }}
                        </span>
                    </div>
                </a>
            </div>

            <div class="flex items-center gap-2">
                <!-- Dashboard Link (Admin Only) -->
                {% if current_user.is_authenticated and current_user.is_admin %}
                <a href="{{url_for('shopyo_dashboard.index')}}"
                   class="p-2.5 text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-xl transition-all hover:text-primary group"
                   title="Go to Dashboard">
                    <i class="fas fa-th-large text-lg group-hover:scale-110 transition-transform"></i>
                </a>
                <div class="h-8 w-px bg-slate-100 dark:bg-slate-800 mx-1"></div>
                {% endif %}

                <!-- Dark Mode -->
                <button @click="darkMode = !darkMode; localStorage.setItem('darkMode', darkMode)"
                        class="p-2.5 text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-xl transition-all group">
                    <i class="fas" :class="darkMode ? 'fa-sun text-amber-500' : 'fa-moon'" class="text-lg group-hover:rotate-12 transition-transform"></i>
                </button>

                <!-- User Dropdown (Simplified) -->
                {% if current_user.is_authenticated %}
                    <div class="flex items-center gap-3 pl-2 ml-2 border-l border-slate-100 dark:border-slate-800">
                        <div class="hidden md:block text-right">
                            <p class="text-[10px] font-black text-slate-900 dark:text-white uppercase tracking-tighter leading-none">{{ current_user.username }}</p>
                            <a href="{{ url_for('shopyo_auth.logout') }}" class="text-[9px] font-bold text-red-500 hover:text-red-600 uppercase tracking-widest leading-none">Logout</a>
                        </div>
                        <div class="w-9 h-9 rounded-xl bg-primary/10 text-primary flex items-center justify-center font-black text-sm border border-primary/20 shadow-sm">
                            {{ current_user.username[0]|upper }}
                        </div>
                    </div>
                {% else %}
                    <div class="flex gap-2 ml-4">
                        <a href="{{url_for('shopyo_auth.login')}}" class="text-xs font-bold text-slate-600 dark:text-slate-400 hover:text-primary px-3 py-2 transition-colors">Login</a>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</nav>
