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

<mat-toolbar>
        <div class="md-toolbar-tools">
            <h2>Add a new Widget</h2>
            <span fxFlex></span>
            <button mat-icon-button (click)="onCancel()">
                <i class="material-icons">close</i>
            </button>
        </div>
    </mat-toolbar>
    <mat-divider></mat-divider>
    <div mat-dialog-content class="md-dialog-content">
        <div fxFlex="100">
            <div fxFlex="100" style="margin:5px;width:100%">
                <div *ngIf="page == 'select-pipeline'">
                    <h4>{{pages[0].description}}</h4>
                    <mat-grid-list
                            [cols]="3" [rowHeight]="200"
                            [gutterSize]="100">

                        <mat-grid-tile class="gray" *ngFor="let opt of visualizablePipelines">
                            <div [ngClass]="getSelectedPipelineCss(opt.doc)"
                                 (click)="selectPipeline(opt.doc)">
                                {{iconText(opt.doc.name)}}
                                <h5>{{opt.doc.name}}</h5>
                            </div>
                        </mat-grid-tile>
                    </mat-grid-list>
                </div>

                <!-- Select Type -->
                <div *ngIf="page == 'select-measurement'" fxLayout="column">
                    <h4>{{pages[1].description}}</h4>
                    <div fxFlex="100" layout="column">
                        <mat-radio-group fxLayout="column" class="example-radio-group"
                                         [(ngModel)]="selectedMeasurement">
                            <mat-radio-button class="example-radio-button"
                                              *ngFor="let prop of selectedVisualization.schema.eventProperties"
                                              [value]="prop.properties.runtimeName">
                                {{prop.properties.runtimeName}}
                            </mat-radio-button>
                        </mat-radio-group>
                    </div>
                </div>

                <!-- Select Scheme -->
                <div *ngIf="page == 'select-label'" fxLayout="column">
                    <b><h4>{{pages[2].description}}</h4></b>
                    <div fxFlex="100" fxLayout="column">
                        <mat-form-field appearance="outline" style="margin-bottom: 10px;">
                            <mat-label>Label</mat-label>
                            <input matInput placeholder="Label" [(ngModel)]="selectedLabel" value="Label">
                            <mat-hint>Enter the label that will identify the measurement</mat-hint>
                        </mat-form-field>
                        <div fxLayout="row" class="element-margin">
                            <mat-label fxFlex="50">Label Background Color</mat-label>
                            <input [(colorPicker)]="selectedLabelBackgroundColor"
                                   [style.background]="selectedLabelBackgroundColor"/>
                        </div>
                        <div fxLayout="row" class="element-margin">
                            <mat-label fxFlex="50">Label Text Color</mat-label>
                            <input [(colorPicker)]="selectedLabelTextColor"
                                   [style.background]="selectedLabelTextColor"/>
                        </div>
                        <div fxLayout="row" class="element-margin">
                            <mat-label fxFlex="50">Measurement Value Background Color</mat-label>
                            <input [(colorPicker)]="selectedMeasurementBackgroundColor"
                                   [style.background]="selectedMeasurementBackgroundColor"/>
                        </div>
                        <div fxLayout="row" class="element-margin">
                            <mat-label fxFlex="50">Measurement Value Text Color</mat-label>
                            <input [(colorPicker)]="selectedMeasurementTextColor"
                                   [style.background]="selectedMeasurementTextColor"/>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
    <mat-divider></mat-divider>
    <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
        <button mat-button mat-raised-button class="mat-basic" (click)="onCancel()">
            Cancel
        </button>
        <button mat-button mat-raised-button class="mat-basic" (click)="back()" *ngIf="!('select-pipeline'===page)">
            Back
        </button>
        <button mat-button mat-raised-button color="primary" (click)="next()">
            Next
        </button>
    </div>


