{{--
  Componente anónimo: <x-auth.password-fields />
  Carpeta atómica: blade (index) + js + css + stories.
  Assets: Mix → public/js|css/components/auth/password-fields.*
--}}
@props([
    'passwordLabel' => 'Contraseña',
    'confirmationLabel' => 'Confirmar Contraseña',
    'fieldWrapperClass' => 'col-12 py-2',
    'labelClass' => 'form-label',
    'passwordId' => 'password',
    'confirmationId' => 'password_confirmation',
    'showRules' => true,
    'required' => true,
])

@once
    <link rel="stylesheet" href="{{ asset('css/components/auth/password-fields.css') }}">
@endonce

@pushOnce('scripts')
    <script src="{{ asset('js/components/auth/password-fields.js') }}"></script>
@endPushOnce

<div
    class="{{ $fieldWrapperClass }}"
    data-role="password-field"
    data-component="auth-password-fields"
    @if (! $required) data-optional="true" @endif
>
    <label for="{{ $passwordId }}" class="{{ $labelClass }}">{{ $passwordLabel }}</label>
    <div class="auth-password-input-wrap">
        <input
            type="password"
            class="form-control"
            id="{{ $passwordId }}"
            name="password"
            data-role="password"
            @if ($required) required @endif
            autocomplete="new-password">

        <button
            type="button"
            class="btn btn-outline-secondary border-0"
            data-role="toggle-password"
            data-target="{{ $passwordId }}"
            aria-label="Mostrar contraseña">
            <i class="bi bi-eye" aria-hidden="true"></i>
        </button>
    </div>

    @if ($showRules)
    <div class="mt-2 d-none" data-role="password-rules">
        <small data-role="rule-length" data-label="Mínimo 15 caracteres" class="d-block text-danger">
            ✗ Mínimo 15 caracteres
        </small>
        <small data-role="rule-lowercase" data-label="Al menos una letra minúscula" class="d-block text-danger">
            ✗ Al menos una letra minúscula
        </small>
        <small data-role="rule-uppercase" data-label="Al menos una letra mayúscula" class="d-block text-danger">
            ✗ Al menos una letra mayúscula
        </small>
        <small data-role="rule-number" data-label="Al menos un número" class="d-block text-danger">
            ✗ Al menos un número
        </small>
        <small data-role="rule-symbol" data-label="Al menos un símbolo" class="d-block text-danger">
            ✗ Al menos un símbolo
        </small>
        <small
            data-role="rule-confirmation"
            data-label="La confirmación debe coincidir"
            data-label-valid="La confirmación coincide"
            class="d-block text-danger">
            ✗ La confirmación debe coincidir
        </small>
    </div>
    @endif
</div>

<div class="{{ $fieldWrapperClass }}" data-role="password-confirmation-field">
    <label for="{{ $confirmationId }}" class="{{ $labelClass }}">{{ $confirmationLabel }}</label>
    <div class="auth-password-input-wrap">
        <input
            type="password"
            class="form-control"
            id="{{ $confirmationId }}"
            name="password_confirmation"
            data-role="password-confirmation"
            @if ($required) required @endif
            autocomplete="new-password">

        <button
            type="button"
            class="btn btn-outline-secondary border-0"
            data-role="toggle-password"
            data-target="{{ $confirmationId }}"
            aria-label="Mostrar confirmación de contraseña">
            <i class="bi bi-eye" aria-hidden="true"></i>
        </button>
    </div>
</div>