<h2 *ngIf="businessDate">Portfolio valued at {{businessDate}}</h2>

<div *ngIf="!data" class="sk-three-bounce">
  <div class="sk-child sk-bounce1"></div>
  <div class="sk-child sk-bounce2"></div>
  <div class="sk-child sk-bounce3"></div>
</div>

<!-- ng-if would break highcharts -->
<tabset [ngClass]="{'invisible': !data}">
  <tab heading='Overview'>
    <div class="container">

      <div class="row">

        <div class="col-sm-6">
          <h3> Summary <small><span class="glyphicon glyphicon-info-sign" aria-hidden="true" popover="Grouped by Product and Currency" popoverPlacement="top" [popoverOnHover]="true"></span></small> </h3>

          <table class="table table-striped table-bordered" id="summaries-table">
            <thead>
              <tr>
                <th>Product</th>
                <th>Currency</th>
                <th>Trades</th>
                <th>Net Amount</th>
                <th>IM</th>
                <th>MTM</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{{summaryTable.product}}</td>
                <td>{{summaryTable.currency}}</td>
                <td>{{summaryTable.trades}}</td>
                <td>{{summaryTable.notional | number}}</td>
                <td>{{summaryTable.im | number}}</td>
                <td>{{summaryTable.mtm | number}}</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="col-sm-6">
          <!-- <div style="height: 250px; margin-bottom: 0px;" id="IMVMHistorySummaryChart"></div> -->
        </div>

      </div>

      <h3> Trades <small><span class="glyphicon glyphicon-info-sign" aria-hidden="true" popover="Imminent IM is computed by calculating the IM of the entire portfolio and then repeating this calculation without the particular trade. Currency is the same for trade and collateral." popoverPlacement="top" [popoverOnHover]="true"></span></small> </h3>

      <table class="table table-striped table-bordered" id="trades-table">
        <thead>
          <tr>
            <th *ngFor="let c of columns">{{c.title}}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let r of rows">
            <td *ngFor="let c of columns" [innerHTML]="c.formatter(r[c.name])"></td>
          </tr>
        </tbody>
      </table>

      <pagination *ngIf="config.paging" class="pagination-sm" [(ngModel)]="page" [totalItems]="length" [itemsPerPage]="itemsPerPage" [maxSize]="maxSize" [boundaryLinks]="true" [rotate]="false" (pageChanged)="onChangeTable(config, $event)" (numPages)="numPages = $event"></pagination>
    </div>

  </tab>

  <!-- <tab heading='Historic'>
    <div class="row">

      <div class="col-sm-6">
        <div id="IMVMHistoryChart"></div>
      </div>

      <div class="col-sm-6">
        <div id="activeTradesChart"></div>
      </div>
    </div>
  </tab>

  <tab heading='Analytics'>
    <div class="row">

      <div class="col-sm-6">
        <div id="IMOverVMChart"></div>
      </div>

      <div class="col-sm-6">
        <div id="tradesChart"></div>
      </div>
    </div>
  </tab> -->

</tabset>
