<div class="space-y-5">
    <div class="animate-rise">
        <h1 class="text-2xl font-bold tracking-tight text-ink">{{ __('admin.nav.instances') }}</h1>
        <p class="mt-1 text-sm text-muted">{{ __('admin.instances_sub') }}</p>
    </div>

    <div class="overflow-hidden rounded-lg border border-line bg-surface shadow-xs animate-rise [animation-delay:60ms]">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-line bg-surface-2 text-left text-xs font-semibold text-muted">
                        <th class="px-4 py-3 font-semibold">{{ __('admin.col.address') }}</th>
                        <th class="px-4 py-3 font-semibold">{{ __('admin.col.customer') }}</th>
                        <th class="px-4 py-3 font-semibold">{{ __('admin.col.host') }}</th>
                        <th class="px-4 py-3 font-semibold">VMID</th>
                        <th class="px-4 py-3 font-semibold">{{ __('admin.col.plan') }}</th>
                        <th class="px-4 py-3 font-semibold">{{ __('admin.col.quota') }}</th>
                        <th class="px-4 py-3 font-semibold">{{ __('admin.col.status') }}</th>
                        @if ($canRestart)
                            <th class="px-4 py-3 text-right font-semibold">{{ __('admin.col.actions') }}</th>
                        @endif
                    </tr>
                </thead>
                <tbody>
                    @forelse ($rows as $r)
                        <tr class="border-b border-line last:border-0 hover:bg-surface-hover">
                            <td class="px-4 py-3 font-mono text-body">{{ $r['address'] }}</td>
                            <td class="px-4 py-3 text-body">{{ $r['customer'] }}</td>
                            <td class="px-4 py-3 font-mono text-xs text-muted">{{ $r['host'] }}</td>
                            <td class="px-4 py-3 font-mono text-xs text-muted">{{ $r['vmid'] }}</td>
                            <td class="px-4 py-3 text-xs text-muted">{{ $r['plan'] }}</td>
                            <td class="px-4 py-3 font-mono text-xs text-muted">{{ $r['quota'] }}</td>
                            <td class="px-4 py-3">
                                <div class="flex flex-wrap items-center gap-1.5">
                                    <x-ui.badge :status="$r['status']">{{ $r['status_label'] }}</x-ui.badge>
                                    @if ($r['restart'])
                                        <span class="inline-flex items-center gap-1 rounded-pill border border-warning-border bg-warning-bg px-2 py-0.5 text-xs font-semibold text-warning"
                                              title="{{ __('admin.restart_pending_hint') }}">
                                            <x-ui.icon name="rotate-ccw" class="size-3.5" />{{ __('admin.restart_pending') }}
                                        </span>
                                    @endif
                                </div>
                            </td>
                            @if ($canRestart)
                                <td class="px-4 py-3 text-right">
                                    @if ($r['live'])
                                        <x-ui.button variant="secondary" size="sm"
                                                     @click="$dispatch('openModal', { component: 'admin.confirm-restart-instance', arguments: { uuid: '{{ $r['uuid'] }}' } })">
                                            <x-ui.icon name="rotate-ccw" class="size-4" />{{ __('admin.restart') }}
                                        </x-ui.button>
                                    @endif
                                </td>
                            @endif
                        </tr>
                    @empty
                        <tr><td colspan="{{ $canRestart ? 8 : 7 }}" class="px-4 py-8 text-center text-sm text-muted">{{ __('admin.instances_empty') }}</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    @if ($instances->hasPages())
        <div class="animate-rise [animation-delay:120ms]">{{ $instances->links() }}</div>
    @endif
</div>
