{{-- Server Listing - TailServer Theme --}}
<div class="flex flex-col flex-1" style="min-height: calc(100vh - 30rem);">
    {{-- Page Header --}}
    <x-proxmox::ui.section-header 
        title="Servers" 
        icon="ri-server-line"
        subtitle="Manage your virtual private servers"
    />

    {{-- Server Cards Grid --}}
    <div class="flex flex-col gap-4 flex-1 mt-4">
        @forelse($servers as $server)
            <livewire:proxmox.server :server="$server" wire:key="proxmox-server-{{ $server->id }}" lazy />
        @empty
            <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"
            />
        @endforelse
    </div>
</div>