<div *ngIf="showSummary" @vslider>
  <app-progress></app-progress>
</div>

<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" ngbDropdown>
        <button class="btn btn-light btn-sm" type="button" id="page-select" ngbDropdownToggle>
          {{ getEpochName(epoch) }}</button>
        <ul ngbDropdownMenu>
          <li ngbDropdownItem>
            <button type="button" class="btn btn-link w-100 p-0 text-left" (click)="setEpoch(-1)">Tests</button>
          </li>
          <li ngbDropdownItem>
            <button type="button" class="btn btn-link w-100 p-0 text-left" (click)="setEpoch(0)">Pilot</button>
          </li>
          <li ngbDropdownItem>
            <button type="button" class="btn btn-link w-100 p-0 text-left" (click)="setEpoch(1)">Epoch 1</button>
          </li>
          <li ngbDropdownItem>
            <button type="button" class="btn btn-link w-100 p-0 text-left" (click)="setEpoch(2)">Epoch 2</button>
          </li>
          <li ngbDropdownItem>
            <button type="button" class="btn btn-link w-100 p-0 text-left" (click)="setEpoch(3)">Epoch 3</button>
          </li>
        </ul>
      </div>
      <form (ngSubmit)="getMinitilesForEpoch()" 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" ngbDropdown>
        <button class="btn btn-light btn-sm" type="button" id="sort-select" ngbDropdownToggle>
          {{ getPrettyName(filters['TILE_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" 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>
  </div>
  <div class="col"></div>
  <div class="col-auto mr-2">
    <button type="button" class="btn btn-sm btn-success" (click)="showSummary = !showSummary">
      Summary
    </button>
  </div>
  <div class="col-auto text-right">
    <button type="button" class="btn btn-danger btn-sm" (click)="updateSummary()">
      <fa-icon [icon]="faSyncAlt"></fa-icon>
      Update
    </button>
  </div>
</div>

<ng-container *ngIf="tiles; 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">RA (deg)</div>
    <div class="col px-2 py-3 thead_th">Dec (deg)</div>
    <div class="col-1 px-2 py-3 thead_th">Epoch</div>
    <div class="col-1 px-2 py-3 thead_th">Date</div>
    <div class="col-2 px-2 py-3 thead_th">Status</div>
  </div>
  <ng-container *ngFor="let tile of tiles">
    <app-tile [tile]="tile"></app-tile>
  </ng-container>

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