<table mat-table
       *ngIf="dataSource"
       [dataSource]="dataSource"
       [trackBy]="tableTrackerFn"
       class="ya-data-table">

  <ng-container matColumnDef="order">
    <th mat-header-cell *matHeaderCellDef style="width: 1px">#</th>
    <td mat-cell *matCellDef="let queue">
      {{ queue.order }}
    </td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef style="width: 200px">Name</th>
    <td mat-cell *matCellDef="let queue">
      {{ queue.name }}
    </td>
  </ng-container>

  <ng-container matColumnDef="issuer">
    <th mat-header-cell *matHeaderCellDef style="width: 200px">Issuer</th>
    <td mat-cell *matCellDef="let queue">
      <app-label *ngFor="let group of queue.groups" icon="people">{{ group }}</app-label>
      <app-label *ngFor="let user of queue.users" icon="person">{{ user }}</app-label>
      <ng-container *ngIf="!queue.groups && !queue.users">-</ng-container>
    </td>
  </ng-container>

  <ng-container matColumnDef="level">
    <th mat-header-cell *matHeaderCellDef style="width: 100px">Min.&nbsp;level</th>
    <td mat-cell *matCellDef="let queue">
      <app-significance-level [level]="queue.minLevel" [grayscale]="true">
      </app-significance-level>
    </td>
  </ng-container>

  <ng-container matColumnDef="action">
    <th mat-header-cell *matHeaderCellDef style="width: 100px">Action</th>
    <td mat-cell *matCellDef="let queue">
      <span *ngIf="queue.state === 'ENABLED'">
        ACCEPT
      </span>
      <span *ngIf="queue.state === 'BLOCKED'" [style.visibility]="(visibility$ | async) ? 'visible' : 'hidden'">
        HOLD
      </span>
      <span *ngIf="queue.state === 'DISABLED'">
        REJECT
      </span>
    </td>
  </ng-container>

  <ng-container matColumnDef="pending">
    <th mat-header-cell *matHeaderCellDef width="1">Pending</th>
    <td mat-cell *matCellDef="let queue" style="text-align: center">
      {{ (queue.entry?.length || 0) | number }}
    </td>
  </ng-container>

  <ng-container matColumnDef="actions">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let queue">
      <mat-menu #queueMenu="matMenu" overlapTrigger="false" class="ya-menu">
        <button mat-menu-item
                [matMenuTriggerFor]="actions">
          Change action
        </button>
      </mat-menu>

      <mat-menu #actions="matMenu" class="ya-menu">
        <button mat-menu-item
                (click)="enableQueue(queue)">
          <mat-icon>check</mat-icon>
          ACCEPT
        </button>
        <button mat-menu-item
                (click)="blockQueue(queue)">
          <mat-icon>pause</mat-icon>
          HOLD
        </button>
        <button mat-menu-item
                (click)="disableQueue(queue)">
          <mat-icon>close</mat-icon>
          REJECT
        </button>
      </mat-menu>

      <button mat-button
              [matMenuTriggerFor]="queueMenu"
              class="icon"
              (click)="$event.stopPropagation()">
        <mat-icon>more_vert</mat-icon>
      </button>
    </td>
  </ng-container>

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