@props([
    'variant' => 'auth',
])

<div
    {{ $attributes->merge(['class' => 'password-confirmation-match password-confirmation-match--'.$variant]) }}
    x-show="passwordConfirmation.length > 0"
    x-cloak
>
    <p
        x-show="password.length > 0 && password === passwordConfirmation"
        class="password-confirmation-match__ok"
    >
        <svg class="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M20 6 9 17l-5-5" />
        </svg>
        {{ __('auth.password_confirmation_match') }}
    </p>
    <p
        x-show="password.length > 0 && password !== passwordConfirmation"
        class="password-confirmation-match__mismatch"
    >
        {{ __('auth.password_confirmation_mismatch') }}
    </p>
</div>