@extends('unal-new')

@section('content')

<div class="bg-primary-90 vstack justify-content-center align-items-center py-2 px-4 flex-grow-1 flex-lg-row bg-fixed-primary-90 rounded-end-top-unal">    

    <form method="POST" action="{{env("APP_URL")}}password/reset" class="reset-password rounded-5">
        {!! csrf_field() !!}
        <div class="position-relative">
            <div class="position-absolute top-0 start-0 prev">
                <a class="link link-neutral-70 d-flex" href="{{ url('auth/login') }}">
                    <span class="material-symbols-outlined icon-lg arrow-back text-neutral-variant"
                        translate='no'>west</span>
                </a>
            </div>
        </div>
        <div class="content pt-8 px-6">
            <div>
                <p class="text-center text-neutral-30 title">Restablecer contraseña</p>
                <p class="text-center text-neutral-60 subtitle">Ingresa tu nueva contraseña y
                    confírmala para restablecer el acceso a tu cuenta.</p>
            </div>
            <div class="body">
                <input type="hidden" name="token" value="{{ $token }}">

                @if (count($errors) > 0)
                <ul>
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
                @endif
                <div class="form-group mb-3">
                    <label for="email" style="font-weight: normal;">Correo electrónico *</label>
                    <input type="email" name="email" value="{{ old('email') }}" class="form-control">
                </div>

                <div class="form-group mb-3">
                    <label for="email" style="font-weight: normal;">Nueva Contraseña *</label>
                    <div class="input-group">
                        <input type="password" name="password" value="{{ old('email') }}" class="form-control">
                        <span class="input-group-text end material-symbols-outlined password-toggle" translate="no"style="cursor: pointer;">visibility</span>
                    </div>
                </div>

                <div class="form-group mb-3">
                    <label for="email" style="font-weight: normal;">Confirmar contraseña *</label>
                    <div class="input-group">
                        <input type="password" name="password_confirmation" value="{{ old('email') }}" class="form-control">
                        <span class="input-group-text end material-symbols-outlined password-toggle" translate="no" style="cursor: pointer;">visibility</span>
                    </div>
                </div>
                <div class="d-flex justify-content-center"> @if (env('GOOGLE_RECAPTCHA_KEY'))
                    <div class="g-recaptcha" data-sitekey="{{ env('GOOGLE_RECAPTCHA_KEY') }}"></div>
                    @endif
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="0" required>
                    <label class="form-check-label text-justify">
                        De acuerdo a la Ley 1581 de 2012 de Protección de Datos Personales, he leído, entendido y
                        aceptado los
                        términos
                        descritos en la <a class="link link-primary"
                            href="https://unal.edu.co/proteccion-de-datos-personales" target="_blank">Política de
                            Tratamiento
                            de
                            Datos Personales</a>.
                    </label>
                </div>
                <button type="submit"  class="btn btn-primary w-100">
                    Reiniciar contraseña
                </button>
            </div>
        </div>
    </form>
</div>

<style>
    .arrow-back {
        font-size: 1.5em !important;
    }
</style>

@include('components.error-alert')
@include('components.auth-styles')
@include('components.auth-scripts')
@stop