<nus-user-container>
  <div class="main-container with-gap">
    <h1>{{ (initFullname ? 'reset.title-init' : 'reset.title') | translate }}</h1>
    <form
      class="reset-form"
      [formGroup]="resetForm"
      (ngSubmit)="submit()">
      @if (initFullname) {
        <pa-input
          formControlName="username"
          autocapitalize="off">
          {{ 'login.full_name' | translate }}
        </pa-input>
      }
      <div class="reset_field">
        <nsi-password-input
          formControlName="password"
          required
          type="password"
          autocapitalize="off"
          [disabled]="pending"
          help="validation.password-rules"
          [errorMessages]="resetValidationMessages.password">
          {{ 'reset.password' | translate }}
        </nsi-password-input>
      </div>
      <div class="reset_field">
        <nsi-password-input
          formControlName="passwordConfirm"
          autocapitalize="off"
          required
          type="password"
          [disabled]="pending"
          [errorMessages]="resetValidationMessages.passwordConfirm">
          {{ 'generic.confirm_password' | translate }}
        </nsi-password-input>
      </div>
      <pa-button
        class="full-width"
        type="submit"
        kind="primary"
        [disabled]="resetForm.invalid || pending">
        {{ 'generic.save' | translate }}
      </pa-button>
    </form>
  </div>
</nus-user-container>
