<div class="grid-container">
  <h1 class="mat-h1">Dashboard</h1>
  <mat-grid-list cols="1">
    <mat-grid-tile *ngFor="let card of cards | async" [colspan]="card.cols" [rowspan]="card.rows">
      <mat-card class="dashboard-card" [style.height]="'70vh'">
        <mat-card-header>
          <mat-card-title>
            {{card.title}}
          </mat-card-title>
        </mat-card-header>
        <mat-card-content class="dashboard-card-content" [style.overflow]="'auto'" [style.height]="'90%'">
          <table class="table table-striped">
            <thead>
              <tr id="heading">
                <th scope="col">VM ID</th>
                <th scope="col">Status</th>
                <th scope="col">Current Test</th>
                <th scope="col">Results</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let vm of vms" class="vmitem">
                <th scope="row">{{ vm.vm }}</th>
                <td><span id="{{ vm.vmstatus }}" class="badge"></span>
                  <span>{{ vm.vmstatus }}</span>
                </td>
                <td *ngIf="vm.vmstatus == 'In-Progress'">{{ vm.currentTest }}</td>
                <td *ngIf="vm.vmstatus != 'In-Progress'">N/A</td>
                <td *ngIf="vm.vmstatus == 'Done'">
                  <a href="{{ vm.testingDesc }}">Results</a>
                </td>
                <td *ngIf="vm.vmstatus != 'Done'">{{ vm.testingDesc }}</td>
              </tr>
            </tbody>
          </table>
        </mat-card-content>
      </mat-card>
    </mat-grid-tile>
  </mat-grid-list>
</div>