{{-- resources/views/livewire/online-users-list.blade.php --}}
<div class="online-users-list" wire:poll.{{ $refreshInterval }}s="loadOnlineUsers">
    @if($showCount)
        <div class="flex items-center space-x-2 text-sm text-theme-secondary dark:text-theme-muted mb-3">
            <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
            <span class="font-medium">{{ count($onlineUsers) }} online</span>
        </div>
    @endif

    <div class="space-y-2">
        @forelse($onlineUsers as $user)
            <div class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-theme-secondary transition-colors">
                @if($showAvatars)
                    <div class="relative flex-shrink-0">
                        @if(isset($user['avatar']) && $user['avatar'])
                            <img src="{{ $user['avatar'] }}" alt="{{ $user['name'] }}"
                                 class="w-8 h-8 rounded-full object-cover">
                        @else
                            <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white text-sm font-medium">
                                {{ substr($user['name'], 0, 1) }}
                            </div>
                        @endif
                        <div class="absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 border-2 border-theme-background dark:border-theme-secondary rounded-full"></div>
                    </div>
                @endif

                <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-theme-primary dark:text-white truncate">
                        {{ $user['name'] }}
                    </p>
                    <p class="text-xs text-theme-muted dark:text-theme-muted">
                        {{ isset($user['last_seen']) ? \Carbon\Carbon::parse($user['last_seen'])->diffForHumans() : 'Now' }}
                    </p>
                </div>
            </div>
        @empty
            <div class="text-center py-4 text-theme-muted dark:text-theme-muted">
                <div class="w-8 h-8 mx-auto mb-2 text-theme-muted">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-2.776M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                    </svg>
                </div>
                <p class="text-sm">No users online</p>
            </div>
        @endforelse
    </div>
</div>