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

  <label class="label mt-1 gap-5" fxLayout="row" fxLayoutAlign="start center">
    <img
      src="../../../../assets/images/password.jpg"
      alt="password.jpg"
      title="password"
    />
    <span>{{ "PASSWORD" | translate }}</span></label
  >
  <input
    type="password"
    placeholder="Enter password"
    formControlName="password"
  />
  <app-error-form
    [name]="'PASSWORD'"
    [control]="form.get('password')!"
  ></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> {{ "CONFIRM_PASSWORD" | translate }}</span></label
  >
  <input
    type="password"
    placeholder="Enter password"
    formControlName="confirm_password"
  />
  <app-error-form
    [name]="'CONFIRM_PASSWORD'"
    [control]="form.get('password')!"
  ></app-error-form>

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