<nus-user-container>
  <div class="main-container with-gap">
    <div class="form-header">
      <h1>{{ 'signup.title' | translate }}</h1>
    </div>
    @if (error) {
      <div class="signup-error title-xxs">
        {{ error | translate }}
      </div>
    }
    <form
      data-cy="signup-form"
      class="signup-form"
      method="POST"
      [formGroup]="signupForm"
      (ngSubmit)="submitForm()">
      <nsi-password-input
        formControlName="password"
        [errorMessages]="validationMessages"
        help="validation.password-rules">
        {{ 'login.password' | translate }}
      </nsi-password-input>

      <pa-button
        class="full-width"
        type="submit"
        kind="primary"
        [disabled]="signupForm.invalid">
        {{ 'signup.signup-button-label' | translate }}
      </pa-button>
    </form>

    @if (config.getSocialLogin()) {
      <stf-sso-buttons></stf-sso-buttons>
    }

    <p class="centered">
      {{ 'signup.have_account_already' | translate }}
      <a
        href="#"
        (click)="goToLogin()"
        class="accent-link">
        {{ 'login.login' | translate }}
      </a>
    </p>
    <p>
      Progress and certain product names used herein are trademarks or registered trademarks of Progress Software
      Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See
      <a href="https://www.progress.com/legal/trademarks">Trademarks</a>
      for appropriate markings. All rights in any other trademarks contained herein are reserved by their respective
      owners and their inclusion does not imply an endorsement, affiliation, or sponsorship as between Progress and the
      respective owners.
    </p>
  </div>
</nus-user-container>
