<div class="db-kpi-container">
  <div class="kpi-container">
    <div *ngFor="let kpi of data;" >
    	<div class="small-12 medium-4 large-3 column kpi-card-containers">
   	 		<ng-container *ngTemplateOutlet="kpi.detail.image ? kpiLinkTemplate : kpiLinkTemplateWoImg; context:{ $implicit: kpi }"></ng-container>
  
        <div class="summary-box">
            <span class="summary-box-kpi-value" [style.color] = "kpi.summary.color">{{kpi.summary.keyValue}}</span>
            <span class="summary-box-kpi-name">{{kpi.summary.keyName}}</span>
        </div>
        </div>
    </div>
  </div>
</div>

<!-- <div class="quicklink-dashboard"> -->

<!--    <div class="kpi-row"> -->
<!--       <div *ngFor="let kpilink of data" > -->
<!--                  <ng-container *ngTemplateOutlet=" kpiLinkTemplate; context:{ $implicit: kpilink }" ></ng-container> -->
<!--       </div> -->
<!--    </div> -->

<!-- </div> -->
   
 <ng-template #kpiLinkTemplate let-kpi >
  <div class="kpi-card col kpi-box " [style.background-image]="kpi.detail.color" >
      <div class="kpi-header">
          <div *ngIf="kpi.detail.image.indexOf('/') == -1 " class="kpi-icon">
              <img src='dashboard/assets/images/svg/{{kpi.detail.image}}'  />
          </div>
          <div *ngIf="kpi.detail.image.indexOf('/') != -1 " class="kpi-icon">
              <img src='{{kpi.detail.image}}'/>
          </div>
          <div class="kpi-title">{{kpi.detail.keyName}}</div>
      </div>
      <div class="kpi-count-summary">
               <span *ngIf="kpi.detail.keyValue ==0" class="kpi-count no-kpi-count" ></span>
               <span *ngIf="kpi.detail.keyValue !=0"  class="kpi-count" >{{kpi.detail.keyValue}}</span>
      		   <span class="kpi-summary">{{kpi.detail.summary}}</span>
<!--           <span class="kpi-count" [ngClass]="{'no-kpi-count':evalFunction(quicklink.count) == ''}">{{evalFunction(quicklink.count)}}</span> -->
<!--           <span class="kpi-summary">{{evalFunction(quicklink.summary)}}</span> -->
      </div>
  </div>
  </ng-template>
  
  <ng-template #kpiLinkTemplateWoImg let-kpi >
        <div class="detail-box" [style.backgroundColor] = "kpi.detail.color">
            <span class="detail-box-kpi-value">{{kpi.detail.keyValue}}</span>
            <span class="detail-box-kpi-name">{{kpi.detail.keyName}}</span>
        </div>
</ng-template>

 