<x-form-section submit="updatePin">
    <x-slot name="title">
        {{ __('Update Customer PIN') }}
    </x-slot>

    <x-slot name="description">
        {{ __('Ensure your account is using a secure 4-digit PIN for quick access.') }}
    </x-slot>

    <x-slot name="form">
        <div class="col-span-6 sm:col-span-4">
            <x-label for="current_pin" value="{{ __('Current PIN') }}" />
            <x-input id="current_pin" 
                     type="password" 
                     class="mt-1 block w-full" 
                     wire:model="state.current_pin" 
                     autocomplete="off" 
                     maxlength="4" 
                     inputmode="numeric" />
            <x-input-error for="state.current_pin" class="mt-2" />
        </div>

        <div class="col-span-6 sm:col-span-4">
            <x-label for="pin" value="{{ __('New PIN') }}" />
            <x-input id="pin" 
                     type="password" 
                     class="mt-1 block w-full" 
                     wire:model="state.pin" 
                     autocomplete="new-pin" 
                     maxlength="4" 
                     inputmode="numeric" 
                     placeholder="XXXX" />
            <p class="text-xs text-gray-500 mt-1">
                {{ __('Must be exactly 4 numbers.') }}
            </p>
            <x-input-error for="state.pin" class="mt-2" />
        </div>

        <div class="col-span-6 sm:col-span-4">
            <x-label for="pin_confirmation" value="{{ __('Confirm New PIN') }}" />
            <x-input id="pin_confirmation" 
                     type="password" 
                     class="mt-1 block w-full" 
                     wire:model="state.pin_confirmation" 
                     autocomplete="new-pin" 
                     maxlength="4" 
                     inputmode="numeric" />
            <x-input-error for="state.pin_confirmation" class="mt-2" />
        </div>
    </x-slot>

    <x-slot name="actions">
        <x-action-message class="me-3" on="pin-saved">
            {{ __('Saved.') }}
        </x-action-message>

        <x-button>
            {{ __('Save') }}
        </x-button>
    </x-slot>
</x-form-section>