@props([
    'title' => 'Konfirmasi Data?',
    'description' => 'Cek kembali semua data yang kamu masukkan. Pastikan semua data yang kamu masukkan sudah benar.',
    'submitButtonModel' => null,
    'submitButtonLabel' => 'Konfirmasi',
    'model',
])

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

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

    <form
        class="w-full"
        {{ $attributes }}
    >

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

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

            <x-button
                class="h-10 px-5 space-x-3 border bg-primary-100 text-white-fix hover:bg-primary-100 border-primary-100 hover:text-white max-sm:flex-1"
                x-bind:disabled="!{{ $submitButtonModel ?? 'true' }}"
                type="submit"
            >
                {{ $submitButtonLabel }}
            </x-button>
        </x-group>
    </form>
</x-modal.base>