@if (!showCreationStep) {
  <section class="login-container">
    <div class="login-wrapper">
      <!-- Step 1: Email and Code Input -->
      @if (!showWorkspaceSelection && !showCreationStep && !showAccountCreation) {
        <ga-workspace-header
          title="WORKSPACES.CREATE.TITLE"
          subtitle="WORKSPACES.CREATE.SUBTITLE"
          (close)="closeWindow()"
        ></ga-workspace-header>
        <ga-email-code-form
          [form]="form"
          [isLoading]="isLoading"
          [isCodeSent]="isCodeSent"
          [isCodeResent]="isCodeResent"
          [countdown]="countdown"
          [showForgotEmailLink]="false"
          successSentCodeTitle="WORKSPACES.CREATE.SUCCESS_SENT_CODE_TITLE"
          successSentCodeSubTitle="WORKSPACES.CREATE.SUCCESS_SENT_CODE_SUB_TITLE"
          (sendCode)="sendSigninCode()"
          (resendCode)="onResendCode()"
          (submitForm)="confirmSignInCode()"
          (editEmail)="onEditEmail()"
        ></ga-email-code-form>
      }
      <!-- Step 2: Workspace Selection -->
      @if (showWorkspaceSelection) {
        <ga-workspace-header (close)="closeWindow()"></ga-workspace-header>
        <ga-workspace-selection
          [workspaces]="workspaces"
          [confirmedEmail]="confirmedEmail"
          [totalWorkspaces]="totalWorkspaces"
          [showCreateButton]="true"
          (workspaceSelected)="signInWorkspace($event)"
          (createWorkspace)="continueToCreation()"
        ></ga-workspace-selection>
      }
      <!-- Step 3: Account Creation -->
      @if (showAccountCreation) {
        <ga-workspace-header
          title="WORKSPACE_CREATE.ACCOUNT_CREATION.TITLE"
          subtitle="WORKSPACE_CREATE.ACCOUNT_CREATION.SUBTITLE"
          (close)="closeWindow()"
        ></ga-workspace-header>
        <div class="creation-content">
          <form [formGroup]="accountForm" (ngSubmit)="continueToWorkspaceCreation()">
            <!-- Full Name -->
            <div class="form-group">
              <label for="fullName">{{ 'REGISTER_PAGE.PLACEHOLDERS.FULL_NAME' | translate }}</label>
              <input
                id="fullName"
                type="text"
                nbInput
                fullWidth
                formControlName="fullName"
                [placeholder]="'REGISTER_PAGE.PLACEHOLDERS.FULL_NAME' | translate"
                [status]="fullName.dirty ? (fullName.invalid ? 'danger' : 'success') : 'basic'"
                autocomplete="name"
                [attr.aria-invalid]="fullName.invalid && fullName.touched ? true : null"
                />
                @if (fullName.invalid && fullName.touched) {
                  <div class="error-message">
                    @if (fullName.errors?.required) {
                      <span>
                        {{ 'REGISTER_PAGE.VALIDATIONS.FULL_NAME_REQUIRED' | translate }}
                      </span>
                    }
                  </div>
                }
              </div>
              <!-- Password -->
              <div class="form-group">
                <label for="password">{{ 'REGISTER_PAGE.LABELS.PASSWORD' | translate }}</label>
                <nb-form-field>
                  <input
                    id="password"
                    [type]="showPassword ? 'text' : 'password'"
                    nbInput
                    fullWidth
                    formControlName="password"
                    [placeholder]="'REGISTER_PAGE.PLACEHOLDERS.PASSWORD' | translate"
                    [status]="password.dirty ? (password.invalid ? 'danger' : 'success') : 'basic'"
                    autocomplete="new-password"
                    />
                    <a nbSuffix nbButton size="small" ghost (click)="showPassword = !showPassword">
                      <nb-icon
                        pack="eva"
                        [icon]="showPassword ? 'eye-outline' : 'eye-off-outline'"
                        [attr.aria-label]="showPassword ? 'hide password' : 'show password'"
                      ></nb-icon>
                    </a>
                  </nb-form-field>
                  @if (password.invalid && password.touched) {
                    <div class="error-message">
                      @if (password.errors?.required) {
                        <span>
                          {{ 'REGISTER_PAGE.VALIDATIONS.PASSWORD_REQUIRED' | translate }}
                        </span>
                      }
                      @if (password.errors?.minlength) {
                        <span>
                          {{ 'REGISTER_PAGE.VALIDATIONS.PASSWORD_MIN_LENGTH' | translate }}
                        </span>
                      }
                    </div>
                  }
                </div>
                <!-- Confirm Password -->
                <div class="form-group">
                  <label for="confirmPassword">{{ 'REGISTER_PAGE.LABELS.CONFIRM_PASSWORD' | translate }}</label>
                  <nb-form-field>
                    <input
                      id="confirmPassword"
                      [type]="showConfirmPassword ? 'text' : 'password'"
                      nbInput
                      fullWidth
                      formControlName="confirmPassword"
                      [placeholder]="'REGISTER_PAGE.PLACEHOLDERS.CONFIRM_PASSWORD' | translate"
                      [status]="confirmPassword.dirty ? (confirmPassword.invalid || accountForm.errors?.['mustMatch'] ? 'danger' : 'success') : 'basic'"
                      autocomplete="confirm-password"
                      />
                      <a
                        nbSuffix
                        nbButton
                        size="small"
                        ghost
                        (click)="showConfirmPassword = !showConfirmPassword"
                        >
                        <nb-icon
                          pack="eva"
                          [icon]="showConfirmPassword ? 'eye-outline' : 'eye-off-outline'"
                          [attr.aria-label]="showConfirmPassword ? 'hide password' : 'show password'"
                        ></nb-icon>
                      </a>
                    </nb-form-field>
                    @if (confirmPassword.invalid && confirmPassword.touched) {
                      <div class="error-message">
                        @if (confirmPassword.errors?.required) {
                          <span>
                            {{ 'REGISTER_PAGE.VALIDATIONS.CONFIRM_PASSWORD_REQUIRED' | translate }}
                          </span>
                        }
                      </div>
                    }
                    @if (accountForm.errors?.['mustMatch'] && confirmPassword.touched) {
                      <div class="error-message">
                        {{ 'REGISTER_PAGE.VALIDATIONS.PASSWORDS_NOT_MATCH' | translate }}
                      </div>
                    }
                  </div>
                  <!-- Submit Button -->
                  <div class="submit-btn-wrapper">
                    <button
                      type="submit"
                      nbButton
                      status="primary"
                      size="medium"
                      class="submit-btn"
                      [disabled]="accountForm.invalid || isLoading"
                      >
                      {{ 'BUTTONS.CONTINUE' | translate }}
                    </button>
                  </div>
                </form>
              </div>
            }
          </div>
        </section>
      }

      @if (showCreationStep) {
        <section class="workspace-creation-container">
          <ga-workspace-header
            title="WORKSPACE_CREATE.WORKSPACE_SETUP.TITLE"
            subtitle="WORKSPACE_CREATE.WORKSPACE_SETUP.SUBTITLE"
            (close)="closeWindow()"
          ></ga-workspace-header>
          <div class="creation-content">
            <ga-organizations-step-form
              [loading]="isLoading"
              [isOnboarding]="true"
              (createOrganization)="onboardUser($event)"
            ></ga-organizations-step-form>
          </div>
        </section>
      }