<div class="row my-3 mx-2 no-gutters align-items-center">
  <div class="col-auto page-form">

    <div class="form-row p-2 pb-0 align-items-center">
      <div class="col-auto pl-3"><b>Queue</b>:</div>
      <div class="btn-group col-auto" ngbDropdown>
        <button class="btn btn-light btn-sm" type="button" id="page-select" ngbDropdownToggle>
          {{ filters['JOB_QUEUE'].label }}</button>
        <ul ngbDropdownMenu>
          <li ngbDropdownItem *ngFor="let q of queues" class="p-0">
            <button type="button" class="btn btn-link w-100 text-left" (click)="setQueue(q)">{{q.label}}</button>
          </li>
        </ul>
      </div>
      <div class="col-auto pl-4"><b>Status</b>:</div>
      <div class="btn-group col-auto" ngbDropdown>
        <button class="btn btn-light btn-sm" type="button" ngbDropdownToggle>
          {{ filters['JOB_STATUS'] }}</button>
        <ul ngbDropdownMenu>
          <li ngbDropdownItem *ngFor="let s of statuses" class="p-0">
            <button type="button" class="btn btn-link w-100 text-left" (click)="setStatus(s)">{{s}}</button>
          </li>
        </ul>
      </div>
      <form (ngSubmit)="getJobs()" class="form-inline col-auto pl-4" [formGroup]="formGroup">
        <div class="form-group">
          <input type="text" class="form-control" id="pattern" placeholder="Pattern" formControlName="pattern">
        </div>
      </form>
    </div>
  </div>
  <div class="col">
  </div>
</div>

<ng-container *ngIf="jobs; else loading">
  <div class="row no-gutters mx-1">
    <div class="col-1 px-2 py-3 thead_th">Id</div>
    <div class="col px-2 py-3 thead_th">
      <b>Name</b><br/>
      SDM ID
    </div>
    <div class="col px-2 py-3 thead_th">Creation Date</div>
    <div class="col-1 px-2 py-3 thead_th">Status</div>
    <div class="col-auto px-2 py-3 thead_th" *ngIf="canDeleteJobs">&nbsp;</div>
  </div>
  <ng-container *ngFor="let job of jobs">
    <app-jobspec [job]="job" [canDeleteJob]="canDeleteJobs" (refreshJobs)="getJobs()"></app-jobspec>
  </ng-container>

</ng-container>

<ng-template #loading>
  <app-loading></app-loading>
</ng-template>