@props(['active' => false])

<aside class="sidebar flex flex-col justify-between h-screen w-[85vw] max-w-[280px] lg:w-64 bg-white border-r border-gray-100 shadow-sm transition-transform duration-200 shrink-0 overflow-hidden fixed inset-y-0 left-0 z-40 -translate-x-full lg:sticky lg:top-0 lg:translate-x-0" aria-label="Main navigation">
            <div class="px-5 py-6 flex items-center justify-between shrink-0">
            <img src="{{ asset('images/logo.png') }}" alt="GMO-Z.com RUNSYSTEM" class="h-4 lg:h-5 w-auto object-contain">
            <!-- Mobile hamburger button/close -->
            <button id="sidebar-close" type="button" class="lg:hidden w-9 h-9 flex items-center justify-center rounded-full text-gray-500 hover:bg-[#F3F5F9] active:scale-95 focus-visible:ring-2 focus-visible:ring-primary transition duration-200 cursor-pointer" aria-label="Đóng menu">
                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>

    <nav class="px-4 space-y-1.5 overflow-y-auto flex-1 pb-4">
        <!-- TABS CHUNG -->
        <x-sidebar-item href="{{ route('user.dashboard') }}" :active="request()->routeIs('user.dashboard')" icon="home">
            Trang chủ
        </x-sidebar-item>

        <x-sidebar-item href="{{ route('user.send') }}" :active="request()->routeIs('user.send')" icon="paper-plane-send">
            Gửi Thanks card
        </x-sidebar-item>

        <x-sidebar-item href="{{ route('user.received') }}" :active="request()->routeIs('user.received')" icon="heart">
            Thanks đã nhận
        </x-sidebar-item>

        <x-sidebar-item href="{{ route('user.sent') }}" :active="request()->routeIs('user.sent')" icon="paper-plane-outline">
            Thanks đã gửi
        </x-sidebar-item>

        @if(Auth::check() && Auth::user()->role == config('constants.ROLE_ADMIN'))
            <x-sidebar-item href="{{ route('user.ranking') }}" :active="request()->routeIs('user.ranking')" icon="trophy">
                Bảng xếp hạng
            </x-sidebar-item>
        @endif


        @if(Auth::check() && Auth::user()->role == config('constants.ROLE_ADMIN'))
            <x-sidebar-item href="{{ route('admin.users.index') }}" :active="request()->routeIs('admin.users.index')" icon="users">
                Quản lý User
            </x-sidebar-item>
        @endif

        <x-sidebar-item href="{{ route('user.edit') }}" :active="request()->routeIs('user.edit')" icon="gear">
            Cài đặt
        </x-sidebar-item>
    </nav>

    <!-- Illustration Box -->
    <div class="hidden xl:flex justify-center items-center px-6 py-2 mt-auto mb-6">
        <img src="{{ asset('images/sidebar_illustration.png') }}" class="w-full max-w-[200px] h-auto object-contain mix-blend-multiply" alt="Illustration" />
    </div>
</aside>
