@extends('layouts.auth')

@section('page_title', __('Nueva contraseña'))

@section('auth_nav')
    <a href="{{ route('login') }}" class="btn btn-sm rt-btn-cherry px-3">{{ __('Inicio de sesión') }}</a>
@endsection

@section('content')
    <div class="rt-auth-card rt-auth-card--focus">
        <h1 class="rt-auth-card-title">{{ __('Nueva contraseña') }}</h1>
        <p class="rt-auth-card-lead mb-0">{{ __('Elige una contraseña segura para proteger tu cuenta.') }}</p>

        <div class="rt-auth-divider"></div>

        <form method="POST" action="{{ route('password.update') }}" class="rt-auth-form">
            @csrf

            <input type="hidden" name="token" value="{{ $token }}">

            <div class="mb-3">
                <label for="email" class="rt-auth-label">{{ __('Correo electrónico') }}</label>
                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ $email ?? old('email') }}" required autocomplete="email" autofocus placeholder="nombre@ejemplo.com">

                @error('email')
                    <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                @enderror
            </div>

            @include('partials.rt-password-field', [
                'name' => 'password',
                'id' => 'password',
                'label' => __('Nueva contraseña'),
                'autocomplete' => 'new-password',
                'placeholder' => __('Mínimo 8 caracteres'),
                'showMeter' => true,
                'minlength' => 8,
            ])

            @include('partials.rt-password-field', [
                'name' => 'password_confirmation',
                'id' => 'password-confirm',
                'label' => __('Confirmar contraseña'),
                'autocomplete' => 'new-password',
                'placeholder' => __('Repite la contraseña'),
                'showMeter' => false,
                'errorKey' => 'password',
                'silentError' => true,
                'wrapperClass' => 'mb-4',
                'minlength' => 8,
            ])

            <button type="submit" class="btn btn-sm rt-btn-cherry w-100 mb-3">{{ __('Guardar contraseña') }}</button>

            <p class="text-center small text-secondary mb-0">
                <a class="rt-auth-link" href="{{ route('login') }}">{{ __('Volver a iniciar sesión') }}</a>
            </p>
        </form>
    </div>
@endsection
