<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a routerLink="../../">Projects</a></li>
    <li class="breadcrumb-item" aria-current="page">Requirement List</li>
  </ol>
</nav>
<div class="list row">
  <div class="col-md-14">
    <div fxFlex fxLayout fxHide.xs fxLayoutAlign="end">
      <input type="text" class="form-control" placeholder="Search" (keyup)="applyFilter($event)" #input />
    </div>
    <div fxFlex fxLayout fxHide.xs fxLayoutAlign="end">
      <ul fxLayout fxLayoutGap="15px" class="navigation-items">
        <div>
          <input class="btn btn-success" type="button" value="Add Requirement" routerLink="add-boilerplate" />
        </div>
      </ul>
    </div>
    <div fxFlex fxLayout fxHide.xs fxLayoutAlign="end">
      <ul *ngFor="let inf of infer;" fxLayout fxLayoutGap="15px" class="navigation-items">
        <div>
          <input class="btn btn-info" [disabled]="exporting" type="button" value="Inferencing"
            (click)="updateInfer(inf.id)" />
        </div>
      </ul>
    </div>
    <div fxFlex fxLayout fxHide.xs fxLayoutAlign="end">
        <div>
          <input class="btn btn-info" [disabled]="exporting" type="button" value="Download"
            (click)="getCurrentOntology()" />
        </div>
    </div>

  </div>
</div>
<div [hidden]="!showSpinner">
  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>
<div class="mat-elevation-z8">
  <table mat-table [dataSource]="newdataSource" class="mat-elevation-z8">
    <!-- Position Column -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef> No. </th>
      <td mat-cell *matCellDef="let element"> {{element.id}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="prefix_data">
      <th mat-header-cell *matHeaderCellDef> Prefix </th>
      <td mat-cell *matCellDef="let element">{{element.prefix_data}} </td>
    </ng-container>
    <!-- Name Column -->
    <ng-container matColumnDef="title_data">
      <th mat-header-cell *matHeaderCellDef> Title </th>
      <td mat-cell *matCellDef="let element" matTooltip={{get_metrics(element.title_data)}}> {{element.title_data}}
        <span *ngIf="get_metrics(element.title_data).length > 0" matBadge={{get_metrics(element.title_data).length}}
          matBadgeColor="warn" matBadgeSize="small" position="above"> &nbsp;&nbsp; </span>
      </td>
    </ng-container>

    <ng-container matColumnDef="main_data">
      <th mat-header-cell *matHeaderCellDef> Main </th>
      <td mat-cell *matCellDef="let element"> {{element.main_data}} </td>
    </ng-container>

    <ng-container matColumnDef="suffix_data">
      <th mat-header-cell *matHeaderCellDef> Suffix </th>
      <td mat-cell *matCellDef="let element"> {{element.suffix_data}} </td>
    </ng-container>

    <!-- Action Column -->
    <ng-container matColumnDef="action">
      <th mat-header-cell *matHeaderCellDef> Action </th>
      <td mat-cell *matCellDef="let element" class="action-link">
        <a class="btn btn-info" routerLink="details/{{element.boilerplate_data_id}}">Edit</a>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="newdisplayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: newdisplayedColumns;"></tr>
  </table>
  <mat-paginator #paginator [pageSizeOptions]="[20, 50]" showFirstLastButtons></mat-paginator>
</div>

<div echarts [options]="chartOption" class="demo-chart"></div>

<div class="content">
  <div fxLayout="row wrap">
    <div fxFlex="33.3%">
      <mat-card class="example-card">
        <mat-card-header>
          <div class="example-header-image"></div>
          <mat-card-title>N. Requirements</mat-card-title>
          <mat-card-subtitle>{{getnumreq()}}</mat-card-subtitle>
        </mat-card-header>
      </mat-card>
    </div>
    <div fxFlex="33.3%">
      <mat-card class="example-card">
        <mat-card-header>
          <div class="example-header-image"></div>
          <mat-card-title>Complete Requirement</mat-card-title>
          <mat-card-subtitle>{{getnumreq() - getincreq()}}</mat-card-subtitle>
        </mat-card-header>
      </mat-card>
    </div>
    <div fxFlex="33.3%">
      <mat-card class="example-card">
        <mat-card-header>
          <div class="example-header-image"></div>
          <mat-card-title>Incomplete Requirement</mat-card-title>
          <mat-card-subtitle>{{getincreq()}}</mat-card-subtitle>
        </mat-card-header>
      </mat-card>
    </div>
  </div>
</div>