<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>Epoch</b>:</div>
      <div class="btn-group col-auto" ngbDropdown>
        <button class="btn btn-light btn-sm" type="button" id="epoch-select" ngbDropdownToggle>
          {{ filters['EPOCH'].name }}</button>
        <ul id="epoch-select-list" ngbDropdownMenu>
          <li ngbDropdownItem *ngFor="let e of epochs" class="p-0">
            <button type="button" class="btn btn-link w-100 text-left" (click)="setEpoch(e)">{{e.name}}</button>
          </li>
        </ul>
      </div>
      <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" 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 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 class="col-auto pl-3"><b>Sort By</b>:</div>
      <div class="btn-group col-auto" ngbDropdown>
        <button class="btn btn-light btn-sm" type="button" id="sort-select" ngbDropdownToggle>
          {{ getPrettyName(filters['JOB_SORT']) }}</button>
        <ul ngbDropdownMenu>
          <li ngbDropdownItem *ngFor="let col of sortColumns">
            <button type="button" class="btn btn-link w-100 p-0 text-left" (click)="setSortColumn(col)">{{getPrettyName(col)}}</button>
          </li>
        </ul>
      </div>
      <div class="btn-group col-auto" ngbDropdown>
        <button class="btn btn-light btn-sm" type="button" id="sort-direction" ngbDropdownToggle>
          {{ filters['SORT_DIRECTION'] }}</button>
        <ul ngbDropdownMenu>
          <li ngbDropdownItem *ngFor="let direction of sortDirections">
            <button type="button" class="btn btn-link w-100 p-0 text-left" (click)="setSortDirection(direction)">{{direction}}</button>
          </li>
        </ul>
      </div>
      <div class="col-auto">
        <button class="btn btn-sm btn-info" (click)="getPageInfoAndJob()"><fa-icon [icon]="faSyncAlt"></fa-icon> </button>
      </div>
    </div>
  </div>

  <div class="col text-nowrap">
    <p class="text-danger text-right p-2 m-0">{{ ((currentPage - 1) * resultsPerPage) + 1 }}
      - {{ currentPage * resultsPerPage < numResults ? currentPage * resultsPerPage : numResults}}
      of {{ numResults }}</p>
  </div>
  <div class="col-auto">

    <div class="form-group m-0">
      <div class="btn-group">
        <button id="to-first-page" class="btn btn-danger btn-sm" (click)="goToPage(1)">
          <fa-icon [icon]="faFastBackward"></fa-icon>
        </button>
        <button id="back-one-page" class="btn btn-danger btn-sm" (click)="goToPage(currentPage-1)">
          <fa-icon [icon]="faStepBackward"></fa-icon>
        </button>
        <div class="btn-group" ngbDropdown>
          <button class="btn btn-danger btn-sm" type="button" id="page-select" ngbDropdownToggle>
            Page {{currentPage}}</button>
          <ul style="height: 200px; overflow-y: scroll;" ngbDropdownMenu>
            <li ngbDropdownItem *ngFor="let p of getPages(); let i = index" class="p-0">
              <button type="button" class="btn btn-link w-100 text-left" (click)="goToPage(i+1)">Page {{i + 1}}</button>
            </li>
          </ul>
        </div>
        <button id="forward-one-page" class="btn btn-danger btn-sm" (click)="goToPage(currentPage+1)">
          <fa-icon [icon]="faStepForward"></fa-icon>
        </button>
        <button id="to-last-page" class="btn btn-danger btn-sm" (click)="goToPage(pages)">
          <fa-icon [icon]="faFastForward"></fa-icon>
        </button>
      </div>
    </div>
  </div>
</div>

<div class="row pb-2">
  <div class="col"></div>
  <form class="col-auto form-inline text-right" [formGroup]="alertThresholdForm">
    <span class="text-warning ml-4 mr-2"><fa-icon [icon]="faExclamationTriangle"></fa-icon></span>
    after <input type="number" min="1" class="form-control form-control-sm mx-2 w-25" formControlName="threshold"/> days
  </form>
</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">Name</div>
    <div class="col px-2 py-3 thead_th">Dates</div>
    <div class="col-2 px-2 py-3 thead_th">Status</div>
    <div class="col-1 px-2 py-3 thead_th">Archive Status</div>
  </div>
  <ng-container *ngFor="let job of jobs">
    <app-execution-job [job]="job" [queue]="filters['JOB_QUEUE']" [alertThresholdDays]="alertAfterDays"
                       (reload)="getJobs(currentPage)"></app-execution-job>
  </ng-container>

</ng-container>

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