@if (dataSource) {
  <cnsl-refresh-table
    (refreshed)="changePage()"
    [timestamp]="dataSource.viewTimestamp"
    [hideRefresh]="true"
    [selection]="selection"
    [loading]="dataSource.loading$ | async"
  >
    @if (selection.hasValue()) {
      <ng-container actions>
        <ng-content select="[selectactions]"></ng-content>
      </ng-container>
    }
    <div actions>
      <ng-content select="[writeactions]"></ng-content>
    </div>
    <div class="table-wrapper">
      <table mat-table class="table" aria-label="Elements" [dataSource]="dataSource">
        <ng-container matColumnDef="select">
          <th mat-header-cell *matHeaderCellDef>
            <div class="selection">
              <mat-checkbox
                [disabled]="false"
                color="primary"
                (change)="$event ? masterToggle() : null"
                [checked]="selection.hasValue() && isAllSelected()"
                [indeterminate]="selection.hasValue() && !isAllSelected()"
              >
              </mat-checkbox>
            </div>
          </th>
          <td mat-cell *matCellDef="let row">
            <div class="selection">
              <mat-checkbox
                [disabled]="false"
                color="primary"
                (click)="$event.stopPropagation()"
                (change)="$event ? selection.toggle(row) : null"
                [checked]="selection.isSelected(row)"
              >
              </mat-checkbox>
            </div>
          </td>
        </ng-container>
        <ng-container matColumnDef="displayName">
          <th mat-header-cell *matHeaderCellDef>{{ 'USER.MEMBERSHIPS.DISPLAYNAME' | translate }}</th>
          <td mat-cell *matCellDef="let membership">
            {{ membership.displayName }}
          </td>
        </ng-container>
        <ng-container matColumnDef="type">
          <th mat-header-cell *matHeaderCellDef>{{ 'USER.MEMBERSHIPS.TYPE' | translate }}</th>
          <td mat-cell *matCellDef="let membership">
            <span class="state">{{ getType(membership) }}</span>
          </td>
        </ng-container>
        <ng-container matColumnDef="orgId">
          <th mat-header-cell *matHeaderCellDef>{{ 'USER.MEMBERSHIPS.ORGID' | translate }}</th>
          <td mat-cell *matCellDef="let membership">
            {{ membership.orgId }}
          </td>
        </ng-container>
        <ng-container matColumnDef="rolesList">
          <th mat-header-cell *matHeaderCellDef class="role-row">{{ 'ROLESLABEL' | translate }}</th>
          <td mat-cell *matCellDef="let membership">
            <div class="membership-line">
              <mat-chip-listbox class="cnsl-chip-list" aria-label="role selection">
                @for (role of membership.rolesList; track role) {
                  <mat-chip-option
                    [selectable]="false"
                    class="cnsl-chip"
                    [removable]="!!userId"
                    (removed)="removeRole(membership, role)"
                  >
                    <div class="cnsl-chip-content">
                      <div class="cnsl-chip-dot" [style.background]="getColor(role)"></div>
                      <span>{{ role | roletransform }}</span>
                      @if (!!userId) {
                        <button matChipRemove>
                          <mat-icon>cancel</mat-icon>
                        </button>
                      }
                    </div>
                  </mat-chip-option>
                }
              </mat-chip-listbox>
              <button
                matTooltip="{{ 'ACTIONS.EDIT' | translate }}"
                (click)="goto(membership)"
                mat-icon-button
                class="goto-btn"
              >
                <mat-icon>navigate_next</mat-icon>
              </button>
            </div>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      </table>
    </div>
    @if (dataSource) {
      <cnsl-paginator
        class="paginator"
        #paginator
        [timestamp]="dataSource.viewTimestamp"
        [pageSize]="INITIALPAGESIZE"
        [length]="dataSource.totalResult"
        [pageSizeOptions]="[25, 50, 100, 250]"
        (page)="changePage($event)"
      >
      </cnsl-paginator>
    }
  </cnsl-refresh-table>
}