
<ng-container *ngIf="filterType === 'track'">
  <div class="knk-stats-card">
    <div class="knk-stats-card__headline">
      <div fxLayout="row" fxFlex="1 1 100" fxLayoutAlign="space-between stretch">
        <div fxLayout="row" fxFlex="1 1 auto" fxLayoutAlign="start center"><i class="material-icons">timeline</i>&#160;My Stats&#160;</div>
        <div fxLayout="row" fxFlex="1 1 auto" fxLayoutAlign="end center"><i class="material-icons flip-horizontal">reply</i></div>
      </div>
    </div>
    <div class="knk-stats-card__content">
      <div fxLayout="column" fxFlex="1 1 100" fxLayoutAlign="space-between stretch" fxLayoutGap="15px">
        <div fxLayout="column" fxFlex="1 1 auto">
          <div class="knk-stats-card__label">Ongoing Knoks</div>
          <div class="knk-stats-card__note">{{knoks}}</div>
        </div>
        <div fxLayout="column" fxFlex="1 1 auto">
          <div class="knk-stats-card__label">Current Profit</div>
          <div class="knk-stats-card__note" [ngClass]="{'knk-stats-card__note--success': currentProfit &gt; 0, 'knk-stats-card__note--wrong': currentProfit &lt; 0}"><i class="material-icons knk-stats-card__icon knk-stats-card__icon--wrong" *ngIf="currentProfit &lt; 0">arrow_downward</i><i class="material-icons knk-stats-card__icon knk-stats-card__icon--success" *ngIf="currentProfit &gt; 0">arrow_upward</i>{{currentProfit | number}}%</div>
        </div>
        <div fxLayout="column" fxFlex="1 1 auto">
          <div class="knk-stats-card__label">Potential Profit</div>
          <div class="knk-stats-card__note" [ngClass]="{'knk-stats-card__note--success': totalPotentialProfit &gt; 0, 'knk-stats-card__note--wrong': totalPotentialProfit &lt; 0}"><i class="material-icons knk-stats-card__icon knk-stats-card__icon--wrong" *ngIf="totalPotentialProfit &lt; 0">arrow_downward</i><i class="material-icons knk-stats-card__icon knk-stats-card__icon--success" *ngIf="totalPotentialProfit &gt; 0">arrow_upward</i>{{totalPotentialProfit | number}}%</div>
        </div>
      </div>
    </div>
  </div>
</ng-container>
<ng-container *ngIf="filterType === 'ended'">
  <div class="knk-stats-card">
    <div class="knk-stats-card__headline">
      <div fxLayout="row" fxFlex="1 1 100" fxLayoutAlign="space-between stretch">
        <div fxLayout="row" fxFlex="1 1 auto" fxLayoutAlign="start center"><i class="material-icons">timeline</i>&#160;My Stats&#160;</div>
        <div fxLayout="row" fxFlex="1 1 auto" fxLayoutAlign="end center"><i class="material-icons flip-horizontal">reply</i></div>
      </div>
    </div>
    <div class="knk-stats-card__content">
      <div fxLayout="column" fxFlex="1 1 100" fxLayoutAlign="space-between stretch" fxLayoutGap="15px">
        <div fxLayout="column" fxFlex="1 1 auto">
          <div class="knk-stats-card__label">Ended Knoks</div>
          <div class="knk-stats-card__note">{{knoks}}</div>
        </div>
        <div fxLayout="column" fxFlex="1 1 auto">
          <div class="knk-stats-card__label">Total Profit</div>
          <div class="knk-stats-card__note" [ngClass]="{'knk-stats-card__note--success': currentProfit &gt; 0, 'knk-stats-card__note--wrong': currentProfit &lt; 0}"><i class="material-icons knk-stats-card__icon knk-stats-card__icon--wrong" *ngIf="currentProfit &lt; 0">arrow_downward</i><i class="material-icons knk-stats-card__icon knk-stats-card__icon--success" *ngIf="currentProfit &gt; 0">arrow_upward</i>{{currentProfit | number}}%       </div>
        </div>
      </div>
    </div>
  </div>
</ng-container>