<!--
  ~ 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" class="page-container-padding-inner">
    <h1>Asset Dashboards</h1>
    <mat-grid-list
            [cols]="3" [rowHeight]="500"
            [gutterSize]="10" fxFlex="100" *ngIf="dashboardConfigs.length > 0">

        <mat-grid-tile class="gray" *ngFor="let dashboardConfig of dashboardConfigs">

            <mat-card class="example-card">
                <mat-card-header>
                    <mat-card-title>  {{dashboardConfig.dashboardName}}</mat-card-title>
                    <mat-card-subtitle>{{dashboardConfig.dashboardDescription}}</mat-card-subtitle>
                </mat-card-header>
                <img mat-card-image [src]="getImageUrl(dashboardConfig)">
                <mat-card-content>
                    <p>
                    </p>
                </mat-card-content>
                <mat-card-actions>
                    <button mat-button mat-raised-button color="accent" (click)="openDashboard(dashboardConfig)">Open Dashboard</button>
                    <button mat-button mat-raised-button class="mat-basic"  (click)="deleteDashboard(dashboardConfig.dashboardId)">Delete</button>
                </mat-card-actions>
            </mat-card>
        </mat-grid-tile>
    </mat-grid-list>
    <div *ngIf="dashboardConfigs.length == 0" fxLayoutAlign="center center" fxFlex="100" fxLayout="column">
        <h4>No asset dashboards available</h4>
        <button mat-button mat-raised-button color="accent" style="margin-top: 10px;" (click)="createDashboard.emit()">Create new</button>
    </div>
</div>
