@props(['active' => 'dispositivos'])
<aside class="fixed inset-y-0 left-0 w-64 bg-slate-900 dark:bg-dark-sidebar border-r border-slate-800 dark:border-dark-border z-40 transition-colors duration-300">
    <div class="flex flex-col h-full">
        <div class="p-6 flex items-center gap-3">
            <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center text-white shadow-lg shadow-primary/20">
                <span class="material-symbols-outlined text-2xl">memory</span>
            </div>
            <div>
                <h1 class="text-white font-bold text-lg leading-tight">IoT Admin</h1>
                <p class="text-slate-400 dark:text-muted-gray text-xs font-medium uppercase tracking-wider">Enterprise SaaS</p>
            </div>
        </div>
        
        <nav class="flex-1 px-4 mt-4 space-y-1">
            <a class="{{ $active === 'dispositivos' ? 'flex items-center gap-3 px-3 py-2.5 rounded-lg bg-primary/10 text-primary border border-primary/20' : 'flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-slate-800 dark:hover:bg-white/5 transition-colors group' }}" href="{{ route('dispositivos.index')}}">
                <span class="material-symbols-outlined {{ $active === 'dispositivos' ? '' : 'text-slate-400 group-hover:text-primary' }}">developer_board</span>
                <span class="text-sm {{ $active === 'dispositivos' ? 'font-bold' : 'font-medium text-slate-300 dark:text-muted-gray' }}">Dispositivos</span>
            </a>
            <a class="{{ $active === 'empresas' ? 'flex items-center gap-3 px-3 py-2.5 rounded-lg bg-primary/10 text-primary border border-primary/20' : 'flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-slate-800 dark:hover:bg-white/5 transition-colors group' }}" href="{{ route('empresas.index') }}">
                <span class="material-symbols-outlined {{ $active === 'empresas' ? '' : 'text-slate-400 group-hover:text-primary' }}">corporate_fare</span>
                <span class="text-sm {{ $active === 'empresas' ? 'font-bold' : 'font-medium text-slate-300 dark:text-muted-gray' }}">Empresas</span>
            </a>
        </nav>
        
        <div class="p-4 mt-auto border-t border-slate-800 dark:border-dark-border flex flex-col gap-3">
            <button id="theme-toggle-btn" class="w-full flex items-center gap-3 px-4 py-2.5 rounded-lg bg-yellow-500/10 dark:bg-dark-card border border-yellow-500/20 dark:border-dark-border hover:bg-yellow-500/20 dark:hover:bg-white/5 transition-colors group">
                <span id="theme-icon" class="material-symbols-outlined text-yellow-500 dark:text-yellow-500 group-hover:scale-110 transition-transform">dark_mode</span>
                <span id="theme-text" class="text-sm font-medium text-yellow-500 dark:text-slate-300">Modo Oscuro</span>
            </button>
        </div>
    </div>
</aside>