@if (userQuery.data(); as authUser) {
  @if (type$ | async; as type) {
    <cnsl-refresh-table
      [loading]="loading()"
      (refreshed)="refresh$.next(true)"
      [hideRefresh]="true"
      [timestamp]="(users$ | async)?.details?.timestamp"
      [selection]="selection"
      [showBorder]="true"
    >
      <div leftActions class="user-toggle-group">
        <cnsl-nav-toggle
          label="{{ 'DESCRIPTIONS.USERS.HUMANS.TITLE' | translate }}"
          (clicked)="setType(Type.HUMAN)"
          [active]="type === Type.HUMAN"
          data-e2e="list-humans"
        ></cnsl-nav-toggle>
        <cnsl-nav-toggle
          label="{{ 'DESCRIPTIONS.USERS.MACHINES.TITLE' | translate }}"
          (clicked)="setType(Type.MACHINE)"
          [active]="type === Type.MACHINE"
          data-e2e="list-machines"
        ></cnsl-nav-toggle>
      </div>
      <p class="user-sub cnsl-secondary-text">
        {{
          (type === Type.HUMAN ? 'DESCRIPTIONS.USERS.HUMANS.DESCRIPTION' : 'DESCRIPTIONS.USERS.MACHINES.DESCRIPTION')
            | translate
        }}
      </p>
      <ng-template cnslHasRole [hasRole]="['user.write']" actions>
        @if (selection.hasValue() && multipleDeactivatePossible) {
          <button
            (click)="deactivateSelectedUsers()"
            class="bg-state inactive"
            mat-raised-button
            [disabled]="(canWrite$ | async) === false"
            color="primary"
          >
            <div class="cnsl-action-button">
              <span class="">{{ 'USER.TABLE.DEACTIVATE' | translate }}</span>
              <cnsl-action-keys (actionTriggered)="deactivateSelectedUsers()" [type]="ActionKeysType.DEACTIVATE">
              </cnsl-action-keys>
            </div>
          </button>
        }
        @if (selection.hasValue() && multipleActivatePossible) {
          <button
            (click)="reactivateSelectedUsers()"
            class="bg-state active margin-left"
            mat-raised-button
            [disabled]="(canWrite$ | async) === false"
            color="primary"
          >
            <div class="cnsl-action-button">
              <span class="">{{ 'USER.TABLE.ACTIVATE' | translate }}</span>
              <cnsl-action-keys (actionTriggered)="reactivateSelectedUsers()" [type]="ActionKeysType.REACTIVATE">
              </cnsl-action-keys>
            </div>
          </button>
        }
      </ng-template>
      @if (!selection.hasValue()) {
        <cnsl-filter-user
          actions
          (filterChanged)="searchQueries$.next($any($event))"
          (filterOpen)="filterOpen = $event"
        ></cnsl-filter-user>
      }
      <ng-template cnslHasRole [hasRole]="['user.write']" actions>
        @if (!selection.hasValue()) {
          <button
            (click)="router.navigate(['/users', type === Type.HUMAN ? 'create' : 'create-machine'])"
            color="primary"
            mat-raised-button
            [disabled]="(canWrite$ | async) === false"
            data-e2e="create-user-button"
          >
            <div class="cnsl-action-button">
              <mat-icon class="icon">add</mat-icon>
              <span>{{ 'ACTIONS.NEW' | translate }}</span>
              @if (!filterOpen) {
                <cnsl-action-keys
                  (actionTriggered)="router.navigate(['/users', type === Type.HUMAN ? 'create' : 'create-machine'])"
                >
                </cnsl-action-keys>
              }
            </div>
          </button>
        }
      </ng-template>
      <div class="table-wrapper">
        <table class="table" mat-table [dataSource]="dataSource" matSort>
          <ng-container matColumnDef="select">
            <th mat-header-cell *matHeaderCellDef>
              <div class="selection">
                <mat-checkbox
                  class="checkbox"
                  [disabled]="(canWrite$ | async) === false"
                  color="primary"
                  (change)="$event ? masterToggle() : null"
                  [checked]="selection.hasValue() && isAllSelected()"
                  [indeterminate]="selection.hasValue() && !isAllSelected()"
                >
                  <cnsl-avatar class="hidden" [isMachine]="true">
                    <i class="las la-robot"></i>
                  </cnsl-avatar>
                </mat-checkbox>
              </div>
            </th>
            <td mat-cell *matCellDef="let user">
              <div class="selection">
                <mat-checkbox
                  class="checkbox"
                  [disabled]="(canWrite$ | async) === false"
                  color="primary"
                  (click)="$event.stopPropagation()"
                  (change)="$event ? selection.toggle(user) : null"
                  [checked]="selection.isSelected(user)"
                >
                  @if (user.type.case === 'human' && user.type.value.profile) {
                    <cnsl-avatar
                      class="avatar"
                      [name]="user.type.value.profile.displayName"
                      [avatarUrl]="user.type.value.profile.avatarUrl || ''"
                      [forColor]="user.preferredLoginName"
                      [size]="32"
                    >
                    </cnsl-avatar>
                  } @else {
                    <cnsl-avatar [forColor]="user?.preferredLoginName" [isMachine]="true">
                      <i class="las la-robot"></i>
                    </cnsl-avatar>
                  }
                </mat-checkbox>
              </div>
            </td>
          </ng-container>
          <ng-container matColumnDef="displayName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
              {{ 'USER.PROFILE.DISPLAYNAME' | translate }}
            </th>
            <td mat-cell *matCellDef="let user" [routerLink]="user.userId ? ['/users', user.userId] : null">
              @if (user.type.case === 'human') {
                <span>{{ user.type.value?.profile?.displayName }}</span>
              }
              @if (user.type.case === 'machine') {
                <span>{{ user.type.value.name }}</span>
              }
            </td>
          </ng-container>
          <ng-container matColumnDef="preferredLoginName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
              {{ 'USER.PROFILE.PREFERREDLOGINNAME' | translate }}
            </th>
            <td mat-cell *matCellDef="let user" [routerLink]="user.userId ? ['/users', user.userId] : null">
              @if (user.type.case === 'human') {
                <span>{{ user.preferredLoginName }}</span>
              }
            </td>
          </ng-container>
          <ng-container matColumnDef="username">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
              {{ 'USER.PROFILE.USERNAME' | translate }}
            </th>
            <td mat-cell *matCellDef="let user" [routerLink]="user.userId ? ['/users', user.userId] : null">
              {{ user.username }}
            </td>
          </ng-container>
          <ng-container matColumnDef="email">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
              {{ 'USER.EMAIL' | translate }}
            </th>
            <td mat-cell *matCellDef="let user" [routerLink]="user.userId ? ['/users', user.userId] : null">
              @if (user.type?.value?.email?.email) {
                <span>{{ user.type.value.email.email }}</span>
              }
            </td>
          </ng-container>
          <ng-container matColumnDef="state">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'USER.DATA.STATE' | translate }}</th>
            <td mat-cell *matCellDef="let user" [routerLink]="user.userId ? ['/users', user.userId] : null">
              <span
                class="state"
                [ngClass]="{
                  active: user.state === UserState.ACTIVE,
                  inactive: user.state === UserState.INACTIVE,
                }"
              >
                {{ 'USER.STATEV2.' + user.state | translate }}
              </span>
            </td>
          </ng-container>
          <ng-container matColumnDef="creationDate">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'USER.TABLE.CREATIONDATE' | translate }}</th>
            <td mat-cell *matCellDef="let user" [routerLink]="user.userId ? ['/users', user.userId] : null">
              <span class="no-break">{{ user.details.creationDate | timestampToDate | localizedDate: 'regular' }}</span>
            </td>
          </ng-container>
          <ng-container matColumnDef="changeDate">
            <th mat-header-cell *matHeaderCellDef>{{ 'USER.TABLE.CHANGEDATE' | translate }}</th>
            <td mat-cell *matCellDef="let user" [routerLink]="user.userId ? ['/users', user.userId] : null">
              <span class="no-break">{{ user.details.changeDate | timestampToDate | localizedDate: 'regular' }}</span>
            </td>
          </ng-container>
          <ng-container matColumnDef="actions" stickyEnd>
            <th mat-header-cell *matHeaderCellDef class="user-tr-actions"></th>
            <td mat-cell *matCellDef="let user" class="user-tr-actions">
              <cnsl-table-actions>
                <button
                  actions
                  matTooltip="{{ 'ACTIONS.REMOVE' | translate }}"
                  color="warn"
                  (click)="deleteUser(user, authUser)"
                  [disabled]="(canWrite$ | async) === false || (canDelete$ | async) === false"
                  [attr.data-e2e]="
                    (canWrite$ | async) === false || (canDelete$ | async) === false
                      ? 'disabled-delete-button'
                      : 'enabled-delete-button'
                  "
                  mat-icon-button
                >
                  <i class="las la-trash"></i>
                </button>
              </cnsl-table-actions>
            </td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="type === Type.HUMAN ? displayedColumnsHuman : displayedColumnsMachine"></tr>
          <tr
            class="highlight pointer"
            mat-row
            *matRowDef="let user; columns: type === Type.HUMAN ? displayedColumnsHuman : displayedColumnsMachine"
          ></tr>
        </table>
      </div>
      @if (!loading() && !dataSource.data.length) {
        <div class="no-content-row">
          <i class="las la-exclamation"></i>
          <span>{{ 'USER.TABLE.EMPTY' | translate }}</span>
        </div>
      }
      <cnsl-paginator
        class="paginator"
        [length]="dataSize()"
        [pageSize]="INITIAL_PAGE_SIZE"
        [timestamp]="(users$ | async)?.details?.timestamp"
        [pageSizeOptions]="[10, 20, 50, 100]"
      ></cnsl-paginator>
      <!--    (page)="changePage($event)"-->
    </cnsl-refresh-table>
  }
}