<div class="grid-container">
    <mat-toolbar *ngIf="conflict === true" class="badge bg-danger">
      {{ conflictString }}
    </mat-toolbar>
    <mat-toolbar *ngIf="success === true" class="badge bg-success">
      Successfully added
    </mat-toolbar>
    <h1 class="mat-h1">Reservation Page</h1>
    <div ngbDropdown class="dropdown">
      <button ngbDropdownToggle type="button" class="btn btn-primary" id="systemDropdownMenu" aria-expanded="false">
    {{ currentSystem }}
    </button>
      <ul ngbDropdownMenu aria-labelledby="dropdownMenuButton1">
        <li *ngFor="let system of systemList; index as i">
          <a ngbDropdownItem (click)=setSystem(system.id,i)> {{ system.id }} </a>
        </li>
      </ul>
    </div>

    <span *ngFor="let vm of vmList">
      <div *ngIf="vm.system === currentSystem" (click)=setVM(vm)>
        <mat-grid-list cols="2" rowHeight="40px">

          <!--  <mat-card *ngIfElse="currentVM === vm.vm; then thenBlock else elseBlock">
          <ng-template #thenBlock style="border: 2px solid #1E4DE8" class="dashboard-card {{vm.vmstatus}}" id={{vm.vm}}></ng-template>
          <ng-template #elseBlock class="dashboard-card {{vm.vmstatus}}" id={{vm.vm}}></ng-template>-->

          <!--<mat-card class="dashboard-card {{vm.vmstatus}}" id={{vm.vm}}>-->

          <mat-card *ngIf="currentVM != vm.vm" class="dashboard-card {{vm.vmstatus}}" id={{vm.vm}}>

          <mat-card-content class="dashboard-card-content">
            <div class="vm">
              <span style="text-transform:uppercase;">{{ vm.vm }}</span>
              <span style="text-transform:uppercase;">{{ vm.vmlocation }}</span>
              <span style="text-transform:uppercase;">{{ vm.vmstatus }}</span>
            </div>
          </mat-card-content>

          </mat-card>
          <mat-card *ngIf="currentVM === vm.vm" style="border: 3px solid #1E4DE8" class="dashboard-card {{vm.vmstatus}}" id={{vm.vm}}>

          <mat-card-content class="dashboard-card-content">
            <div class="vm">
              <span style="text-transform:uppercase;">{{ vm.vm }}</span>
              <span style="text-transform:uppercase;">{{ vm.vmlocation }}</span>
              <span style="text-transform:uppercase;">{{ vm.vmstatus }}</span>
            </div>
          </mat-card-content>

          </mat-card>

        </mat-grid-list>
      </div>
    </span>

    <mat-grid-list cols="2" rowHeight="250px">
      <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">

            <form>
              <div class="form-group row">
                <label for="vmName" class="col-sm-2 col-form-label">Validation Cycle:</label>
                <div ngbDropdown class="col-sm-10 dropdownMenuButton1">
                  <button ngbDropdownToggle type="button" class="btn btn-default" id="systemDropdownMenu" aria-expanded="false">
                    {{ validation.value }}
                  </button>
                    <ul ngbDropdownMenu aria-labelledby="dropdownMenuButton1">
                      <li>
                        <a ngbDropdownItem (click)="setValidation('True')">True</a>
                      </li>
                      <li>
                        <a ngbDropdownItem (click)="setValidation('False')">False</a>
                      </li>
                    </ul>
                </div>
              </div>

              <div class="form-group row">
                <label for="reservation_day_s" class="col-sm-2 col-form-label">Reservation Start Date:</label>
                <div class="col-sm-10">
                  <input type="date" class="form-control" id="reservation_day_s" #reservation_day_s>
                </div>
              </div>

              <div class="form-group row">
                <label for="reservation_day_e" class="col-sm-2 col-form-label">Reservation End Date:</label>
                <div class="col-sm-10">
                  <input type="date" class="form-control" id="reservation_day_e" #reservation_day_e>
                </div>
              </div>

              <!--VERIFY THIS SENDS TO BACKENED-->
              <div class="form-group">
                <label for="description">Description</label>
                <textarea class="form-control" id="description"  #desc rows="3"></textarea>
              </div>

              <!--<button type="button" (click)=sendData(vmName.value,reservation_day_s.value,startTime.value,reservation_day_e.value,endTime.value,description.value)>Submit</button>-->

              <div id="resolveButtons">
                <button *ngIf="override === false" type="submit" class="btn btn-primary" (click)="calculatePriorityAndSend(role, reservation_day_s.value, reservation_day_e.value, desc.value);">
                  Submit
                </button>
                <button *ngIf="override === true" id="confirmResolveBtn" class="btn btn-success" routerLink='/schedule' (click)=overrideRes()>
                  Confirm
                </button>
                <button *ngIf="override === true" id="cancelResolveBtn" class="btn btn-danger" (click)="override=false">
                  Cancel
                </button>
              </div>
            </form>

          </mat-card-content>
        </mat-card>
      </mat-grid-tile>
    </mat-grid-list>
  </div>

  <hr>