@can('viewAny', App\Models\Application::class)
<div>
    <div class="flex items-center justify-end mb-8">
        @can('create', App\Models\Application::class)
        <flux:modal.trigger name="new-app">
            <flux:button variant="primary" icon="plus">New App</flux:button>
        </flux:modal.trigger>
        @endcan
    </div>
    <div class="mt-4 grid grid-cols-4 gap-8">
        @foreach ($apps as $app)
        <div class="p-4 flex flex-col gap-4 rounded-md bg-gray-100 dark:bg-zinc-700">
            <div class="flex items-center justify-between">
                @can('view', $app)
                <flux:modal.trigger name="app-info">
                    <flux:button icon="eye" variant="subtle" size="sm" inset class="cursor-pointer"
                        x-on:click="$dispatch('appinfo', {id: {{$app->id}}})" />
                </flux:modal.trigger>
                @endcan
                <flux:button wire:click="confirmDelete({{$app->id}})" icon="trash" variant="subtle" size="sm" inset
                    class="cursor-pointer" />
            </div>
            <img src="{{$app->getIconUrl()}}" alt="" class="size-32 mx-auto">
            <flux:heading size="lg" class="text-center">{{ $app->name}}</flux:heading>
        </div>
        @endforeach
    </div>
    <flux:modal name="delete-app-confirm" class="md:w-96">
        @if ($confirmDeleteApp)
        <flux:heading size="lg" class="mb-8">Delete {{$confirmDeleteApp->name}}?</flux:heading>
        <div class="flex gap-4">
            <flux:button variant="primary" color="red" class="flex-1" wire:click="deleteApp">Delete</flux:button>
            <flux:button variant="primary" class="flex-1" wire:click="cancelDelete">Cancel</flux:button>
        </div>
        @endif
    </flux:modal>
    <livewire:app-info-modal />
    @can('create', App\Models\Application::class)
    <livewire:forms.new-application />
    @endcan
</div>
@endcan