@props([
    'name',
    'label' => null,
    'length' => 6,
    'value' => '',
    'help' => null,
    'error' => null,
])

@php
    $resolvedError = $error ?? $errors->first($name);
@endphp

<x-forms.field :label="$label" :help="$help" :error="$resolvedError">
    <div x-data="otpInput({ length: {{ (int) $length }}, value: @js($value) })" data-otp-group class="flex gap-2">
        <input type="hidden" name="{{ $name }}" :value="value">
        <template x-for="(digit, index) in digits" :key="index">
            <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" data-otp-digit
                   :value="digit"
                   @input="onInput(index, $event)"
                   @keydown="onKeydown(index, $event)"
                   @paste="onPaste($event)"
                   class="h-12 w-10 rounded-xl border border-slate-300 text-center text-lg font-semibold shadow-sm transition focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/15">
        </template>
    </div>
</x-forms.field>