<!--
  ~ 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">
    <h1>Asset Dashboards</h1>
    <mat-grid-list
            [cols]="3" [rowHeight]="500"
            [gutterSize]="10" fxFlex="100">

        <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="primary" (click)="openDashboard(dashboardConfig)">Open Dashboard</button>
                    <button mat-button mat-raised-button class="mat-basic"  (click)="deleteDashboard(dashboardConfig._id)">Delete</button>
                </mat-card-actions>
            </mat-card>
        </mat-grid-tile>
    </mat-grid-list>
    <div *ngIf="dashboardConfigs.length == 0">
        <h4>(no dashboards available, navigate to <i>New Dashboard</i> to create a new asset dashboard)</h4>
    </div>
</div>