<div class="kt-login__body card-login">
	<div class="kt-login__form login-box">
		<div class="kt-login__title">
			<img src="assets/img/logo-drenax.svg" width="300px" alt="" class="mt-3 mb-3">
			<h3 style="color: #484848; margin-top: 10px">Iniciar sesión</h3>
		</div>

		<form class="kt-form" [formGroup]="loginForm" 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>Correo inválido, ej. correo@mail.com</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>
			<div class="form-group">
				<mat-form-field>
					<mat-label>Contraseña</mat-label>
					<input matInput type="{{(showPassword === false)?'password':'text'}}" placeholder="Contraseña" formControlName="password" autocomplete="off"/>
					<mat-icon matSuffix style="cursor: pointer;" (click)="toggleShowPassword(showPassword)">
						{{!showPassword?'visibility':'visibility_off'}}</mat-icon>
					<mat-error *ngIf="isControlHasError('password','required')">
						<strong>Campo requerido</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 100 caracteres</strong>
					</mat-error>
				</mat-form-field>
			</div>
			<div class="kt-login__actions">
				<!--<a href="javascript:;" routerLink="/auth/forgot-password" class="kt-link kt-login__link-forgot">
					Recuperar contraseña
				</a>-->
				<button (click)="submit()" [ngClass]="{'kt-spinner kt-spinner--right kt-spinner--md kt-spinner--light': loading}" id="kt_login_signin_submit" class="btn btn-primary btn-elevate kt-login__btn-primary btn-entrar">Entrar</button>
			</div>
		</form>
	</div>
</div>
