<nus-user-container>
  <div class="main-container with-gap">
    <h1>{{ (isPasswordInit ? 'recover.init.title' : 'recover.title') | translate }}</h1>
    <div class="body-s">{{ (isPasswordInit ? 'recover.init.description' : 'recover.description') | translate }}</div>

    <form
      class="recover-form"
      [formGroup]="recoverForm"
      (ngSubmit)="submit()">
      <pa-input
        formControlName="email"
        required
        type="email"
        autocapitalize="off"
        stfLowerCaseInput
        [errorMessages]="recoverValidationMessages.email">
        {{ 'generic.email' | translate }}
      </pa-input>
      <pa-button
        class="full-width"
        type="submit"
        kind="primary"
        [disabled]="recoverForm.invalid">
        {{ 'recover.recover' | translate }}
      </pa-button>
    </form>

    @if (!isPasswordInit) {
      <div>
        <span>{{ 'recover.gologin_help' | translate }}</span>
        <a
          routerLink="../login"
          queryParamsHandling="preserve">
          {{ 'recover.gologin' | translate }}
        </a>
      </div>
    }
  </div>
</nus-user-container>
