{{-- Server Listing - Compact Layout --}}
<div class="flex flex-col flex-1" style="min-height: calc(100vh - 30rem);">
    {{-- Page Header --}}
    <div class="flex items-center justify-between mb-3">
        <div class="flex items-center gap-2">
            <div class="flex items-center justify-center w-8 h-8 rounded bg-blue-50 dark:bg-blue-900">
                <x-ri-server-line class="size-4 text-primary" />
            </div>
            <div>
                <h2 class="text-lg font-semibold">Servers</h2>
                <p class="text-xs text-gray-500 dark:text-gray-400">Manage your virtual private servers</p>
            </div>
        </div>
    </div>

    {{-- Server Cards Grid --}}
    <div class="flex flex-col gap-3 flex-1">
        @forelse($servers as $server)
            <livewire:proxmox.server :server="$server" wire:key="proxmox-server-{{ $server->id }}" lazy />
        @empty
            <div class="flex flex-col items-center justify-center text-center py-12 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-700 mb-3">
                    <x-ri-server-line class="size-6 text-gray-400" />
                </div>
                <h3 class="text-base font-semibold text-gray-700 dark:text-gray-300 mb-1">No Servers Found</h3>
                <p class="text-sm text-gray-500 dark:text-gray-400">You don't have any servers yet. Purchase a server to get started.</p>
            </div>
        @endforelse
    </div>
</div>