<!--begin::Body-->
<div class="kt-login__body">
	<!--begin::Signin-->
	<div class="kt-login__form login-box">
		<div class="kt-login__title">
			<img src="assets/img/logo-drenax-b.png" width="220px" alt="">
			<h3 style="color: #223D98; margin-top: 10px">¿Se te olvidó tu contraseña?</h3>
		</div>

		<kt-auth-notice></kt-auth-notice>

		<form class="kt-form" [formGroup]="forgotPasswordForm" autocomplete="off">
			<div class="form-group">
				<mat-form-field>
					<mat-label>Correo electrónico</mat-label>
					<input matInput type="email" placeholder="Correo electrónico" formControlName="email" autocomplete="off"/>
					<mat-error *ngIf="isControlHasError('email','required')">
						<strong>Campo requerido</strong>
					</mat-error>
					<mat-error *ngIf="isControlHasError('email','email')">
						<strong>Introduzca un correo válido</strong>
					</mat-error>
					<mat-error *ngIf="isControlHasError('email','minlength')">
						<strong>Mínimo requerido de 3 caracteres</strong>
					</mat-error>
					<mat-error *ngIf="isControlHasError('email','maxlength')">
						<strong>Máximo requerido de 320 caracteres</strong>
					</mat-error>
				</mat-form-field>
			</div>
			<!--begin::Action-->
			<div class="kt-login__actions">
				<button routerLink="/auth/login" [disabled]="loading" id="kt_login_signup_cancel" class="btn btn-secondary btn-elevate kt-login__btn-secondary">Regresar</button>
				<button (click)="submit()" id="kt_login_signin_submit" class="btn btn-primary btn-elevate kt-login__btn-primary" [ngClass]="{'kt-spinner kt-spinner--right kt-spinner--md kt-spinner--light': loading}">Enviar</button>
			</div>
			<!--end::Action-->
		</form>
	</div>
</div>

