<div class="page-wrap h-full slate">
  <div class="session-form-hold">
    <mat-progress-bar mode="determinate" class="session-progress"></mat-progress-bar>
    <mat-card>
      <mat-card-content>
        <div class="text-center pt-8 pb-16">
          <img width="60px" src="assets/images/arctic-admin.svg" alt="" class="mb-8">
          <p class="text-muted m-0">New password will be sent to your email address</p>
        </div>
        <form #fpForm="ngForm" (ngSubmit)="submitEmail()">

          <div class="">
            <mat-form-field class="full-width">
              <input
                matInput
                name="email"
                required
                [(ngModel)]="userEmail"
                #email="ngModel"
                placeholder="Email"
                value="">
            </mat-form-field>
            <small 
              *ngIf="email.errors && (email.dirty || email.touched) && (email?.errors?.required)" 
              class="form-error-msg"> Email is required </small>
          </div>

          <button mat-raised-button class="mat-primary full-width mb-16" [disabled]="fpForm.invalid">Submit</button>
          <div class="text-center">
            <a [routerLink]="'/sessions/signin'" class="mat-primary text-center full-width">Sign in</a>
            <span fxFlex></span>
            <a [routerLink]="'/sessions/signup'" class="mat-primary text-center full-width">Create a new account</a>
          </div>
        </form>
      </mat-card-content>
    </mat-card>
  </div>
</div>

