<!--
  ~ 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 fxFlex="100" fxLayout="column">
    <div fxLayout="row" fxLayoutAlign="start center">
        <span class="data-explorer-header">Fields </span>
        <div fxLayout="row" fxLayoutAlign="start center">
            <button mat-button mat-raised-button color="accent" class="small-button"
                    style="margin-right:10px;"
                    (click)="selectAllFields()">Select all
            </button>
            <button mat-button mat-raised-button class="small-button mat-basic"
                    style="margin-right:10px;"
                    (click)="deselectAllFields()">Deselect all
            </button>
        </div>
    </div>
    <div style="margin-left: 1px; margin-right: 1px;" 
         *ngFor="let field of availableProperties" 
         fxLayout="column"
         class="field-scroll-panel">
        <mat-checkbox color="accent" 
                      [checked]="isSelected(field)" 
                      (change)="toggleFieldSelection(field)">
            <b>{{field.runtimeName}}</b>
            {{'(' + (field.aggregation ? field.aggregation + ', ' : '') + field.measure + ' #' + (field.sourceIndex + 1).toString() + ')'}}
        </mat-checkbox>
        <div fxFlex 
             fxLayoutAlign="end center" 
             *ngIf="isSelected(field)">
             <mat-form-field
                    class="marginColorFieldRight"
                    color="accent"
                    fxFlex="5">
                <input matInput
                        [(colorPicker)]="currentlyConfiguredWidget.visualizationConfig.chosenColor[field.fullDbName + field.sourceIndex.toString()]"
                        [style.background]="currentlyConfiguredWidget.visualizationConfig.chosenColor[field.fullDbName + field.sourceIndex.toString()]"
                        required
                        [cpPosition]="'bottom'"
                        [cpPresetColors]="presetColors"
                        (colorPickerSelect)="triggerDataRefresh()"
                        autocomplete="off"/>
            </mat-form-field>
            <mat-form-field class="marginColorField"
                            color="accent"
                            fxFlex="60">
                <input [(ngModel)]="currentlyConfiguredWidget.visualizationConfig.displayName[field.fullDbName + field.sourceIndex.toString()]"
                       matInput (input)="onFilterChange($event.target.value, field)"/>
            </mat-form-field>
            <mat-form-field class="marginColorField"
                            color="accent"
                            fxFlex="35">
                <mat-select
                        [(value)]="currentlyConfiguredWidget.visualizationConfig.displayType[field.fullDbName + field.sourceIndex.toString()]"
                        (selectionChange)="triggerDataRefresh()">
                    <mat-option [value]="'lines'">Line</mat-option>
                    <mat-option [value]="'normal_markers'">Scatter</mat-option>
                    <mat-option [value]="'lines+markers'">Scattered Line</mat-option>
                    <mat-option [value]="'bar'">Bar</mat-option>
                    <mat-option [value]="'symbol_markers'">Symbol</mat-option>
                </mat-select>
            </mat-form-field>
        </div>
    </div>
    <span class="data-explorer-header">Axis Selection </span>
    <div style="margin-left: 1px; margin-right: 1px;" 
         *ngFor="let field of availableProperties" 
         fxLayout="column"
         class="field-scroll-panel">
         <div fxFlex 
              fxLayoutAlign="start center" 
              *ngIf="isSelected(field)" >
            <b>{{field.runtimeName + ' (' + (field.aggregation ? field.aggregation + ', ' : '') + field.measure + ')'}}</b>
            <mat-form-field color="accent"
                            fxFlex="60"
                            class="marginColorFieldMore">
                <mat-select
                    [(value)]="currentlyConfiguredWidget.visualizationConfig.chosenAxis[field.fullDbName + field.sourceIndex.toString()]"
                    (selectionChange)="triggerDataRefresh()">
                    <mat-option [value]="'left'">Left</mat-option>
                    <mat-option [value]="'right'">Right</mat-option>
                </mat-select>
            </mat-form-field>
        </div>
    </div>
</div>
