@if (user$ | async; as userQuery) {
  @if ((userQuery.state === 'success' || userQuery.state === 'loading') && userQuery.value; as user) {
    <cnsl-top-view
      title="{{ user.type.case === 'human' ? user.type.value.profile?.displayName : user.type.value?.name }}"
      docLink="https://zitadel.com/docs/guides/manage/console/users-overview"
      sub="{{ user.preferredLoginName }}"
      [isActive]="user.state === UserState.ACTIVE"
      [isInactive]="user.state === UserState.INACTIVE"
      stateTooltip="{{ 'USER.STATE.' + user.state | translate }}"
      (backClicked)="navigateBack()"
      [hasActions]="['user.write$', 'user.write:' + user.userId] | hasRole | async"
    >
      <ng-template topActions cnslHasRole [hasRole]="['user.write$', 'user.write:' + user.userId]">
        @if (user.type.case === 'machine') {
          <button mat-menu-item color="warn" (click)="generateMachineSecret(user)">
            {{ 'USER.PAGES.GENERATESECRET' | translate }}
          </button>
          @if (user.type.value.hasSecret) {
            <button mat-menu-item color="warn" (click)="removeMachineSecret(user)">
              {{ 'USER.PAGES.REMOVESECRET' | translate }}
            </button>
          }
        }
        @if (user?.state === UserState.LOCKED) {
          <button mat-menu-item color="warn" (click)="unlockUser(user)">
            {{ 'USER.PAGES.UNLOCK' | translate }}
          </button>
        }
        @if (user.state === UserState.ACTIVE) {
          <button mat-menu-item (click)="changeState(user, UserState.INACTIVE)">
            {{ 'USER.PAGES.DEACTIVATE' | translate }}
          </button>
        }
        @if (user.state === UserState.INACTIVE) {
          <button mat-menu-item (click)="changeState(user, UserState.ACTIVE)">
            {{ 'USER.PAGES.REACTIVATE' | translate }}
          </button>
        }
        <ng-template cnslHasRole [hasRole]="['user.delete$', 'user.delete:' + user.userId]">
          <button mat-menu-item matTooltip="{{ 'USER.PAGES.DELETE' | translate }}" (click)="deleteUser(user)">
            <span [style.color]="'var(--warn)'">{{ 'USER.PAGES.DELETE' | translate }}</span>
          </button>
        </ng-template>
      </ng-template>
      <cnsl-info-row topContent [user]="user" [loginPolicy]="(loginPolicy$ | async) ?? undefined"></cnsl-info-row>
    </cnsl-top-view>
  }
  @if (userQuery.state === 'loading') {
    <div class="max-width-container">
      <div class="sp-wrapper">
        <mat-progress-spinner diameter="25" color="primary" mode="indeterminate"></mat-progress-spinner>
      </div>
    </div>
  }
  @if (userQuery.state === 'notfound') {
    <div class="max-width-container">
      <p class="no-user-error">{{ 'USER.PAGES.NOUSER' | translate }}</p>
    </div>
  }
  @if ((userQuery.state === 'success' || userQuery.state === 'loading') && userQuery.value; as user) {
    @if (['user.write$', 'user.write:' + user.userId] | hasRole; as canWrite$) {
      <div class="max-width-container">
        <cnsl-meta-layout>
          @if (settingsList$ | async; as settingsList) {
            <cnsl-sidenav
              [setting]="currentSetting$()"
              (settingChange)="currentSetting$.set($event)"
              [settingsList]="settingsList"
            >
              <div class="max-width-container">
                @if (user?.state === UserState.LOCKED) {
                  <cnsl-info-section class="locked" [type]="InfoSectionType.WARN">
                    {{ 'USER.PAGES.LOCKEDDESCRIPTION' | translate }}</cnsl-info-section
                  >
                }
                @if (user && user.state === UserState.INITIAL) {
                  <div>
                    <cnsl-info-section class="is-initial-info-section" [type]="InfoSectionType.ALERT">
                      <div class="is-initial-row">
                        <span>{{ 'USER.ISINITIAL' | translate }}</span>
                        <button
                          [disabled]="(canWrite$ | async) === false"
                          mat-stroked-button
                          (click)="resendInitEmail(user)"
                        >
                          {{ 'USER.RESENDINITIALEMAIL' | translate }}
                        </button>
                      </div>
                    </cnsl-info-section>
                  </div>
                }
                @if (currentSetting$().id === 'general') {
                  @if (humanUser(user); as user) {
                    <ng-template cnslHasRole [hasRole]="['user.read$', 'user.read:' + user.userId]">
                      @if (user.type.value.profile; as profile) {
                        <cnsl-card title="{{ user.preferredLoginName }} - {{ 'USER.PROFILE.TITLE' | translate }}">
                          <cnsl-detail-form
                            [preferredLoginName]="user.preferredLoginName"
                            [disabled]="(canWrite$ | async) === false"
                            [genders]="genders"
                            [languages]="(langSvc.supported$ | async) || []"
                            [username]="user.username"
                            [profile]="profile"
                            (submitData)="saveProfile(user, $event)"
                            (changeUsernameClicked)="changeUsername(user)"
                          >
                          </cnsl-detail-form>
                        </cnsl-card>
                      }
                      <cnsl-card
                        title="{{ 'USER.LOGINMETHODS.TITLE' | translate }}"
                        description="{{ 'USER.LOGINMETHODS.DESCRIPTION' | translate }}"
                      >
                        <button
                          card-actions
                          class="icon-button"
                          mat-icon-button
                          (click)="refreshChanges$.emit()"
                          matTooltip="{{ 'ACTIONS.REFRESH' | translate }}"
                        >
                          <mat-icon class="icon">refresh</mat-icon>
                        </button>
                        <cnsl-contact
                          [disablePhoneCode]="true"
                          [username]="user.preferredLoginName"
                          [canWrite]="['user.write:' + user.userId, 'user.write$'] | hasRole | async"
                          [human]="user.type.value"
                          (editType)="
                            user.state === UserState.INITIAL && $event === EditDialogType.EMAIL
                              ? resendInitEmail(user)
                              : openEditDialog(user, $event)
                          "
                          (deletedPhone)="deletePhone(user)"
                          (resendEmailVerification)="resendEmailVerification(user)"
                          (resendPhoneVerification)="resendPhoneVerification(user)"
                        >
                          @if (
                            user.state !== UserState.LOCKED &&
                            user.state !== UserState.INACTIVE &&
                            user.state !== UserState.INITIAL
                          ) {
                            <button
                              pwdAction
                              [disabled]="(canWrite$ | async) === false"
                              (click)="sendSetPasswordNotification(user)"
                              mat-stroked-button
                            >
                              {{ 'USER.PASSWORD.RESENDNOTIFICATION' | translate }}
                            </button>
                          }
                        </cnsl-contact>
                      </cnsl-card>
                    </ng-template>
                  }
                }
                @if (currentSetting$().id === 'idp' && user.type.case === 'human' && user.userId) {
                  <cnsl-external-idps [userId]="user.userId" [service]="mgmtService" />
                }
                @if (currentSetting$().id === 'general' && user.type.case === 'machine') {
                  <cnsl-card title="{{ 'USER.MACHINE.TITLE' | translate }}">
                    <cnsl-detail-form-machine
                      [disabled]="(canWrite$ | async) === false"
                      [username]="user.username"
                      [user]="user.type.value"
                      (submitData)="saveMachine(user, $event)"
                    />
                  </cnsl-card>
                }
                @if (currentSetting$().id === 'pat') {
                  <ng-template cnslHasRole [hasRole]="['user.read$', 'user.read:' + user.userId]">
                    @if (user.type.case === 'machine' && user.userId) {
                      <cnsl-card
                        title="{{ 'USER.MACHINE.TOKENSTITLE' | translate }}"
                        description="{{ 'USER.MACHINE.TOKENSDESC' | translate }}"
                      >
                        <cnsl-personal-access-tokens [userId]="user.userId" />
                      </cnsl-card>
                    }
                  </ng-template>
                }
                @if (currentSetting$().id === 'keys') {
                  <ng-template cnslHasRole [hasRole]="['user.read$', 'user.read:' + user.userId]">
                    @if (user.type.case === 'machine' && user.userId) {
                      <cnsl-card
                        title="{{ 'USER.MACHINE.KEYSTITLE' | translate }}"
                        description="{{ 'USER.MACHINE.KEYSDESC' | translate }}"
                      >
                        <cnsl-machine-keys [userId]="user.userId" />
                      </cnsl-card>
                    }
                  </ng-template>
                }
                @if (currentSetting$().id === 'security') {
                  @if (user.type.case === 'human') {
                    <cnsl-card title="{{ 'USER.PASSWORD.TITLE' | translate }}">
                      <div class="contact-method-col">
                        <div class="contact-method-row">
                          <div class="left">
                            <span class="label cnsl-secondary-text">{{ 'USER.PASSWORD.LABEL' | translate }}</span>
                            <span>*********</span>
                            <ng-content select="[pwdAction]"></ng-content>
                          </div>
                          <div class="right">
                            <a
                              matTooltip="{{ 'USER.PASSWORD.SET' | translate }}"
                              [disabled]="(['user.write:' + user.userId, 'user.write$'] | hasRole | async) === false"
                              [routerLink]="['password']"
                              [queryParams]="{ username: user.preferredLoginName }"
                              mat-icon-button
                            >
                              <i class="las la-pen"></i>
                            </a>
                          </div>
                        </div>
                      </div>
                    </cnsl-card>
                  }
                  @if (user.type.case === 'human') {
                    <cnsl-passwordless [user]="user" [disabled]="(canWrite$ | async) === false"> </cnsl-passwordless>
                  }
                  @if (user.type.case === 'human') {
                    <cnsl-user-mfa [user]="user"></cnsl-user-mfa>
                  }
                }
                @if (currentSetting$().id === 'grants') {
                  @if (user.userId) {
                    <cnsl-card
                      title="{{ 'GRANTS.USER.TITLE' | translate }}"
                      description="{{ 'GRANTS.USER.DESCRIPTION' | translate }}"
                    >
                      <cnsl-user-grants
                        [userId]="user.userId"
                        [context]="USERGRANTCONTEXT"
                        [displayedColumns]="[
                          'select',
                          'projectId',
                          'creationDate',
                          'changeDate',
                          'state',
                          'roleNamesList',
                          'actions',
                        ]"
                        [disableWrite]="(['user.grant.write$'] | hasRole | async) === false"
                        [disableDelete]="(['user.grant.delete$'] | hasRole | async) === false"
                      >
                      </cnsl-user-grants>
                    </cnsl-card>
                  }
                }
                @if (currentSetting$().id === 'memberships') {
                  @if (user.userId) {
                    <cnsl-card
                      title="{{ 'USER.MEMBERSHIPS.TITLE' | translate }}"
                      description="{{ 'USER.MEMBERSHIPS.DESCRIPTION' | translate }}"
                    >
                      <cnsl-memberships-table [userId]="user.userId"></cnsl-memberships-table>
                    </cnsl-card>
                  }
                }
                @if (currentSetting$().id === 'metadata' && (metadata$ | async); as metadataQuery) {
                  @if (user.userId && metadataQuery.state !== 'error') {
                    <cnsl-metadata
                      [metadata]="metadataQuery.value"
                      [description]="
                        (user.type.case === 'machine'
                          ? 'DESCRIPTIONS.USERS.MACHINES.METADATA'
                          : 'DESCRIPTIONS.USERS.HUMANS.METADATA'
                        ) | translate
                      "
                      [loading]="metadataQuery.state === 'loading'"
                      [disabled]="(['user.write:' + user.userId, 'user.write'] | hasRole | async) === false"
                      (editClicked)="editMetadata(user, metadataQuery.value)"
                      (refresh)="refreshMetadata$.next(true)"
                    ></cnsl-metadata>
                  }
                }
              </div>
            </cnsl-sidenav>
          }
          <div metainfo>
            <cnsl-changes class="changes" [refresh]="refreshChanges$" [changeType]="ChangeType.USER" [id]="user.userId">
            </cnsl-changes>
          </div>
        </cnsl-meta-layout>
      </div>
    }
  }
}