<div class="grid-container">
  <mat-toolbar *ngIf="success === true" class="badge bg-success">
    Successfully added
  </mat-toolbar>
    <h1 class="mat-h1">Request Work Order Page</h1>
    <div ngbDropdown class="dropdown">
      <h3 id="system">System:</h3>
      <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>

    <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="product" class="col-sm-2 col-form-label">Product Serial:</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="product" #product placeholder="ex: 3489172">
                </div>
              </div>

              <div class="form-group">
                <label for="description">Description</label>
                <textarea class="form-control" id="description"  #desc rows="3"></textarea>
              </div>

              <button type="submit" class="btn btn-primary" (click)=sendData(product.value,currentSystem,desc.value)>Submit Work Order Request</button>
            </form>

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

  <hr>