<div class="grid-container">
    <h1 class="mat-h1">Manager Dashboard</h1>
    <mat-grid-list cols="2" rowHeight="350px">
      <mat-grid-tile *ngFor="let card of cards | async" [colspan]="card.cols" [rowspan]="card.rows">
        <mat-card class="dashboard-card">
          <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%'">
              <ul>
                  <li *ngFor="let issue of issues">
                    Issue Status: {{issue.status}} ||
                    Description: {{issue.desc}} ||
                    VM: {{issue.vm}} ||
                    FW ID: {{issue.fw}}
                  </li>
              </ul>
          </mat-card-content>
        </mat-card>
      </mat-grid-tile>
    </mat-grid-list>
  </div>

  <hr>

  <div class="grid-container">
    <h1 class="mat-h1">CPU Usage<i class="fas fa-microchip"></i></h1>
    <mat-grid-list cols="2" rowHeight="350px">
      <mat-grid-tile *ngFor="let card of cards | async" [colspan]="card.cols" [rowspan]="card.rows">
        <chris-embed style="height: 100%; width: 100%;"></chris-embed>
      </mat-grid-tile>
    </mat-grid-list>
  </div>

  <hr>

  <div class="grid-container">
    <h1 class="mat-h1">Virtual Machine Uptime <i class="fas fa-desktop"></i></h1>
    <mat-grid-list cols="2" rowHeight="350px">
      <mat-grid-tile *ngFor="let card of cards | async" [colspan]="card.cols" [rowspan]="card.rows">
        <mat-card class="dashboard-card">
          <mat-card-header>
            <mat-card-title>
            </mat-card-title>
          </mat-card-header>
          <mat-card-content class="dashboard-card-content" [style.overflow]="'auto'" [style.height]="'90%'">
            <table class="table">
              <thead class="primary">
                <tr id="heading">
                  <th scope="col">VM ID</th>
                  <th scope="col">Status</th>
                  <th scope="col">Uptime</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let vm of vms">
                  <th scope="row">{{ vm.vm }}</th>
                  <td><span id="{{ vm.vmstatus }}" class="badge"></span>
                    <span>{{ vm.vmstatus }}</span>
                  </td>
                  <td>
                    <span *ngIf="(now - vm.start)/3600000 >= 24" id="days">
                      {{ math.floor((now - vm.start)/86400000) }}D
                    </span>
                    <span *ngIf="(now - vm.start)/60000 >= 60" id="hours">
                      {{ math.floor(((now - vm.start)/3600000)%24) }}Hr
                    </span>
                    <span id="minutes">
                      {{ math.floor(((now - vm.start)/60000)%60) }}m
                    </span>
                  </td>
                </tr>
              </tbody>
            </table>
          </mat-card-content>
        </mat-card>
      </mat-grid-tile>
    </mat-grid-list>
  </div>