<form
  class="form"
  fxLayout="column"
  fxLayoutAlign="start stretch"
  [formGroup]="form"
  (submit)="onSubmit()"
>
  <main>
    <h1>{{ "FORGET_PASSWORD" | translate }}</h1>
    <span
      >{{ "VERFICATION_TITLE_1" | translate }} <br />
      {{ "EMAIL_TITLE" | 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]="'EMAIL' | translate"
    formControlName="email"
  />
  <app-error-form
    [name]="'EMAIL'"
    [control]="form.get('email')!"
  ></app-error-form>

  <button type="submit" [disabled]="loading" [class.spinner]="loading">
    {{ "SEND_VERFICATION_EMAIL" | translate }}
  </button>
</form>
