@props([
    'passwordLabel' => null,
    'confirmationLabel' => null,
    'passwordName' => 'password',
    'passwordConfirmationName' => 'password_confirmation',
    'passwordId' => 'password',
    'confirmationId' => 'password_confirmation',
    'passwordAutocomplete' => 'new-password',
])

@php
    $passwordLabel ??= __('auth.password');
    $confirmationLabel ??= __('auth.register_password_confirmation');
@endphp

<div class="login-stagger">
    <label for="{{ $passwordId }}" class="auth-text-label mb-1.5 block text-[13px] font-medium">{{ $passwordLabel }}</label>
    <div class="input-wrap flex items-center rounded-xl">
        <input
            id="{{ $passwordId }}"
            :type="showPassword ? 'text' : 'password'"
            name="{{ $passwordName }}"
            x-model="password"
            @focus="passwordFocused = true"
            @blur="passwordFocused = false"
            autocomplete="{{ $passwordAutocomplete }}"
            placeholder="••••••••"
            class="login-input w-full bg-transparent px-4 py-3 text-[14px] outline-none"
            :class="{ 'input-invalid': stepErrors.password }"
        >
        <button type="button" @click="showPassword = !showPassword" class="login-input-icon pr-3.5 hover:opacity-80" tabindex="-1" aria-label="{{ __('common.show_password') }}">
            <svg x-show="!showPassword" class="h-[18px] w-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
            <svg x-show="showPassword" x-cloak class="h-[18px] w-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
            </svg>
        </button>
    </div>
    <p x-show="stepErrors.password" x-text="stepErrors.password" x-cloak class="mt-1.5 text-[13px] text-red-500 dark:text-red-400"></p>
    @error($passwordName)
        <p class="mt-1.5 text-[13px] text-red-500 dark:text-red-400">{{ $message }}</p>
    @enderror

    <x-password-strength-rules variant="auth" class="mt-3" />
</div>

<div class="login-stagger">
    <label for="{{ $confirmationId }}" class="auth-text-label mb-1.5 block text-[13px] font-medium">{{ $confirmationLabel }}</label>
    <div class="input-wrap flex items-center rounded-xl">
        <input
            id="{{ $confirmationId }}"
            :type="showPasswordConfirmation ? 'text' : 'password'"
            name="{{ $passwordConfirmationName }}"
            x-model="passwordConfirmation"
            autocomplete="{{ $passwordAutocomplete }}"
            placeholder="••••••••"
            class="login-input w-full bg-transparent px-4 py-3 text-[14px] outline-none"
            :class="{ 'input-invalid': stepErrors.password_confirmation }"
        >
        <button type="button" @click="showPasswordConfirmation = !showPasswordConfirmation" class="login-input-icon pr-3.5 hover:opacity-80" tabindex="-1" aria-label="{{ __('common.show_password') }}">
            <svg x-show="!showPasswordConfirmation" class="h-[18px] w-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
            <svg x-show="showPasswordConfirmation" x-cloak class="h-[18px] w-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
            </svg>
        </button>
    </div>
    <p x-show="stepErrors.password_confirmation" x-text="stepErrors.password_confirmation" x-cloak class="mt-1.5 text-[13px] text-red-500 dark:text-red-400"></p>
    @error($passwordConfirmationName)
        <p class="mt-1.5 text-[13px] text-red-500 dark:text-red-400">{{ $message }}</p>
    @enderror
    <x-password-confirmation-match variant="auth" class="mt-2" />
</div>