{{-- A password field with botique's show/hide toggle. --}}
@props(['id' => 'password', 'model' => null, 'label' => null, 'error' => null, 'autocomplete' => 'current-password'])

<div class="auth__field" x-data="{ show: false }">
    <label for="{{ $id }}">{{ $label ?? __('Password') }}</label>
    <div class="auth__input-wrap">
        <input wire:model="{{ $model ?? $id }}" id="{{ $id }}" :type="show ? 'text' : 'password'" type="password"
            autocomplete="{{ $autocomplete }}" class="auth__input auth__input--has-affix">
        <button type="button" @click="show = !show" tabindex="-1" class="auth__reveal"
            :aria-label="show ? '{{ __('Hide password') }}' : '{{ __('Show password') }}'">
            <svg x-show="!show" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.957 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
            </svg>
            <svg x-show="show" x-cloak viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.542-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.957 9.542 7a10.025 10.025 0 01-4.132 3.11m0 0L21 21" />
            </svg>
        </button>
    </div>
    @if ($error)
        @error($error)
            <span class="auth__error">{{ $message }}</span>
        @enderror
    @endif
</div>