@if (profile$ | async; as profile) {
  <form [formGroup]="profileForm" (ngSubmit)="submitForm(profile)">
    <div class="user-top-content">
      <div class="user-form-content">
        <button
          [disabled]="disabled$ | async"
          class="camera-wrapper"
          type="button"
          (click)="showEditImage ? openUploadDialog(profile) : null"
        >
          @if (showEditImage) {
            <div class="i-wrapper">
              <i class="las la-camera"></i>
            </div>
          }
          @if (profile.displayName) {
            <cnsl-avatar
              class="avatar"
              [name]="profile.displayName"
              [avatarUrl]="profile.avatarUrl || ''"
              [forColor]="preferredLoginName"
              [size]="80"
            >
            </cnsl-avatar>
          }
        </button>
        <div class="usernamediv">
          <cnsl-form-field class="formfield">
            <cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}</cnsl-label>
            <input cnslInput formControlName="username" />
          </cnsl-form-field>
          <button [disabled]="disabled$ | async" type="button" mat-stroked-button class="edit" (click)="changeUsername()">
            {{ 'USER.PROFILE.CHANGEUSERNAME' | translate }}
          </button>
        </div>
      </div>
      <div class="user-grid">
        <cnsl-form-field class="formfield">
          <cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}</cnsl-label>
          <input cnslInput formControlName="givenName" />
        </cnsl-form-field>
        <cnsl-form-field class="formfield">
          <cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}</cnsl-label>
          <input cnslInput formControlName="familyName" />
        </cnsl-form-field>
        <cnsl-form-field class="formfield">
          <cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
          <input cnslInput formControlName="nickName" />
        </cnsl-form-field>
        <cnsl-form-field class="formfield">
          <cnsl-label>{{ 'USER.PROFILE.DISPLAYNAME' | translate }}</cnsl-label>
          <input cnslInput formControlName="displayName" />
        </cnsl-form-field>
        <cnsl-form-field class="formfield">
          <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 class="formfield">
          <cnsl-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</cnsl-label>
          <mat-select formControlName="preferredLanguage">
            @for (language of languages; track language) {
              <mat-option [value]="language">
                {{ 'LANGUAGES.' + language | translate }}
              </mat-option>
            }
          </mat-select>
        </cnsl-form-field>
      </div>
    </div>
    <div class="btn-container">
      <button [disabled]="disabled$ | async" class="submit-button" type="submit" color="primary" mat-raised-button>
        {{ 'ACTIONS.SAVE' | translate }}
      </button>
    </div>
  </form>
}