<!--
  ~ 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 class="pipeline-assembly-options sp-blue-bg">
        <div fxFlex="100" fxLayout="row" fxLayoutAlign="start center">
            <button mat-button matTooltip="Save Pipeline" [matTooltipPosition]="'above'"
                    [disabled]="!PipelineValidationService.pipelineValid"
                    (click)="submit()" type="submit">
                <div fxLayoutAlign="start center" fxLayout="row">
                    <i class="material-icons">save</i>
                    <span>&nbsp;Save pipeline</span>
                </div>
            </button>
            <span class="assembly-options-divider"></span>
            <!-- TODO: Use this once copying of elements is supported -->
<!--            <button mat-button mat-icon-button matTooltip="Pan" [matTooltipPosition]="'above'"-->
<!--                    [disabled]="!selectMode"-->
<!--                    (click)="toggleSelectMode()">-->
<!--                <i class="material-icons">open_with</i>-->
<!--            </button>-->
<!--            <button mat-button mat-icon-button matTooltip="Select" [matTooltipPosition]="'above'"-->
<!--                    [disabled]="selectMode"-->
<!--                    (click)="toggleSelectMode()">-->
<!--                <i class="material-icons">mode_edit</i>-->
<!--            </button>-->
            <button mat-button matTooltip="Data Preview" [matTooltipPosition]="'above'"
                    (click)="triggerPipelinePreview()" [disabled]="isPipelineAssemblyEmpty()">
                <div fxLayoutAlign="start center" fxLayout="row">
                    <i class="material-icons">visibility</i>
                    <span *ngIf="!pipelineComponent.previewModeActive">&nbsp;Enable live preview</span>
                    <span *ngIf="pipelineComponent.previewModeActive">&nbsp;Disable live preview</span>
                </div>
            </button>
            <span class="assembly-options-divider"></span>
            <button mat-button mat-icon-button matTooltip="Auto Layout" [matTooltipPosition]="'above'"
                    (click)="autoLayout()">
                <i class="material-icons">settings_overscan</i>
            </button>
            <div fxLayout="column" fxLayoutAlign="start center" class="pipeline-cache-block">
                <div fxFlex="100" fxLayoutAlign="start center" fxLayout="row" *ngIf="pipelineCached || pipelineCacheRunning">
                    <div *ngIf="pipelineCached" fxLayout="row" fxLayoutAlign="start center">
                        <mat-spinner [mode]="'indeterminate'" class="mat-spinner-color" [diameter]="15" *ngIf="pipelineCacheRunning"></mat-spinner>
                        <span>&nbsp;{{pipelineCacheRunning ? '&nbsp;Saving pipeline modifications' : 'All pipeline modifications saved.'}}</span>
                    </div>
                </div>
            </div>
            <span fxFlex></span>
            <div style="position:relative;">
                <div *ngIf="!isPipelineAssemblyEmpty()"
                     class="pipeline-validation-summary {{PipelineValidationService.errorMessages.length > 0 ? 'pipeline-validation-summary-error' : ''}}"
                     (click)="toggleErrorMessagesDisplayed()">
                    <div fxLayout="row" fxLayoutAlign="center center">
                        <div fxLayout="row" fxLayoutAlign="start center">
                            <i class="material-icons" *ngIf="PipelineValidationService.errorMessages.length > 0">notifications</i>
                            <i class="material-icons"
                               *ngIf="PipelineValidationService.errorMessages.length === 0">done</i>
                        </div>
                        <div>
                            <span *ngIf="PipelineValidationService.errorMessages.length === 0">Pipeline ok</span>
                            <span *ngIf="PipelineValidationService.errorMessages.length > 0">{{PipelineValidationService.errorMessages.length}} {{PipelineValidationService.errorMessages.length > 1 ? 'hints' : 'hint'}}</span>
                        </div>
                    </div>
                </div>
                <div class="editor-error-notifications"
                     *ngIf="PipelineValidationService.errorMessages.length > 0 && errorMessagesDisplayed">
                    <h5 style="color:darkred">
                        <b>{{PipelineValidationService.errorMessages.length}} {{PipelineValidationService.errorMessages.length == 1 ? "error" : "errors"}}
                            found.</b></h5>
                    <hr/>
                    <div *ngFor="let errorMessage of PipelineValidationService.errorMessages">
                        <b>{{errorMessage.title}}</b>
                        <div>{{errorMessage.content}}</div>
                        <hr/>
                    </div>
                </div>
            </div>
            <button mat-button mat-icon-button
                    [matTooltip]="pipelineCanvasMaximized ? 'Minimize' : 'Maximize'"
                    [matTooltipPosition]="'above'"
                    (click)="toggleCanvasMaximized()">
                <i class="material-icons" *ngIf="!pipelineCanvasMaximized">open_in_full</i>
                <i class="material-icons" *ngIf="pipelineCanvasMaximized">close_fullscreen</i>
            </button>
            <button mat-button mat-icon-button matTooltip="Clear Assembly Area"
                    [matTooltipPosition]="'above'"
                    [disabled]="EditorService.pipelineAssemblyEmpty"
                    (click)="showClearAssemblyConfirmDialog($event)">
                <i class="material-icons">clear</i>
            </button>
        </div>
    </div>
    <div id="outerAssemblyArea" class="outerAssembly sp-blue-border-nopadding">
        <div class="pipeline-canvas-outer" #outerCanvas>
            <div class="pan-control">
                <div class="pan-zoom-control-buttons">
                    <div class="pan-zoom-button pan-left" (click)="panLeft()">
                        <i class="material-icons">keyboard_arrow_left</i>
                    </div>
                    <div class="pan-zoom-button pan-right" (click)="panRight()">
                        <i class="material-icons">keyboard_arrow_right</i>
                    </div>
                    <div class="pan-zoom-button pan-home" (click)="panHome()">
                        <i class="material-icons">home</i>
                    </div>
                    <div class="pan-zoom-button pan-up" (click)="panUp()">
                        <i class="material-icons">keyboard_arrow_up</i>
                    </div>
                    <div class="pan-zoom-button pan-down" (click)="panDown()">
                        <i class="material-icons">keyboard_arrow_down</i>
                    </div>
                </div>
            </div>
            <div class="zoom-control">
                <div class="pan-zoom-control-buttons">
                    <div class="pan-zoom-button zoom-in" (click)="zoomIn()">
                        <i class="material-icons">zoom_in</i>
                    </div>
                    <mat-divider class="zoom-divider"></mat-divider>
                    <div class="pan-zoom-button zoom-out" (click)="zoomOut()">
                        <i class="material-icons">zoom_out</i>
                    </div>
                </div>
            </div>
            <div id="assembly" class="canvas" #assembly>
                <pipeline #pipelineComponent
                          [pipelineValid]="pipelineValid"
                          [canvasId]="'assembly'"
                          [rawPipelineModel]="rawPipelineModel"
                          [allElements]="allElements"
                          [preview]="false"
                          [pipelineCached]="pipelineCached"
                          [pipelineCanvasMetadata]="pipelineCanvasMetadata"
                          [pipelineCacheRunning]="pipelineCacheRunning"
                          (pipelineCachedChanged)="pipelineCached=$event"
                          (pipelineCacheRunningChanged)="pipelineCacheRunning=$event">
                </pipeline>
            </div>
        </div>
    </div>
</div>
