<div class="md:grid md:grid-cols-3 md:gap-6">
    <div class="md:col-span-1 flex justify-between">
        <div class="px-4 sm:px-0">
            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ __('Delete Team') }}</h3>
            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">{{ __('Permanently delete this team.') }}</p>
        </div>
    </div>

    <div class="mt-5 md:mt-0 md:col-span-2">
        <div class="px-4 py-5 sm:p-6 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
            <div class="max-w-xl text-sm text-gray-600 dark:text-gray-400">
                {{ __('Once a team is deleted, all of its resources and data will be permanently deleted. Before deleting this team, please download any data or information regarding this team that you wish to retain.') }}
            </div>

            <div class="mt-5">
                <x-aura::danger-button wire:click="$toggle('confirmingTeamDeletion')" wire:loading.attr="disabled">
                    {{ __('Delete Team') }}
                </x-aura::danger-button>
            </div>

            <!-- Delete Team Confirmation Modal -->
            <x-aura::dialog-modal wire:model.live="confirmingTeamDeletion">
                <x-slot name="title">
                    {{ __('Delete Team') }}
                </x-slot>

                <x-slot name="content">
                    {{ __('Are you sure you want to delete this team? Once a team is deleted, all of its resources and data will be permanently deleted.') }}
                </x-slot>

                <x-slot name="footer">
                    <x-aura::secondary-button wire:click="$toggle('confirmingTeamDeletion')" wire:loading.attr="disabled">
                        {{ __('Cancel') }}
                    </x-aura::secondary-button>

                    <x-aura::danger-button class="ml-3" wire:click="deleteTeam" wire:loading.attr="disabled">
                        {{ __('Delete Team') }}
                    </x-aura::danger-button>
                </x-slot>
            </x-aura::dialog-modal>
        </div>
    </div>
</div>
