@if (user$ | async; as user) {
  <div class="accounts-card">
    <cnsl-avatar
      (click)="editUserProfile()"
      class="avatar"
      [ngClass]="{ 'iam-user': iamuser }"
      [forColor]="user.preferredLoginName"
      [avatarUrl]="user.human?.profile?.avatarUrl || ''"
      [name]="user.human?.profile?.displayName ?? ''"
      [size]="80"
    >
    </cnsl-avatar>
    <span class="u-name">{{ user?.human?.profile?.displayName ? user?.human?.profile?.displayName : 'A' }}</span>
    @if (user?.preferredLoginName) {
      <span class="u-email">{{ user?.preferredLoginName }}</span>
    }
    <button (click)="editUserProfile()" mat-stroked-button>{{ 'USER.EDITACCOUNT' | translate }}</button>
    <div class="l-accounts">
      @if ((sessions$ | async) === null) {
        <mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
      }
      @for (session of sessions$ | async; track session) {
        <a class="row" (click)="selectAccount(session.loginName)">
          @if (session && session.displayName) {
            <cnsl-avatar
              class="small-avatar"
              [avatarUrl]="session.avatarUrl || ''"
              [name]="session.displayName"
              [forColor]="session.loginName"
              [size]="32"
            >
            </cnsl-avatar>
          }
          <div class="col">
            <span class="user-title">{{ session.displayName ? session.displayName : session.userName }} </span>
            <span class="loginname">{{ session.loginName }}</span>
            @if ($any(session.authState) === UserState.USER_STATE_INACTIVE) {
              <span class="state inactive">{{ 'USER.STATE.' + session.authState | translate }}</span>
            }
          </div>
          <mat-icon>keyboard_arrow_right</mat-icon>
        </a>
      }
      <a class="row" (click)="selectNewAccount()">
        <div class="icon-wrapper">
          <i class="las la-user-plus"></i>
        </div>
        <span class="col">
          <span class="user-title">{{ 'USER.ADDACCOUNT' | translate }}</span>
        </span>
        <mat-icon>keyboard_arrow_right</mat-icon>
      </a>
    </div>
    <button (click)="logout()" color="warn" mat-stroked-button>{{ 'MENU.LOGOUT' | translate }}</button>
  </div>
}