@can('viewAny', App\Models\User::class)
<div>
    <div class="flex justify-between items-center">
        <flux:heading size="xl">Users</flux:heading>
    </div>
    <flux:separator class="my-8" />
    @foreach ($users as $u)
    <x-card class="flex items-center justify-between p-6">
        <div class="flex gap-4">
            <flux:heading>{{$u->name}}</flux:heading>
            <flux:text>{{$u->email}}</flux:text>
        </div>
        @can('delete', $u)
        <flux:button variant="danger" size="sm" wire:click="deleteUser({{ $u->id }})">Delete</flux:button>
        @endcan
    </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