@extends('layouts.app')
@section('title', 'Benutzer')
@section('heading', 'Benutzerverwaltung')

@section('content')
<a href="{{ route('users.create') }}" class="mb-6 inline-block rounded-lg bg-cyan-600 px-4 py-2 text-sm font-medium hover:bg-cyan-500">+ Benutzer</a>

<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>
                <th class="px-4 py-3">E-Mail</th>
                <th class="px-4 py-3">Rolle</th>
                <th class="px-4 py-3">VMs</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">
            @foreach($users as $user)
            <tr>
                <td class="px-4 py-3 font-medium">{{ $user->name }}</td>
                <td class="px-4 py-3 text-slate-400">{{ $user->email }}</td>
                <td class="px-4 py-3">{{ $user->role->label() }}</td>
                <td class="px-4 py-3">{{ $user->vms_count }}</td>
                <td class="px-4 py-3">{{ $user->is_active ? 'Aktiv' : 'Deaktiviert' }}</td>
                <td class="px-4 py-3 text-right">
                    <a href="{{ route('users.edit', $user) }}" class="text-cyan-400 hover:underline">Bearbeiten</a>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
{{ $users->links() }}
@endsection