@props([
    'name' => 'code',
    'length' => 6,
    'label' => null,
])
{{-- Segmented one-time-code input. Alpine keeps the visible segments; a hidden
     field carries the joined value for the native form POST. --}}
<div
    x-data="otpInput({ length: {{ (int) $length }} })"
    class="flex gap-2"
    role="group"
    @if ($label) aria-label="{{ $label }}" @endif
>
    <input type="hidden" name="{{ $name }}" :value="value">
    <template x-for="(digit, i) in digits" :key="i">
        <input
            type="text"
            inputmode="numeric"
            autocomplete="one-time-code"
            maxlength="1"
            class="size-12 rounded border border-line bg-surface text-center font-mono text-lg text-ink"
            :aria-label="`{{ $label ?? __('auth.otp_digit') }} ${i + 1}`"
            x-model="digits[i]"
            x-ref="cell"
            @input="onInput(i, $event)"
            @keydown.backspace="onBackspace(i, $event)"
            @paste.prevent="onPaste($event)"
        >
    </template>
</div>