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

<div fxLayout="column" fxFlex="100"
     [ngStyle]="{background: dataExplorerWidget.baseAppearanceConfig.backgroundColor, color: dataExplorerWidget.baseAppearanceConfig.textColor}">

    <sp-load-data-spinner *ngIf="showIsLoadingData" class="h-100"></sp-load-data-spinner>

    <sp-no-data-in-date-range *ngIf="showNoDataInDateRange" [viewDateRange]="timeSettings"></sp-no-data-in-date-range>

    <sp-too-much-data
            [amountOfEvents]="amountOfTooMuchEvents"
            (loadDataWithTooManyEventsEmitter)="loadDataWithTooManyEvents()"
            *ngIf="showTooMuchData"
            ></sp-too-much-data>

    <div class="table-container">
        <table
                mat-table
                mat-sort
                *ngIf="showData"
                [dataSource]="dataSource" matSort
                (matSortChange)="sortData($event)" class="table-widget">

            <ng-container
                    [cdkColumnDef]="'time'">
                <div>
                    <th mat-header-cell mat-sort-header *matHeaderCellDef
                        [ngStyle]="{background: dataExplorerWidget.baseAppearanceConfig.backgroundColor, color: dataExplorerWidget.baseAppearanceConfig.textColor}">
                        <label class="column-header">Timestamp</label>
                    </th>
                    <td mat-cell
                        data-cy="data-explorer-table-row-timestamp"
                        *matCellDef="let row" style="text-align: left;">
                        {{row['time'] | date:'yyyy-MM-dd HH:mm:ss.SSS'}}
                    </td>
                </div>
            </ng-container>

            <ng-container
                    *ngFor="let element of dataExplorerWidget.visualizationConfig.selectedColumns"
                    [cdkColumnDef]="element.fullDbName">
                <div *ngIf="!isTimestamp(element)">
                    <th mat-header-cell mat-sort-header *matHeaderCellDef
                        [ngStyle]="{background: dataExplorerWidget.baseAppearanceConfig.backgroundColor, color: dataExplorerWidget.baseAppearanceConfig.textColor}">
                        <label class="column-header">{{element.fullDbName}}</label>
                    </th>
                    <td mat-cell *matCellDef="let row"
                        [attr.data-cy]="'data-explorer-table-row-'+ element.fullDbName"
                        style="text-align: left;">
                        {{row[element.fullDbName]}}
                    </td>
                </div>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="columnNames; sticky: true"></tr>
            <tr mat-row *matRowDef="let row; columns: columnNames;"></tr>

        </table>
    </div>
</div>
