@props(['show', 'pin', 'error' => null])

@if ($show)
    <div class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 px-4" role="dialog" aria-modal="true" aria-labelledby="pin-modal-heading">
        <div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-slate-900">
            <h2 id="pin-modal-heading" class="text-lg font-semibold text-slate-900 dark:text-white">Enter your transaction PIN</h2>
            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Confirm this purchase with your 4-digit PIN.</p>

            <input
                type="password"
                inputmode="numeric"
                pattern="[0-9]*"
                maxlength="4"
                wire:model="pin"
                autofocus
                class="mt-4 block w-full rounded-lg border-slate-300 text-center text-2xl tracking-[0.5em] shadow-sm focus:border-brand-500 focus:ring-brand-500 dark:border-slate-700 dark:bg-slate-800 dark:text-white"
                placeholder="&bull;&bull;&bull;&bull;"
            >

            @if ($error)
                <p class="mt-2 text-sm text-red-600" role="alert">{{ $error }}</p>
            @endif

            <div class="mt-6 flex gap-3">
                <button type="button" wire:click="cancelConfirmation" class="flex-1 rounded-full border border-slate-300 px-4 py-2.5 text-sm font-semibold text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800">
                    Cancel
                </button>
                <button
                    type="button"
                    wire:click="submitWithPin"
                    wire:loading.attr="disabled"
                    wire:target="submitWithPin"
                    class="flex-1 rounded-full bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-700 disabled:opacity-60"
                >
                    <span wire:loading.remove wire:target="submitWithPin">Confirm</span>
                    <span wire:loading wire:target="submitWithPin">Processing&hellip;</span>
                </button>
            </div>
        </div>
    </div>
@endif