<nus-user-container>
  <div class="main-container">
    <header>
      <p class="body-m">{{ 'login.subtitle' | translate }}</p>
    </header>
    @if (message || error) {
      <div
        class="login_alert title-xxs"
        data-cy="login-error">
        {{ message || error || '' | translate }}
      </div>
    }
    <div class="login_form">
      <form
        #form
        method="POST"
        [action]="oAuthLoginUrl()"
        (ngSubmit)="login()">
        <div class="login_field">
          <pa-input
            #email
            [formControl]="emailControl"
            required
            autocapitalize="off"
            name="username"
            type="email"
            [errorMessages]="loginValidationMessages.email"
            (enter)="onEnterPressed('email')"
            stfLowerCaseInput>
            {{ 'login.email' | translate }}
          </pa-input>
        </div>
        <div class="login_field">
          <nsi-password-input
            #password
            data-cy="password"
            [formControl]="passwordControl"
            name="password"
            [errorMessages]="loginValidationMessages.password">
            {{ 'login.password' | translate }}
          </nsi-password-input>
        </div>
        @if (ssoUrl | async; as url) {
          <div class="login_sso">
            <a [href]="url">
              {{ 'login.use-sso' | translate }}
              <pa-icon
                name="arrow-right"
                size="small"></pa-icon>
            </a>
          </div>
        }
        <input
          type="hidden"
          name="login_challenge"
          [value]="loginChallenge" />
        <div class="login_policy body-xs">
          <span [innerHTML]="'user.consent' | translate"></span>
        </div>
        <div class="login_submit">
          <pa-button
            class="full-width"
            type="submit"
            kind="primary"
            [disabled]="loginForm.invalid || isLoggingIn">
            {{ 'login.login' | translate }}
          </pa-button>
        </div>
      </form>
    </div>
    <div class="login_recover body-s">
      <span>{{ 'login.recover_help' | translate }}</span>
      <a
        routerLink="../recover"
        queryParamsHandling="preserve"
        class="accent-link">
        {{ 'login.recover' | translate }}
      </a>
    </div>
    @if (config.getSocialLogin()) {
      <stf-sso-buttons></stf-sso-buttons>
    }

    <div class="login_signup">
      <span>{{ 'login.have_account' | translate }}</span>
      <a
        [href]="signUpUrl"
        class="accent-link"
        data-cy="create-account">
        {{ 'login.create_one' | translate }}
      </a>
    </div>
  </div>
</nus-user-container>
