@can('viewAny', App\Models\User::class)
<div>
    <div class="flex justify-between items-center">
        <flux:heading size="xl">Users</flux:heading>
    </div>
    
    @if (session()->has('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded my-4">
            {{ session('success') }}
        </div>
    @endif
    
    @if (session()->has('error'))
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded my-4">
            {{ session('error') }}
        </div>
    @endif
    
    <flux:separator class="my-8" />
    @foreach ($users as $u)
    <x-card class="flex items-center justify-between p-6">
        <div class="flex gap-4 items-center">
            <div>
                <flux:heading>{{$u->name}}</flux:heading>
                <flux:text>{{$u->email}}</flux:text>
            </div>
            <flux:badge color="{{ $u->isAdmin() ? 'yellow' : 'gray' }}">
                {{ $u->isAdmin() ? 'Admin' : 'User' }}
            </flux:badge>
        </div>
        <div class="flex gap-2 items-center">
            @can('update', $u)
                <flux:select wire:change="changeUserRole({{ $u->id }}, $event.target.value)" size="sm">
                    <option value="user" {{ !$u->isAdmin() ? 'selected' : '' }}>User</option>
                    <option value="admin" {{ $u->isAdmin() ? 'selected' : '' }}>Admin</option>
                </flux:select>
            @endcan
            @can('delete', $u)
                <flux:button variant="danger" size="sm" wire:click="deleteUser({{ $u->id }})">Delete</flux:button>
            @endcan
        </div>
    </x-card>
    @endforeach
    <div class="flex justify-between items-center mt-8">
        <flux:heading size="xl">Invitations</flux:heading>
        @can('invite', App\Models\User::class)
        <div>
            <flux:modal.trigger name="invite-user">
                <flux:button variant="primary" icon="plus">Create</flux:button>
            </flux:modal.trigger>
        </div>
        @endcan
    </div>
    <flux:separator class="my-8" />
    @foreach ($invitations as $inv)
    <x-card class="flex items-center justify-between p-6">
        <div class="flex gap-4 items-center flex-1">
            <flux:heading>{{$inv->email}}</flux:heading>
            @switch($inv->status())
            @case('accepted')
            <flux:badge color="green">Accepted</flux:badge>
            @break
            @case('pending')
            <flux:badge>Pending</flux:badge>
            @break
            @default
            <flux:badge>{{$inv->status}}</flux:badge>
            @endswitch
        </div>
        <div class="flex gap-4 items-center">
            <flux:button variant="primary" size="sm">Copy invite link</flux:button>
        </div>
    </x-card>
    @endforeach
    @can('invite', App\Models\User::class)
    <flux:modal name="invite-user" class="w-96">
        <flux:heading>Invite User</flux:heading>
        <flux:separator class="my-4" />
        <form wire:submit="inviteUser" class="flex flex-col gap-4">
            <flux:input label="Email" wire:model="invite_email" />
            <flux:button type="submit" variant="primary">Create invitation</flux:button>
        </form>
    </flux:modal>
    @endcan
</div>
@endcan