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

<div
    {{ $attributes->merge(['class' => 'password-strength password-strength--'.$variant]) }}
    :class="{ 'password-strength--focused': passwordFocused }"
>
    <p class="password-strength__title">{{ __('auth.password_strength_title') }}</p>

    <ul class="password-strength__list" role="list">
        <li class="password-strength__item" :class="{ 'password-strength__item--met': password.length >= 8 }">
            <span class="password-strength__icon" aria-hidden="true">
                <svg x-show="password.length >= 8" class="password-strength__icon-check" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M20 6 9 17l-5-5" />
                </svg>
                <svg x-show="password.length < 8" class="password-strength__icon-pending" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                    <circle cx="12" cy="12" r="9" />
                </svg>
            </span>
            <span>{{ __('auth.password_rule_min') }}</span>
        </li>

        <li class="password-strength__item" :class="{ 'password-strength__item--met': /[A-Z]/.test(password) }">
            <span class="password-strength__icon" aria-hidden="true">
                <svg x-show="/[A-Z]/.test(password)" class="password-strength__icon-check" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M20 6 9 17l-5-5" />
                </svg>
                <svg x-show="!/[A-Z]/.test(password)" class="password-strength__icon-pending" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                    <circle cx="12" cy="12" r="9" />
                </svg>
            </span>
            <span>{{ __('auth.password_rule_upper') }}</span>
        </li>

        <li class="password-strength__item" :class="{ 'password-strength__item--met': /[a-z]/.test(password) }">
            <span class="password-strength__icon" aria-hidden="true">
                <svg x-show="/[a-z]/.test(password)" class="password-strength__icon-check" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M20 6 9 17l-5-5" />
                </svg>
                <svg x-show="!/[a-z]/.test(password)" class="password-strength__icon-pending" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                    <circle cx="12" cy="12" r="9" />
                </svg>
            </span>
            <span>{{ __('auth.password_rule_lower') }}</span>
        </li>

        <li class="password-strength__item" :class="{ 'password-strength__item--met': /[0-9]/.test(password) }">
            <span class="password-strength__icon" aria-hidden="true">
                <svg x-show="/[0-9]/.test(password)" class="password-strength__icon-check" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M20 6 9 17l-5-5" />
                </svg>
                <svg x-show="!/[0-9]/.test(password)" class="password-strength__icon-pending" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                    <circle cx="12" cy="12" r="9" />
                </svg>
            </span>
            <span>{{ __('auth.password_rule_number') }}</span>
        </li>
    </ul>
</div>