@props([
    'title' => 'Hapus Data?',
    'description' => 'Data yang dihapus tidak dapat dipulihkan kembali.',
    'submitButtonModel' => null,
    'model',
])

<x-modal.base
    :model="$model"
    :title="$title"
    size="lg"
    titleClass="bg-red-400"
    boxClass="w-full max-sm:h-fit h-full"
    innerClass="max-sm:h-fit max-sm:min-h-fit"
>
    <x-group class="w-full px-8 items-start space-x-4 md:space-x-8 py-4">
        <div class="flex h-20 w-20 rounded-full bg-red-400 text-center justify-center">
            <i class="ph ph-trash text-white text-5xl my-auto"></i>
        </div>

        <x-stack class="flex-1">
            <span class="font-bold text-2xl">
                {{ $title }}
            </span>
            <p class="max-sm:text-sm">
                {{ $description }}
            </p>
        </x-stack>
    </x-group>

    <form
        class="w-full"
        method="post"
        {{ $attributes }}
    >
        @csrf
        @method('delete')

        <x-stack class="w-full justify px-8 py-2 space-y-2">
            {{ $slot }}
        </x-stack>

        <x-group class="w-full justify-end space-x-3 pb-4 px-5 max-sm:mt-4">
            <x-button
                class="bg-transparent hover:bg-red-400 text-red-400 border border-red hover:text-white space-x-3 px-5 max-sm:flex-1"
                x-on:click="close()"
            >
                Batal
            </x-button>

            <x-button
                class="bg-red-400 text-white hover:bg-red-500 border border-red-400 hover:text-white space-x-3 px-5 max-sm:flex-1"
                x-bind:disabled="!{{ $submitButtonModel ?? 'true' }}"
                wire:loading.class="cursor-progress pointer-events-none"
                type="submit"
            >
                <span
                    class="hidden animate-spin w-full h-full text-center mx-auto"
                    wire:loading.class.remove="hidden"
                >
                    <i wire:loading.class="ph ph-circle-notch"></i>
                </span>
                <x-text
                    wire:loading.class="hidden"
                    class="pe-3"
                >
                    Hapus
                </x-text>
            </x-button>
        </x-group>
    </form>
</x-modal.base>