<div class="p-t-16 p-l-16 p-r-16 m-b-0">
  <div class="d-flex a-i-center">
    <label
      class="m-b-0 d-flex a-i-center gap-4"
      [title]="'Preview`of exported file`' | translate"
    >
      {{ 'Preview`of exported file`' | translate }}
      <button
        class="btn-help"
        [attr.aria-label]="'Help' | translate"
        [popover]="popoverPreviewTemplate"
        placement="right"
        triggers="focus"
        container="body"
        type="button"
        [adaptivePosition]="true"
      ></button>
      <ng-template #popoverPreviewTemplate>
        <span translate>
          <p>The preview shows the structure of the raw file from a single source.</p>
          <p>If no data is available, only the column headers are visible.</p>
          <p>
            The preview is limited to
            <b>{{ MEASUREMENTS_PREVIEW_ITEMS_LIMIT }}</b>
            records.
          </p>
        </span>
      </ng-template>
    </label>
  </div>
  <div
    class="table-responsive"
    style="min-height: 275px"
  >
    <table class="table">
      <thead>
        <tr>
          <th>{{ 'Time' | translate }}</th>
          <th>{{ 'Source' | translate }}</th>
          <th>{{ 'Device name' | translate }}</th>
          <th>
            {{ 'Fragment and series' | translate }}
          </th>
          <th>{{ 'Value' | translate }}</th>
          <th>{{ 'Unit' | translate }}</th>
        </tr>
      </thead>
      <ng-container *ngIf="hasFetchedDataAnyValuesToExport || isPreviewLoading; else emptyState">
        <ng-container *ngIf="!isPreviewLoading; else loading">
          <tbody>
            <tr *ngFor="let row of previewTableData">
              <td>{{ row.time }}</td>
              <td>{{ row.source }}</td>
              <td>{{ row.device_name }}</td>
              <td>
                {{ row.fragment_series }}
              </td>
              <td>{{ row.value }}</td>
              <td>{{ row.unit }}</td>
            </tr>
          </tbody>
        </ng-container>
      </ng-container>
      <ng-template #emptyState>
        <tbody>
          <tr>
            <td colspan="8">
              <div class="d-col a-i-center">
                <c8y-ui-empty-state
                  [icon]="'search'"
                  [title]="'No data available.' | translate"
                  [horizontal]="true"
                  data-cy="datapoints-table-list--empty-state"
                ></c8y-ui-empty-state>
              </div>
            </td>
          </tr>
        </tbody>
      </ng-template>
      <ng-template #loading>
        <tbody>
          <tr>
            <td colspan="8">
              <c8y-loading></c8y-loading>
            </td>
          </tr>
        </tbody>
      </ng-template>
    </table>
  </div>
</div>