@if ((useV2Api$ | async) === true) {
  <cnsl-user-create-v2 />
}
@if ((useV2Api$ | async) === false) {
  <cnsl-create-layout
    title="{{ 'USER.CREATE.TITLE' | translate }}"
    [createSteps]="1"
    [currentCreateStep]="1"
    (closed)="location.back()"
  >
    <div class="user-create-main-content">
      @if (loading) {
        <mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
      }
      @if (pwdForm$ | async; as pwdForm) {
        <form [formGroup]="userForm" (ngSubmit)="createUser(pwdForm)" class="user-create-form">
          <div class="user-create-content">
            <p class="user-create-section">{{ 'USER.CREATE.NAMEANDEMAILSECTION' | translate }}</p>
            <div class="user-create-grid">
              <cnsl-form-field>
                <cnsl-label>{{ 'USER.PROFILE.EMAIL' | translate }}</cnsl-label>
                <input cnslInput matRipple formControlName="email" required />
              </cnsl-form-field>
              <cnsl-form-field>
                <cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}</cnsl-label>
                @if (suffixPadding$ | async; as suffixPadding) {
                  <input cnslInput formControlName="userName" required [ngStyle]="{ 'padding-right': suffixPadding }" />
                }
                @if (envSuffix$ | async; as envSuffix) {
                  <span #suffix cnslSuffix>{{ envSuffix }}</span>
                }
              </cnsl-form-field>
              <cnsl-form-field>
                <cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}</cnsl-label>
                <input cnslInput formControlName="firstName" required />
              </cnsl-form-field>
              <cnsl-form-field>
                <cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}</cnsl-label>
                <input cnslInput formControlName="lastName" required />
              </cnsl-form-field>
              <cnsl-form-field>
                <cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
                <input cnslInput formControlName="nickName" />
              </cnsl-form-field>
            </div>
            <div class="email-is-verified">
              <mat-checkbox class="block-checkbox" formControlName="emailVerified">
                {{ 'USER.LOGINMETHODS.EMAIL.ISVERIFIED' | translate }}
              </mat-checkbox>
              <mat-checkbox class="block-checkbox" [(ngModel)]="usePassword" [ngModelOptions]="{ standalone: true }">
                {{ 'ORG.PAGES.USEPASSWORD' | translate }}
              </mat-checkbox>
              <cnsl-info-section class="full-width desc">
                <span>{{ 'USER.CREATE.INITMAILDESCRIPTION' | translate }}</span>
              </cnsl-info-section>
            </div>
            @if (usePassword && (passwordComplexityPolicy$ | async); as passwordComplexityPolicy) {
              <div class="pwd-section">
                <cnsl-password-complexity-view
                  class="complexity-view"
                  [policy]="passwordComplexityPolicy"
                  [password]="pwdForm.controls.password"
                >
                </cnsl-password-complexity-view>
                <form [formGroup]="pwdForm">
                  <div class="user-create-grid">
                    <cnsl-form-field>
                      <cnsl-label>{{ 'USER.PASSWORD.NEWINITIAL' | translate }}</cnsl-label>
                      <input cnslInput autocomplete="off" name="firstpassword" formControlName="password" type="password" />
                    </cnsl-form-field>
                    <cnsl-form-field>
                      <cnsl-label>{{ 'USER.PASSWORD.CONFIRMINITIAL' | translate }}</cnsl-label>
                      <input
                        cnslInput
                        autocomplete="off"
                        name="confirmPassword"
                        formControlName="confirmPassword"
                        type="password"
                      />
                    </cnsl-form-field>
                  </div>
                </form>
              </div>
            }
            <p class="user-create-section">{{ 'USER.CREATE.GENDERLANGSECTION' | translate }}</p>
            <div class="user-create-grid">
              <cnsl-form-field>
                <cnsl-label>{{ 'USER.PROFILE.GENDER' | translate }}</cnsl-label>
                <mat-select formControlName="gender">
                  @for (gender of genders; track gender) {
                    <mat-option [value]="gender">
                      {{ 'GENDERS.' + gender | translate }}
                    </mat-option>
                  }
                </mat-select>
              </cnsl-form-field>
              <cnsl-form-field>
                <cnsl-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</cnsl-label>
                <mat-select formControlName="preferredLanguage">
                  @for (language of langSvc.supported$ | async; track language) {
                    <mat-option [value]="language">
                      {{ 'LANGUAGES.' + language | translate }}
                    </mat-option>
                  }
                </mat-select>
              </cnsl-form-field>
            </div>
            <p class="user-create-section">{{ 'USER.CREATE.ADDRESSANDPHONESECTION' | translate }}</p>
            <div class="phone-grid">
              <cnsl-form-field class="phone-country">
                <cnsl-label>{{ 'USER.PROFILE.COUNTRY' | translate }}</cnsl-label>
                <mat-select
                  [(value)]="selected"
                  [compareWith]="compareCountries"
                  (selectionChange)="setCountryCallingCode()"
                  data-cy="country-calling-code"
                >
                  <mat-select-trigger>
                    <span class="fi fi-{{ selected?.countryCode | lowercase }}"></span>
                    <span class="trigger-name">{{ selected?.countryName }}</span>
                  </mat-select-trigger>
                  @for (country of countryPhoneCodes; track country) {
                    <mat-option class="phone-country-option" [value]="country">
                      <span class="phone-country-row">
                        <span class="phone-country-flag fi fi-{{ country.countryCode | lowercase }}"></span>
                        <span class="phone-country-name">{{ country.countryName }}</span>
                        <span class="fill-space"></span>
                        <small class="phone-country-code">+{{ country.countryCallingCode }}</small>
                      </span>
                    </mat-option>
                  }
                </mat-select>
              </cnsl-form-field>
              <cnsl-form-field>
                <cnsl-label>{{ 'USER.PROFILE.PHONE' | translate }}</cnsl-label>
                <input cnslInput formControlName="phone" matTooltip="{{ 'USER.PROFILE.PHONE_HINT' | translate }}" />
              </cnsl-form-field>
            </div>
          </div>
          <div class="user-create-btn-container">
            <button
              data-e2e="create-button"
              color="primary"
              [disabled]="userForm.invalid || (usePassword && pwdForm.invalid)"
              type="submit"
              class="create-button"
              mat-raised-button
            >
              {{ 'ACTIONS.CREATE' | translate }}
            </button>
          </div>
        </form>
      }
    </div>
  </cnsl-create-layout>
}