<div #tableContainer class="queues-container">
  <sm-queues-menu-extended
    [menuOpen]="menuOpen"
    [menuPosition]="menuPosition"
    [selectedQueue]="contextQueue"
    (deleteQueue)="deleteQueue.emit($event)"
    (renameQueue)="renameQueue.emit($event)"
    (clearQueue)="clearQueue.emit($event)"
  ></sm-queues-menu-extended>
  <sm-table #table
            [tableData]="queues"
            [columns]="cols"
            [rowsNumber]="100"
            [rowHeight]="40"
            [reorderableColumns]="false"
            [resizableColumns]="false"
            [scrollable]="true"
            [selection]="selectedQueue"
            (rowSelectionChanged)="onRowClicked($event)"
            (rowRightClick)="openContextMenu($event)"
  >
    <ng-template let-col pTemplate="sort-filter">
      <sm-table-filter-sort-template
        [class.first]="col.id === QUEUES_TABLE_COL_FIELDS.NAME"
        (sortOrderChanged)="onSortChanged($event, col.id)"
        [column]="col"
        [sortOrder]="tableSortFieldsObject[col.id]">
      </sm-table-filter-sort-template>
    </ng-template>
    <ng-template let-col let-queue="rowData" pTemplate="body">
      <ng-container [ngSwitch]="col.id" class="table-cell">
        <div class="w-100 d-flex align-items-center first id-cell" *ngSwitchCase="QUEUES_TABLE_COL_FIELDS.NAME">
          <div class="queue-name" [smTooltip]="queue?.name" smShowTooltipIfEllipsis>{{queue?.name}}</div>
          <sm-copy-clipboard [clipboardText]="queue?.id"
                             [hideBackground]="true"
                             [label]="''"
                             [tooltipText]="'Copy Queue ID'" class="copy-btn"></sm-copy-clipboard>
        </div>
        <ng-container *ngSwitchCase="QUEUES_TABLE_COL_FIELDS.TASK">
          <span class="ellipsis"  [smTooltip]="queue?.entries[0]?.task?.name" smShowTooltipIfEllipsis>{{queue?.entries[0]?.task?.name}}</span>
          <span *ngIf="!queue?.entries[0]?.task?.name">&mdash;</span>
        </ng-container>
        <ng-container *ngSwitchCase="QUEUES_TABLE_COL_FIELDS.LAST_UPDATED">
          <span class="ellipsis">{{queue?.last_update | timeAgo}}</span>
          <span *ngIf="!queue?.last_update">&mdash;</span>
        </ng-container>
        <ng-container *ngSwitchCase="QUEUES_TABLE_COL_FIELDS.IN_QUEUE">
          <span class="ellipsis">{{queue?.entries?.length === 0 ? '' : queue?.entries?.length}}</span>
          <span *ngIf="queue?.entries?.length === 0">&mdash;</span>
        </ng-container>
        <ng-container *ngSwitchDefault>
          <span class="ellipsis">{{getBodyData(queue, col)}}</span>
        </ng-container>
      </ng-container>
    </ng-template>
  </sm-table>
</div>
