@props(['routeDeletion','description'=>'','titre'=>'Hamafa'])
<div class="space-y-6 border shadow rounded-lg bg-white p-7 space-y-7 text-center">
<header>
    <h2 class="text-lg font-medium text-gray-900">
        {{ $titre }}
        {{ $description }}
    </h2>

    <p class="mt-1 text-sm text-gray-600">
        {{ __('Tandremo! Rehefa vitanao ity hetsika ity dia tsy azo averina intsony!') }}
    </p>
</header>
    <x-danger-button
        x-data=""
        x-on:click.prevent="$dispatch('open-modal', 'confirm-deletion')"
    >{{ $titre }}</x-danger-button>

    <x-modal name="confirm-deletion" :show="$errors->userDeletion->isNotEmpty()" focusable>
        <form method="post" action="{{$routeDeletion}}" class="p-6 text-center">
            <div class="p-6">
            @csrf
            @method('delete')

            <h2 class="text-lg font-medium text-gray-900">
                {{ __('Manaiky marina ve ianao fa '.$titre) }}
                {{ $description }}
                {{ __('?') }}
            </h2>

            <p class="mt-1 text-sm text-gray-600">
                {{ __('Ampidiro ary ny teny miafina nampiasainao teo!') }}
            </p>

            <div class="mt-6 flex flex-col items-center">
                <x-input-label for="password" value="{{ __('Password') }}" class="sr-only" />

                <x-text-input
                    id="password"
                    name="password"
                    type="password"
                    class="mt-1 block w-3/4"
                    placeholder="{{ __('Password') }}"
                />

                <x-input-error :messages="$errors->userDeletion->get('password')" class="mt-2" />
            </div>

            <div class="mt-6 flex justify-center">
                <x-secondary-button x-on:click="$dispatch('close')">
                    {{ __('Hiverina') }}
                </x-secondary-button>

                <x-danger-button class="ms-3">
                    {{ $titre }}
                </x-danger-button>
            </div>
            </div>
        </form>
    </x-modal>
</div>