<ng-container *ngIf="snapshotHistoryResult$ | async"></ng-container>
<ng-container *ngIf="downloadSnapshotResult$ | async"></ng-container>

<kendo-window [width]="800 | winWidth" [height]="500 | winHeight" [minHeight]="300" [minWidth]="800" (close)="closedClicked()" [keepContent]="true">
  <kendo-window-titlebar>
    <div class="row-g">
      <div class="rowItem-lc rightBuffer">Snapshot History</div>
      <div class="rowItem-g"></div>
      <div class="k-window-titlebar-actions">
        <button kendoWindowMinimizeAction></button>
        <button kendoWindowMaximizeAction></button>
        <button kendoWindowRestoreAction></button>
        <button kendoWindowCloseAction></button>
      </div>
    </div>
  </kendo-window-titlebar>
  <div>
    <div class="col-g">
      <div class="rowItem-g">
        <label class="t-text-color1 noWrap">
          <strong>Pipe:</strong> {{pipeName}}
        </label>
      </div>
      <div class="rowItem-g">
        <label class="t-text-color1 noWrap">
          <strong>Date:</strong> {{ nomDate() | date: 'MM/dd/yyyy' }}
        </label>
      </div>
    </div>
  </div>
  <ng-template #tooltipGridTemplate let-anchor>
    <div *ngFor="let text of util.getTableCellTooltipText(anchor.nativeElement)">
      <div>{{text}}</div>
    </div>
  </ng-template>
  <div kendoTooltip #tooltipGrid="kendoTooltip" class="k-widget k-grid" showOn="none" [tooltipTemplate]="tooltipGridTemplate" filter=".k-grid td"
    (mouseover)="util.showGridTooltip($event, tooltipGrid)" position="right">
    <kendo-grid [loading]="snapshotHistoryLoading$ | async" [kendoGridBinding]="(snapshotHistoryResult$ | async)?.snapshots" [sortable]="true"
      [sort]="gridSort">
      <kendo-grid-column field="createdBy" [title]="'Created By'" [width]="30">
      </kendo-grid-column>
      <kendo-grid-column field="createdTime" [title]="'Created'" [width]="30" [format]="'yyyy-MM-dd hh:mm:ss a'">
      </kendo-grid-column>
      <kendo-grid-column field="notes" [title]="'Notes'" [width]="60">
      </kendo-grid-column>
      <kendo-grid-column class="centerCell excelLink" [title]="'File'" [width]="10">
        <ng-template kendoGridCellTemplate let-dataItem>
          <div (click)="downloadSnapshot(dataItem)">
            <kendo-svg-icon [icon]="icons.fileExcelIcon"></kendo-svg-icon>
          </div>
        </ng-template>
      </kendo-grid-column>
    </kendo-grid>
  </div>
  <hr />
  <div class="colItem bottomSection">
    <div class="row">
      <div class="rowItem-g"></div>
      <div class="rowItem-r">
        <button type="button" class="k-button button-md" (click)="closedClicked()">
          <kendo-svg-icon [icon]="icons.cancelIcon" />Close
        </button>
      </div>
    </div>
  </div>
</kendo-window>