@extends('layouts.app')
@section('title', 'VMs')
@section('heading', 'Virtuelle Maschinen')

@section('content')
<div class="mb-6 flex flex-wrap items-center justify-between gap-4">
    <form method="GET" class="flex gap-2">
        <select name="status" onchange="this.form.submit()" class="rounded-lg border border-slate-700 bg-slate-800 px-3 py-2 text-sm">
            <option value="">Alle Status</option>
            @foreach(['pending','active','failed'] as $s)
            <option value="{{ $s }}" @selected(request('status') === $s)>{{ ucfirst($s) }}</option>
            @endforeach
        </select>
    </form>
    <a href="{{ route('vms.create') }}" class="rounded-lg bg-cyan-600 px-4 py-2 text-sm font-medium hover:bg-cyan-500">+ VM erstellen</a>
</div>

<div class="overflow-hidden rounded-xl border border-slate-800">
    <table class="w-full text-left text-sm">
        <thead class="bg-slate-900 text-slate-400">
            <tr>
                <th class="px-4 py-3">Name</th>
                @if(auth()->user()->isAdmin())<th class="px-4 py-3">Kunde</th>@endif
                <th class="px-4 py-3">VMID</th>
                <th class="px-4 py-3">IP / Public</th>
                <th class="px-4 py-3">Ressourcen</th>
                <th class="px-4 py-3">Status</th>
                <th class="px-4 py-3"></th>
            </tr>
        </thead>
        <tbody class="divide-y divide-slate-800 bg-slate-900/40">
            @forelse($vms as $vm)
            <tr class="hover:bg-slate-800/30">
                <td class="px-4 py-3 font-medium">{{ $vm->name }}</td>
                @if(auth()->user()->isAdmin())
                <td class="px-4 py-3 text-slate-400">{{ $vm->owner?->name ?? '—' }}</td>
                @endif
                <td class="px-4 py-3 font-mono text-xs">{{ $vm->vmid ?? '—' }}</td>
                <td class="px-4 py-3 font-mono text-xs">
                    {{ $vm->ip_address ?? '—' }}
                    @if($vm->public_ip)<br><span class="text-violet-400">{{ $vm->public_ip }}</span>@endif
                </td>
                <td class="px-4 py-3 text-slate-400">{{ $vm->cpu }} vCPU · {{ $vm->ram }} MB · {{ $vm->disk }} GB</td>
                <td class="px-4 py-3">
                    @include('partials.status-badge', ['status' => $vm->status])
                    @if($vm->proxmox_status)
                    <span class="ml-1 text-xs text-slate-500">({{ $vm->proxmox_status }})</span>
                    @endif
                </td>
                <td class="px-4 py-3 text-right">
                    <a href="{{ route('vms.show', $vm) }}" class="text-cyan-400 hover:underline">Details</a>
                </td>
            </tr>
            @empty
            <tr><td colspan="7" class="px-4 py-8 text-center text-slate-500">Keine VMs gefunden.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>
<div class="mt-4">{{ $vms->links() }}</motionless>
@endsection