<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!-- Timezone selector -->
<div class="timezone-selector">
  <label>Timezone:</label>
  <nz-select
    [(ngModel)]="selectedTimezone"
    nzSize="small"
    nzShowSearch
    [nzPlaceHolder]="'Select Timezone'"
    style="width: 300px"
  >
    <nz-option
      *ngFor="let option of timezoneOptions"
      [nzLabel]="option.label"
      [nzValue]="option.value"
      nzCustomContent
    >
      <span [title]="option.label">{{ option.label }}</span>
    </nz-option>
  </nz-select>
</div>

<nz-table
  class="no-border small full-height"
  nzSize="small"
  [nzLoading]="isLoading"
  [nzData]="listOfWaterMark"
  [nzScroll]="{ y: 'calc( 100% - 36px )' }"
  [nzFrontPagination]="false"
  [nzShowPagination]="false"
  [nzVirtualItemSize]="virtualItemSize"
  [nzVirtualMinBufferPx]="300"
  [nzVirtualMaxBufferPx]="300"
  [nzVirtualForTrackBy]="trackBySubtaskIndex"
>
  <thead>
    <tr>
      <th nzWidth="20%">SubTask</th>
      <th nzWidth="40%" [nzSortFn]="sortWatermark">Watermark</th>
      <th nzWidth="40%" [nzSortFn]="sortWatermark">
        Datetime of Watermark Timestamp
        <i
          class="header-icon"
          nz-icon
          nz-tooltip
          nzTooltipTitle="This column shows the datetime that is parsed from watermark timestamp. You can select the desired timezone from the dropdown above."
          nzType="info-circle"
        ></i>
      </th>
    </tr>
  </thead>
  <tbody>
    <ng-template nz-virtual-scroll let-data>
      <ng-container *ngIf="narrowLogData(data) as watermark">
        <tr>
          <td>{{ watermark.subTaskIndex }}</td>
          <td>{{ watermark.watermark | humanizeWatermark }}</td>
          <td>{{ watermark.watermark | humanizeWatermarkToDatetime: selectedTimezone }}</td>
        </tr>
      </ng-container>
    </ng-template>
  </tbody>
</nz-table>
