<div class="d-flex justify-content-center tabs-container">
  <sm-navbar-item header="info" [active]="activeTab==='info'" (click)="activeTab = 'info'" class="small-nav"></sm-navbar-item>
  <sm-navbar-item header="queues" [active]="activeTab==='queues'" (click)="activeTab = 'queues'" class="small-nav"></sm-navbar-item>
  <div class="close pointer" (click)="deselectWorkerClicked()">
    <i class="al-icon al-ico-dialog-x sm-md"></i>
  </div>
</div>
<div *ngIf="activeTab === 'queues' &&  selectedWorker?.queues.length===0"
     class="empty-state">No queues currently assigned to this worker
</div>
<div class="queues-table-container" *ngIf="activeTab==='queues' && selectedWorker?.queues.length>0">
  <sm-simple-table-2 [cols]="cols" [rowsData]="selectedWorker?.queues" class="dark-theme">
    <ng-template let-col let-i="rowIndex" let-row="row">
      <div class="body">
        <!--QUEUE-->
        <div class="id-cell d-flex">
          <a class="value link ellipsis"
             [routerLink]="['../queues']"
             [queryParams]="{id: row.id}"
             [smTooltip]="row?.name"
             [matTooltipShowDelay]="500"
             smShowTooltipIfEllipsis>{{row?.name}}</a>
          <sm-copy-clipboard
            class="copy-btn"
            [hideBackground]="true"
            [label]="''"
            [tooltipText]="'Copy Queue ID'"
            [clipboardText]="row?.id">
          </sm-copy-clipboard>
        </div>

        <!--NEXT EXPERIMENT-->
        <div class="ellipsis" [smTooltip]="row?.next_task?.name" [matTooltipShowDelay]="500" smShowTooltipIfEllipsis>{{row?.next_task?.name}}</div>

        <!--IN QUEUE-->
        <div>{{row?.num_tasks}}</div>
      </div>
    </ng-template>
  </sm-simple-table-2>
</div>

<div *ngIf="activeTab==='info'" class="worker-info-container">
  <div class="info-column">
    <sm-vertical-labeled-row label="Worker Name" [tooltip]="selectedWorker?.name">{{selectedWorker?.name ?? '—' }}</sm-vertical-labeled-row>
    <sm-vertical-labeled-row label="Update Time">{{selectedWorker?.last_report_time | timeAgo}}</sm-vertical-labeled-row>
    <sm-vertical-labeled-row label="Current Experiment" [tooltip]="selectedWorker?.task?.name">
      <a *ngIf="selectedWorker?.task?.name ; else notRelevant" [href]="'/projects/'+ ((selectedWorker?.task?.project?.id) ? selectedWorker?.task?.project?.id : '*') + '/experiments/' + selectedWorker?.task?.id"
         target="_blank">{{selectedWorker?.task?.name}}</a>
      <ng-template #notRelevant>—</ng-template>
    </sm-vertical-labeled-row>
  </div>
  <div class="info-column">
    <sm-vertical-labeled-row label="Experiment Run Time">{{selectedWorker?.task?.running_time ? (selectedWorker?.task?.running_time  | durationFormater:'ms':'ddhhmmss') : '—'}}</sm-vertical-labeled-row>
    <sm-vertical-labeled-row label="Experiment Iteration">{{selectedWorker?.task?.last_iteration ? selectedWorker?.task?.last_iteration : '—'}}</sm-vertical-labeled-row>
  </div>
</div>

