{{-- Server Listing - TailServer Theme --}}
<div class="flex flex-col flex-1" 
     style="min-height: calc(100vh - 30rem);"
     x-data="{ pageLoaded: false }"
     x-init="setTimeout(() => pageLoaded = true, 50)">
    {{-- Page Header --}}
    <div :class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'"
         class="transition-all duration-500 ease-out">
        <x-proxmox::ui.section-header 
            title="Servers" 
            icon="ri-server-line"
            subtitle="Manage your virtual private servers"
        />
    </div>

    {{-- Server Cards Grid --}}
    <div class="flex flex-col gap-4 flex-1 mt-4"
         :class="pageLoaded ? 'opacity-100' : 'opacity-0'"
         style="transition: opacity 0.5s ease-out 0.15s;">
        @forelse($servers as $index => $server)
            <div class="transform transition-all duration-500 ease-out"
                 :class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'"
                 :style="'transition-delay: {{ ($index + 1) * 100 }}ms'">
                <livewire:proxmox.server :server="$server" wire:key="proxmox-server-{{ $server->id }}" lazy />
            </div>
        @empty
            <div :class="pageLoaded ? 'opacity-100 scale-100' : 'opacity-0 scale-95'"
                 class="transition-all duration-500 ease-out delay-200">
                <x-proxmox::ui.empty-state 
                    title="No Servers Found"
                    description="You don't have any servers yet. Purchase a server to get started."
                    icon="ri-server-line"
                />
            </div>
        @endforelse
    </div>
</div>