<form
  class="form"
  fxLayout="column"
  fxLayoutAlign="start stretch"
  [formGroup]="form"
  (submit)="onSubmit()"
>
  <main>
    <h1>{{ "WELCOME_BACK" | translate }}</h1>
    <span>{{ "SIGN_IN_TO_COUNTINUE" | translate }}</span>
  </main>

  <label class="label gap-5" fxLayout="row" fxLayoutAlign="start center">
    <img
      src="assets/images/email.jpg"
      alt="email.jpg"
      title="email"
      style="width: 15px"
    />
    <span>{{ "EMAIL" | translate }}</span></label
  >
  <input
    type="email"
    placeholder="Enter your email address"
    formControlName="email"
  />

  <app-error-form
    [name]="'EMAIL'"
    [control]="form.get('email')!"
  ></app-error-form>

  <label class="label mt-1 gap-5" fxLayout="row" fxLayoutAlign="start center">
    <img
      src="../../../../assets/images/password.jpg"
      alt="password.jpg"
      title="password"
    />
    <span> {{ "ENTER_YOUR_PASSWORD" | translate }}</span></label
  >
  <input
    type="PASSWORD"
    placeholder="Enter password"
    formControlName="password"
  />

  <app-error-form
    [name]="'password'"
    [control]="form.get('password')!"
  ></app-error-form>

  <p fxLayout="row" fxLayoutAlign="end center">
    <a [routerLink]="['./forget-password']">{{
      "FORGET_PASSWORD" | translate
    }}</a>
  </p>

  <button type="submit" [disabled]="loading" [class.spinner]="loading">
    {{ "SIGN_IN" | translate }}
  </button>
  <h5>
    {{ "DONT_HAVE_ACCOUNT" | translate }}
    <span [routerLink]="['/auth/signUp']">{{ "SIGN_UP" | translate }}</span>
  </h5>
</form>
