<!--
  ~ 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" *ngIf="filteredPipelinesAvailable" style="margin:1px;">
    <table fxFlex="100" mat-table [dataSource]="dataSource" style="width: 100%;" matSort>
        <ng-container matColumnDef="status">
            <th mat-header-cell mat-sort-header *matHeaderCellDef> Status</th>
            <td mat-cell *matCellDef="let pipeline">
                <div fxLayout="row" fxLayoutAlign="start center">
                <div *ngIf="pipeline.running && pipeline.healthStatus == 'OK'" class="light light-green"></div>
                <div *ngIf="pipeline.running && pipeline.healthStatus == 'REQUIRES_ATTENTION'" class="light light-yellow"></div>
                <div *ngIf="pipeline.running && pipeline.healthStatus == 'FAILURE'" class="light light-red"></div>
                <div *ngIf="!pipeline.running" class="light light-neutral" [matTooltip]="'Stopped'"></div>
                <button class="ml-10"
                        mat-button
                        mat-icon-button
                        (click)="openPipelineNotificationsDialog(pipeline)"
                        *ngIf="pipeline.pipelineNotifications.length > 0"
                        matTooltip="{{pipeline.pipelineNotifications.length}} notification{{pipeline.pipelineNotifications.length > 1 ? 's' : ''}}">
                    <mat-icon color="warn">warning</mat-icon>
                </button>
                </div>
            </td>
        </ng-container>
        <ng-container matColumnDef="start">
            <th mat-header-cell *matHeaderCellDef> Start</th>
            <td mat-cell *matCellDef="let pipeline">
                <button color="primary" mat-button mat-icon-button matTooltip="Start pipeline" matTooltipPosition="above"
                        (click)="pipelineOperationsService.startPipeline(pipeline._id, refreshPipelinesEmitter, toggleRunningOperation)"
                        [disabled]="starting" *ngIf="!pipeline.running">
                    <i class="material-icons">play_arrow</i>
                </button>
                <button color="primary" mat-button mat-icon-button matTooltip="Stop pipeline" matTooltipPosition="above"
                        (click)="pipelineOperationsService.stopPipeline(pipeline._id, refreshPipelinesEmitter, toggleRunningOperation)"
                        [disabled]="stopping" *ngIf="pipeline.running">
                    <i class="material-icons">stop</i>
                </button>
            </td>
        </ng-container>

        <ng-container matColumnDef="name">
            <th mat-header-cell mat-sort-header *matHeaderCellDef> Name</th>
            <td mat-cell *matCellDef="let pipeline">
                <h4 style="margin-bottom:0px;">{{pipeline.name}}</h4>
                <h5>{{pipeline.description != '' ? pipeline.description : '-'}}</h5>
            </td>
        </ng-container>

        <ng-container matColumnDef="lastModified">
            <th mat-header-cell *matHeaderCellDef> Created</th>
            <td mat-cell *matCellDef="let pipeline">
                <h5>{{pipeline.createdAt | date:'dd.MM.yyyy HH:mm'}}</h5>
            </td>
        </ng-container>

        <ng-container matColumnDef="action">
            <th mat-header-cell *matHeaderCellDef> Action</th>
            <td mat-cell *matCellDef="let pipeline">
                <div fxLayout="row">
                <span fxFlex fxFlexOrder="1" fxLayout="row" fxLayoutAlign="center center">
                    <button  color="primary"mat-button mat-icon-button matTooltip="Show pipeline" matTooltipPosition="above"
                            (click)="pipelineOperationsService.showPipelineDetails(pipeline._id)"><i
                            class="material-icons">search</i>
                    </button>
                </span>
                    <span fxFlex fxFlexOrder="2" fxLayout="row" fxLayoutAlign="center center">
                    <button color="primary"mat-button mat-icon-button matTooltip="Modify pipeline" matTooltipPosition="above"
                            [disabled]="pipeline.running"
                            (click)="pipelineOperationsService.modifyPipeline(pipeline._id)">
                        <i class="material-icons">mode_edit</i>
                    </button>
                </span>
                    <span fxFlex fxFlexOrder="3" fxLayout="row" fxLayoutAlign="center center">
                    <button color="primary" mat-button mat-icon-button matTooltip="Delete pipeline" matTooltipPosition="above"
                            (click)="pipelineOperationsService.showDeleteDialog(pipeline, refreshPipelinesEmitter)">
                        <i class="material-icons">delete</i>
                    </button>
                </span>
                </div>
            </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

    </table>
    <div fxFlex="100" fxLayoutAlign="end end">
        <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="20"></mat-paginator>
    </div>
</div>
<div fxFlex="100" fxLayout="column" fxLayoutAlign="center center" *ngIf="!filteredPipelinesAvailable">
    <h5>(no pipelines available)</h5>
</div>

