<div class="space-y-2">
    @forelse ($sessions as $session)
        <div class="flex items-center justify-between gap-3 rounded-lg border p-3 text-sm">
            <div class="min-w-0">
                <p class="font-medium">
                    {{ $session['ip_address'] ?? 'Unknown IP' }}
                    @if ($session['is_current'])
                        <span class="ml-2 rounded bg-success-100 px-1.5 py-0.5 text-xs font-medium text-success-700 dark:bg-success-500/20 dark:text-success-400">
                            This device
                        </span>
                    @endif
                </p>
                <p class="truncate text-xs text-gray-500 dark:text-gray-400">
                    {{ Str::limit($session['user_agent'] ?? 'Unknown device', 80) }} &middot; active {{ $session['last_active'] }}
                </p>
            </div>
            @unless ($session['is_current'])
                <button
                    type="button"
                    wire:click="killSession('{{ $session['id'] }}')"
                    wire:confirm="Log out this session?"
                    class="shrink-0 text-xs font-medium text-danger-600 hover:underline dark:text-danger-400"
                >
                    Log out
                </button>
            @endunless
        </div>
    @empty
        <p class="text-sm text-gray-500 dark:text-gray-400">No active sessions.</p>
    @endforelse
</div>
