<h2 *ngIf="businessDate">Valuations for {{businessDate}}</h2>
<button type="button" class="btn btn-primary" (click)="startCalculations()">Start Calculations</button>
<div style="margin-top:20px"></div>

<div *ngIf="data">
  <div *ngIf="data.portfolio" class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Portfolio (1/5)</h3>
    </div>

    <div class="panel-body">

      <div class="row">
        <div class="col-xs-10">

          <div class="row">

            <div class="col-md-4">
              <h3>Trades</h3>
              <table class="table table-striped table-condensed" style="width: auto">
                <thead>
                  <tr>
                    <th>Type</th>
                    <th>Trades</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">IR/FX</th>
                    <td>{{data.portfolio.IRFX | number}}</td>
                  </tr>
                  <tr>
                    <th scope="row">Commodity</th>
                    <td>{{data.portfolio.credit | number}}</td>
                  </tr>
                  <tr>
                    <th scope="row">Credit</th>
                    <td>{{data.portfolio.commodity | number}}</td>
                  </tr>
                  <tr>
                    <th scope="row">Equity</th>
                    <td>{{data.portfolio.equity | number}}</td>
                  </tr>
                  <tr>
                    <th scope="row">Total</th>
                    <td><b>{{data.portfolio.total | number}}</b></td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div class="col-md-4">
              <h3>Base Currency</h3>
              <span>{{data.portfolio.baseCurrency}}</span>
            </div>
          </div>
          <!-- /row -->

        </div>
        <!-- /col-xs-10 -->

        <div *ngIf="data.portfolio.agreed" class="col-xs-2">
          <img src="assets/images/checkbox.png" class="center-block checkbox">
          <p class="text-center">Agreed with counterparty</p>
        </div>

      </div>
      <!-- /row -->

    </div>
  </div>

  <div *ngIf="data.marketData" class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Market Data (2/5)</h3>
    </div>

    <div class="panel-body">

      <div class="row">
        <div class="col-xs-10">

          <div class="row">

            <div class="col-md-4">
              <h3>{{data.marketData.yieldCurves.name}} Yield curves</h3>
              <table class="table table-striped table-condensed" style="width: auto">
                <thead>
                  <tr>
                    <th>Tenor</th>
                    <!-- <th>Instrument Type</th> -->
                    <th>Rate</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let v of data.marketData.yieldCurves.values">
                    <th scope="row">{{v.tenor}}</th>
                    <!-- <td>{{v.instrumentType}}</td> -->
                    <td>{{v.rate}}</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div class="col-md-4">
              <h3>{{data.marketData.fixings.name}} Fixings</h3>
              <table class="table table-striped table-condensed" style="width: auto">
                <thead>
                  <tr>
                    <th>Tenor</th>
                    <th>Rate</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let v of data.marketData.fixings.values">
                    <th scope="row">{{v.tenor}}</th>
                    <td>{{v.rate}}</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div class="col-md-4">
              <h3>Market Data Source</h3>
              <p>R3 Sample Oracle</p>
            </div>

          </div>
          <!-- /row -->

        </div>
        <!-- /col-xs-10 -->

        <div *ngIf="data.marketData.agreed" class="col-xs-2">
          <img src="assets/images/checkbox.png" class="center-block checkbox">
          <p class="text-center">Agreed with counterparty</p>
        </div>

      </div>
      <!-- /row -->

    </div>
  </div>

  <div *ngIf="data.sensitivities" class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Sensitivities (3/5)</h3>
    </div>

    <div class="panel-body">

      <div class="row">
        <div class="col-xs-10">

          <div class="row">

            <div class="col-md-8">
              <h3>Risk Type Delta (Qualifier {{data.sensitivities.currency[0].currency}})</h3>
              <table class="table table-striped table-condensed" style="width: auto">
                <thead>
                  <tr>
                    <th>Tenor</th>
                    <th>EUR-DSCON-BIMM</th>
                    <th>EUR-EURIBOR3M-BIMM</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let v of formattedData.sensitivitiesCurves">
                    <th scope="row">{{v.tenor}}</th>
                    <td>{{v['EUR-DSCON-BIMM'] | number}}</td>
                    <td>{{v['EUR-EURIBOR3M-BIMM'] | number}}</td>
                  </tr>
                </tbody>
              </table>
            </div>

          </div>
          <!-- /row -->

        </div>
        <!-- /col-xs-10 -->

        <div *ngIf="data.sensitivities.agreed" class="col-xs-2">
          <img src="assets/images/checkbox.png" class="center-block checkbox">
          <p class="text-center">Agreed with counterparty</p>
        </div>

      </div>
      <!-- /row -->

    </div>

    <div class="panel-footer">
      <h4 style="display: inline;"> Powered by </h4> <img src="assets/images/opengamma-logo.png" style="height: 30px; padding-bottom: 5px; padding-left: 3px;">
    </div>
  </div>

  <div *ngIf="data.initialMargin" class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Initial Margin (4/5)</h3>
    </div>

    <div class="panel-body">

      <div class="row">
        <div class="col-xs-10">

          <div class="row">

            <div class="col-md-4">
              <h3>Post</h3>
              <table class="table table-striped table-condensed" style="width: auto">
                <thead>
                  <tr>
                    <th>Type</th>
                    <th>IM</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">IR/FX</th>
                    <td>{{data.initialMargin.post.IRFX | number}}</td>
                  </tr>
                  <tr>
                    <th scope="row">Commodity</th>
                    <td>{{data.initialMargin.post.credit | number}}</td>
                  </tr>
                  <tr>
                    <th scope="row">Credit</th>
                    <td>{{data.initialMargin.post.commodity | number}}</td>
                  </tr>
                  <tr>
                    <th scope="row">Equity</th>
                    <td>{{data.initialMargin.post.equity | number}}</td>
                  </tr>
                  <tr>
                    <th scope="row">Total</th>
                    <td><b>{{data.initialMargin.post.total | number}}</b></td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div class="col-md-4">
              <h3>Call</h3>
              <table class="table table-striped table-condensed" style="width: auto">
                <thead>
                  <tr>
                    <th>Type</th>
                    <th>IM</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">IR/FX</th>
                    <td>{{data.initialMargin.call.IRFX | number}}</td>
                  </tr>
                  <tr>
                    <th scope="row">Commodity</th>
                    <td>{{data.initialMargin.call.credit | number}}</td>
                  </tr>
                  <tr>
                    <th scope="row">Credit</th>
                    <td>{{data.initialMargin.call.commodity | number}}</td>
                  </tr>
                  <tr>
                    <th scope="row">Equity</th>
                    <td>{{data.initialMargin.call.equity | number}}</td>
                  </tr>
                  <tr>
                    <th scope="row">Total</th>
                    <td><b>{{data.initialMargin.call.total | number}}</b></td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div class="col-md-4">
              <h3>Base Currency</h3>
              <span>{{data.portfolio.baseCurrency}}</span>
            </div>

          </div>
          <!-- /row -->

        </div>
        <!-- /col-xs-10 -->

        <div *ngIf="data.initialMargin.agreed" class="col-xs-2">
          <img src="assets/images/checkbox.png" class="center-block checkbox">
          <p class="text-center">Agreed with counterparty</p>
        </div>

      </div>
      <!-- /row -->

    </div>

    <div class="panel-footer">
      <h4 style="display: inline;"> Powered by </h4> <img src="assets/images/opengamma-logo.png" style="height: 30px; padding-bottom: 5px; padding-left: 3px;">
    </div>
  </div>

  <div *ngIf="data.confirmation" class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Confirmation (5/5)</h3>
    </div>

    <div class="panel-body">

      <div class="row">

        <div class="col-xs-10">
          <h3>Joint Confirmation ID</h3>
          <span>{{data.confirmation.hash}}</span>
        </div>
        <!-- /col-xs-10 -->

        <div *ngIf="data.confirmation.agreed" class="col-xs-2">
          <img src="assets/images/checkbox.png" class="center-block checkbox">
          <p class="text-center">Agreed with counterparty</p>
        </div>

      </div>
      <!-- /row -->

    </div>
  </div>

  <div id="loadingSpinners" *ngIf="calculateClicked && !data.confirmation" 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>

</div>
