<h1>Users</h1>

<mat-table [dataSource]="dataSubject" class="mat-elevation-z2">
  <ng-container matColumnDef="username">
    <mat-header-cell *matHeaderCellDef>Username</mat-header-cell>
    <mat-cell *matCellDef="let user">{{ user.username }}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="roles">
    <mat-header-cell class="d-none d-md-flex" *matHeaderCellDef
      >Roles</mat-header-cell
    >
    <mat-cell class="d-none d-md-flex" *matCellDef="let user">
      <mat-chip-list aria-label="User Roles">
        <mat-chip
          [disableRipple]="true"
          [disabled]="true"
          *ngIf="isSystem(user)"
        >
          System
        </mat-chip>
        <mat-chip
          [disableRipple]="true"
          *ngFor="let role of user.roles.slice(0, rolesTruncate)"
        >
          {{ role }}
        </mat-chip>
        <mat-chip
          [disableRipple]="true"
          *ngIf="user.roles.length > rolesTruncate"
        >
          +{{ user.roles.length - rolesTruncate }}
        </mat-chip>
      </mat-chip-list>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="actions">
    <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
    <mat-cell *matCellDef="let user">
      <button mat-icon-button (click)="editUser(user)">
        <mat-icon fontSet="material-icons-outlined" aria-label="Edit">
          edit
        </mat-icon>
      </button>
      <button
        *ngIf="!isSystem(user)"
        mat-icon-button
        (click)="deleteUser(user)"
      >
        <mat-icon
          fontSet="material-icons-outlined"
          class="icon-red"
          aria-label="Delete"
        >
          delete
        </mat-icon>
      </button>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns"> </mat-row>
</mat-table>

<mat-paginator
  color="accent"
  class="mat-elevation-z2"
  [pageSizeOptions]="pageSizeOptions"
  [pageSize]="startingPageSize"
  [hidePageSize]="bootstrapService.isMobile() | async"
  [length]="totalUsers"
  aria-label="Select page of users"
  (page)="updateSubject.next($event)"
>
</mat-paginator>

<fab
  aria-label="Add User"
  (click)="addUser()"
  icon="person_add"
  tooltip="Create a new user"
></fab>
