<!--
  ~ 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.
  -->

<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 with local time zone. Note that the time zone is obtained through your browser. "
          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 }}</td>
        </tr>
      </ng-container>
    </ng-template>
  </tbody>
</nz-table>
