<!--
  ~ 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 class="widget-content">
    <div class="widget-inner-options" style="margin-left: 0;margin-right: 0;margin-top: 0;">
        <div fxFlex="100" layout="row" fxLayoutAlign="start center" style="margin-left: 0px;margin-right: 0px;">
            <mat-form-field appearance="standard" class="form-field-margin form-field-size-smaller" style="margin-right: 5px;">
                <mat-label><mat-icon>search</mat-icon><span>&nbsp;Search</span></mat-label>
                <input matInput (input)="onFilterChange($event.target.value)" >
            </mat-form-field>

            <sp-select-properties
                    label="Select Columns"
                    multiple = true
                    (changeSelectedProperties)="setSelectedColumn($event)"
                    [availableProperties]="availableColumns"
                    [selectedProperties]="selectedColumns">
            </sp-select-properties>
        </div>
    </div>
    <div class="widget-inner-content" style="overflow-y: auto;">
<!--    <div style=" overflow-y: auto;" [style.max-height.px]="gridsterItem.rows * 100 - 40">-->

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

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

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

            <ng-container
                    *ngFor="let element of this.selectedColumns"
                    [cdkColumnDef]="element.runtimeName">
                <div *ngIf="!isTimestamp(element)">
                    <th mat-header-cell mat-sort-header *matHeaderCellDef mat-sort-header><label class="column-header">{{element.runtimeName}}</label></th>
                    <td mat-cell *matCellDef="let row"style="text-align: center;">{{row[element.runtimeName]}}</td>
                </div>
                <div *ngIf="isTimestamp(element)">
                    <th mat-header-cell mat-sort-header *matHeaderCellDef mat-sort-header><label class="column-header">{{element.runtimeName}}</label></th>
                    <td mat-cell  *matCellDef="let row"style="text-align: left;">{{row[element.runtimeName]| date:'yyyy-MM-dd HH:mm:ss'}}</td>
                </div>
            </ng-container>

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

        </table>
    </div>

</div>
