<!--
~ 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>{{dialogTitle}}</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-list>
                        <mat-list-item *ngFor="let dataSet of visualizableData"
                                       (click)="selectPipeline(dataSet)" class="list-item">
                            <div mat-list-avatar
                                 class="pipeline-avatar sp-accent-bg">{{iconText(dataSet.measureName)}}
                            </div>
                            <h4 mat-line>{{dataSet.measureName}}</h4>
                        </mat-list-item>
                    </mat-list>
                </div>

                <!-- Select Type -->
                <div *ngIf="page == 'select-widget'" fxLayout="column">
                    <h4>{{pages[1].description}}</h4>
                    <mat-list>
                        <mat-list-item *ngFor="let widget of availableWidgets"
                                       (click)="selectWidget(widget.id)" class="list-item">
                            <div mat-list-avatar
                                 class="pipeline-avatar sp-accent-bg">
                                <span>{{iconText(widget.label)}}</span>
                            </div>
                            <h4 mat-line>{{widget.label}}</h4>
                        </mat-list-item>
                    </mat-list>
                </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))
        && !(data)">
            Back
        </button>
        <button mat-button mat-raised-button color="primary" (click)="next()">
            <span *ngIf="!data && 'configure-widget' === page">Create</span>
            <span *ngIf="data && 'configure-widget' === page">Save</span>
            <span *ngIf="data == null && !('configure-widget' === page)">Next</span>
        </button>
    </div>


