@if (ssoChallengeLoading) {
  <div class="flex min-h-[20rem] w-full items-center justify-center px-4 py-8 text-sm text-text-secondary">
    {{ 'Auth.SSO_REGISTER.LOADING' | translate: { Default: 'Loading SSO account information...' } }}
  </div>
} @else if (ssoChallengeLoadError) {
  <div class="flex w-full max-w-md flex-col gap-4 px-2 py-4">
    <div class="rounded-2xl border border-divider-regular bg-background-default-subtle px-5 py-5">
      <div class="text-base font-semibold text-text-primary">
        {{ 'Auth.SSO_REGISTER.INVALID_TITLE' | translate: { Default: 'Registration Session Unavailable' } }}
      </div>
      <p class="mt-2 whitespace-pre-line text-sm leading-6 text-text-secondary">
        {{ ssoChallengeLoadError }}
      </p>
    </div>

    <button z-button zFull type="button" class="h-10 text-sm font-medium" (click)="navigateToLogin()">
      {{ 'Auth.SSO_REGISTER.BACK_TO_LOGIN' | translate: { Default: 'Back to Sign In' } }}
    </button>
  </div>
} @else {
<form [formGroup]="form" (ngSubmit)="register()" role="form" class="flex flex-col justify-start items-stretch">
  <div class="flex flex-col justify-start items-stretch p-2 mt-2 gap-2">
    @if (showMessages.error && errors?.length && !loading) {
      @for (error of errors; track error; let i = $index) {
        <div
          class="flex items-center gap-2 p-3 mb-2 bg-[var(--color-status-warning-bg)] border border-[var(--color-status-warning-indicator-border)] rounded"
        >
          <span class="text-[var(--color-status-warning-fg)] text-sm">{{
            'Auth.' + error | translate: { Default: error }
          }}</span>
          <button
            type="button"
            (click)="errors.splice(i, 1)"
            class="ml-auto text-[var(--color-status-warning-fg)] hover:opacity-70"
          >
            <span class="text-lg">×</span>
          </button>
        </div>
      }
    }

    @for (message of messages; track message; let i = $index) {
      <div
        class="flex items-center gap-2 p-3 mb-2 bg-[var(--color-status-success-bg)] border border-[var(--color-status-success-indicator-border)] rounded"
      >
        <span class="text-[var(--color-status-success-fg)] text-sm">{{ message }}</span>
        <button
          type="button"
          (click)="messages.splice(i, 1)"
          class="ml-auto text-[var(--color-status-success-fg)] hover:opacity-70"
        >
          <span class="text-lg">×</span>
        </button>
      </div>
    }

      @if (verifiedEmailSignup) {
        @if (ssoChallenge; as challenge) {
          <div class="mb-2 flex flex-col items-center gap-3 px-4 py-2 text-center">
            @if (challenge.avatarUrl) {
              <img
                class="h-16 w-16 rounded-full border border-divider-regular object-cover"
                [src]="challenge.avatarUrl"
                [alt]="challenge.displayName || providerLabel(challenge.provider)"
                referrerpolicy="no-referrer"
              />
            } @else {
              <div
                class="flex h-16 w-16 items-center justify-center rounded-full border border-divider-regular bg-components-card-bg text-lg font-semibold text-text-primary"
              >
                {{ providerLabel(challenge.provider).slice(0, 1) }}
              </div>
            }

            <div>
              <div class="text-lg font-semibold text-text-primary">
                {{
                  'Auth.SSO_REGISTER.TITLE'
                    | translate
                      : {
                          provider: providerLabel(challenge.provider),
                          Default: 'Complete ' + providerLabel(challenge.provider) + ' Registration'
                        }
                }}
              </div>
              @if (challenge.displayName) {
                <div class="mt-1 text-sm font-medium text-text-primary">{{ challenge.displayName }}</div>
              }
              <p class="mt-1 text-sm leading-6 text-text-secondary">
                {{
                  'Auth.SSO_REGISTER.DESCRIPTION'
                    | translate
                      : {
                          provider: providerLabel(challenge.provider),
                          Default: 'Set a password to finish creating your Xpert account.'
                        }
                }}
              </p>
            </div>
          </div>
        }

        <z-form-field appearance="fill" floatLabel="always" class="w-full">
          <z-form-label>{{ 'AUTH.REGISTER.EMAIL' | translate: { Default: 'Email' } }}</z-form-label>
          <input
            z-input
            type="email"
            name="email"
            id="email"
            formControlName="email"
            autocomplete="email"
            [readonly]="emailLocked"
            [attr.aria-readonly]="emailLocked"
          />
          <z-form-message>
            {{
              'Auth.SSO_REGISTER.VERIFIED_EMAIL'
                | translate
                  : {
                      provider: providerLabel(ssoChallenge?.provider),
                      Default: 'Verified by ' + providerLabel(ssoChallenge?.provider) + ' and cannot be changed here.'
                    }
            }}
          </z-form-message>
        </z-form-field>

        <z-form-field appearance="fill" floatLabel="always" class="w-full">
          <z-form-label>{{ 'AUTH.REGISTER.PASSWORD' | translate: { Default: 'Password' } }}</z-form-label>
          <input
            z-input
            type="password"
            name="password"
            id="password"
            formControlName="password"
            autocomplete="new-password"
            required
            [placeholder]="'XP.KEY_WORDS.EnterPassword' | translate: { Default: 'Enter password' }"
          />
          @if (password.hasError('minlength') && password.dirty) {
            <z-form-message zType="error">
              {{ 'Auth.SSO_REGISTER.PASSWORD_MIN_LENGTH' | translate: { Default: 'Use at least 6 characters.' } }}
            </z-form-message>
          }
        </z-form-field>

        <div class="my-1 h-1 overflow-hidden rounded-full bg-background-default-subtle">
          <div
            class="h-full transition-all duration-300"
            [style.width.%]="passwordProgressMap[status]?.progress ?? 0"
            [ngClass]="
              passwordProgressMap[status]?.color === 'warn'
                ? 'bg-[var(--color-status-warning-indicator-bg)]'
                : 'bg-[var(--color-status-success-indicator-bg)]'
            "
          ></div>
        </div>

        <z-form-field appearance="fill" floatLabel="always" class="w-full">
          <z-form-label>{{
            'AUTH.REGISTER.CONFIRM_PASSWORD' | translate: { Default: 'Confirm Password' }
          }}</z-form-label>
          <input
            z-input
            type="password"
            name="confirm_password"
            id="confirm_password"
            formControlName="confirm"
            autocomplete="new-password"
            required
            [placeholder]="'XP.KEY_WORDS.ConfirmPassword' | translate: { Default: 'Confirm password' }"
          />
          @if (mismatch) {
            <z-form-message zType="error">{{ 'Auth.Mismatch' | translate: { Default: 'Mismatch' } }}</z-form-message>
          }
        </z-form-field>
      } @else {
    <div>
      <label for="email" class="block mb-2 text-base font-medium text-text-primary">
        {{ 'AUTH.REGISTER.EMAIL' | translate: { Default: 'Email' } }}
      </label>
      <input
        type="email"
        name="email"
        id="email"
        formControlName="email"
        class="xp-input w-full text-text-primary"
        [placeholder]="'AUTH.REGISTER.EMAIL' | translate: { Default: 'Email' }"
      />
    </div>

    <div>
      <label for="password" class="block mb-2 text-base font-medium text-text-primary">
        {{ 'AUTH.REGISTER.PASSWORD' | translate: { Default: 'Password' } }}
      </label>
      <input
        type="password"
        name="password"
        id="password"
        formControlName="password"
        class="xp-input w-full text-text-primary"
        [placeholder]="'XP.KEY_WORDS.EnterPassword' | translate: { Default: 'Enter password' }"
      />
      <div class="my-2 h-1 bg-background-default-subtle rounded-full overflow-hidden">
        <div
          class="h-full transition-all duration-300"
          [style.width.%]="passwordProgressMap[status]?.progress ?? 0"
          [ngClass]="
            passwordProgressMap[status]?.color === 'warn'
              ? 'bg-[var(--color-status-warning-indicator-bg)]'
              : 'bg-[var(--color-status-success-indicator-bg)]'
          "
        ></div>
      </div>
    </div>

    <div>
      <label for="confirm_password" class="block mb-2 text-base font-medium text-text-primary">
        {{ 'AUTH.REGISTER.CONFIRM_PASSWORD' | translate: { Default: 'Confirm Password' } }}
      </label>
      <input
        type="password"
        name="confirm_password"
        id="confirm_password"
        formControlName="confirm"
        class="xp-input w-full text-text-primary"
        [placeholder]="'XP.KEY_WORDS.ConfirmPassword' | translate: { Default: 'Confirm password' }"
      />

      @if (mismatch) {
        <span class="text-text-destructive text-sm mt-1 block">{{
          'Auth.Mismatch' | translate: { Default: 'Mismatch' }
        }}</span>
      }
    </div>
      }

    @if (referralEnabled) {
        @if (verifiedEmailSignup) {
          <z-form-field appearance="fill" floatLabel="always" class="w-full">
            <z-form-label>
              {{ 'XP.Referral.ReferralCode' | translate: { Default: 'Invitation code (optional)' } }}
            </z-form-label>
            <input
              z-input
              type="text"
              name="referral_code"
              id="referral_code"
              formControlName="referralCode"
              class="w-full uppercase"
              maxlength="10"
              autocomplete="off"
              [placeholder]="'XP.Referral.ReferralCodePlaceholder' | translate: { Default: 'Enter invitation code' }"
            />
            @if (referralValidationLoading) {
              <z-form-message>
                {{ 'XP.Referral.ValidatingReferralCode' | translate: { Default: 'Validating...' } }}
              </z-form-message>
            } @else if (referralCode.hasError('invalidReferralCode')) {
              <z-form-message zType="error">
                {{ 'XP.Referral.InvalidReferralCode' | translate: { Default: 'The invitation code is invalid.' } }}
              </z-form-message>
            } @else if (referralValid) {
              <z-form-message>
                {{ 'XP.Referral.ValidReferralCode' | translate: { Default: 'Invitation code is valid.' } }}
              </z-form-message>
            }
          </z-form-field>
        } @else {
      <div>
        <label for="referral_code" class="block mb-2 text-base font-medium text-text-primary">
          {{ 'XP.Referral.ReferralCode' | translate: { Default: 'Invitation code (optional)' } }}
        </label>
        <input
          z-input
          type="text"
          name="referral_code"
          id="referral_code"
          formControlName="referralCode"
          class="w-full uppercase"
          maxlength="10"
          autocomplete="off"
          [placeholder]="'XP.Referral.ReferralCodePlaceholder' | translate: { Default: 'Enter invitation code' }"
        />
        @if (referralValidationLoading) {
          <span class="text-text-secondary text-sm mt-1 block">
            {{ 'XP.Referral.ValidatingReferralCode' | translate: { Default: 'Validating...' } }}
          </span>
        } @else if (referralCode.hasError('invalidReferralCode')) {
          <span class="text-text-destructive text-sm mt-1 block">
            {{ 'XP.Referral.InvalidReferralCode' | translate: { Default: 'The invitation code is invalid.' } }}
          </span>
        } @else if (referralValid) {
          <span class="text-text-success text-sm mt-1 block">
            {{ 'XP.Referral.ValidReferralCode' | translate: { Default: 'Invitation code is valid.' } }}
          </span>
        }
      </div>
    }
      }

      @if (verifiedEmailSignup) {
        <div class="mt-2 flex flex-col gap-3">
          <button
            z-button
            zFull
            type="submit"
            class="h-10 text-sm font-medium"
            [zLoading]="submitted"
            [disabled]="
              form.invalid || loading || submitted || referralAvailabilityLoading || referralValidationLoading
            "
          >
            {{ 'Auth.SSO_REGISTER.SUBMIT' | translate: { Default: 'Complete Registration and Sign In' } }}
          </button>

          <button
            z-button
            zFull
            zType="outline"
            type="button"
            class="h-10 text-sm font-medium"
            (click)="navigateToLogin()"
          >
            {{ 'Auth.SSO_REGISTER.BACK_TO_LOGIN' | translate: { Default: 'Back to Sign In' } }}
          </button>
        </div>
      } @else {
    <div class="flex justify-between items-center p-1">
      <button
        type="submit"
        class="btn disabled:btn-disabled btn-primary btn-medium mb-2"
            [disabled]="
              form.invalid || loading || submitted || referralAvailabilityLoading || referralValidationLoading
            "
      >
        {{ 'AUTH.REGISTER.SUBMIT' | translate: { Default: 'Submit' } }}
      </button>

      <a class="text-[var(--sys-primary)] hover:underline" routerLink="/auth/login">{{
        'AUTH.REGISTER.SIGN-IN' | translate: { Default: 'Sign-in' }
      }}</a>
    </div>
      }
  </div>
</form>
}