<div class="grid text-center">
  <div id="common">
    <table class="table-striped table-bordered table">
      <thead>
        <tr>
          <th colspan="2" class="text-center">Common Information</th>
        </tr>
      </thead>
      <tbody>
        <!-- <tr>
          <td>Parties</td>
          <td>
            <span *ngFor="let party of deal.parties">
              {{party}}<span *ngIf="!$last">,</span>
            </span>
          </td>
        </tr> -->
        <tr>
          <td>Status</td>
          <td>Confirmed</td>
        </tr>
        <tr>
          <td>Trade ID</td>
          <td>{{deal.ref}}</td>
        </tr>
        <tr>
          <td>Valuation Date</td>
          <td>{{deal.common.valuationDate}}</td>
        </tr>
        <tr>
          <td>Interest Rates</td>
          <td>
            {{deal.common.interestRate.name}} with tenor {{deal.common.interestRate.tenor.name}} via oracle {{deal.common.interestRate.oracle}}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="row">
    <div class="col-xs-6" id="fixedleg">
      <table class="table-striped table-bordered table">
        <thead>
          <tr>
            <th colspan="2" class="text-center">Fixed Leg</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Payer</td>
            <td>{{deal.fixedLeg.fixedRatePayer}}</td>
          </tr>
          <tr>
            <td>Notional</td>
            <td>{{deal.fixedLeg.notional.quantity | number}} {{deal.fixedLeg.notional.token}}</td>
          </tr>
          <tr>
            <td>Payment Frequency</td>
            <td>{{deal.fixedLeg.paymentFrequency}}</td>
          </tr>
          <tr>
            <td>Effective From</td>
            <td>{{deal.fixedLeg.effectiveDate}}</td>
          </tr>
          <tr>
            <td>Fixed Rate</td>
            <td>
              <span *ngIf="!deal.fixedLeg.fixedRate.positive">-</span> {{deal.fixedLeg.fixedRate.value}}%
            </td>
          </tr>
          <tr>
            <td>Terminates</td>
            <td>{{deal.fixedLeg.terminationDate}}</td>
          </tr>
          <tr>
            <td>Payment Rule</td>
            <td>{{deal.fixedLeg.paymentRule}}</td>
          </tr>
          <tr>
            <td>Payment Calendars</td>
            <td>
              <span *ngFor="let calendar of deal.fixedLeg.paymentCalendar.calendars">
                          <span>{{calendar}}</span><span *ngIf="!$last">,</span>
              </span>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <div class="panel-group" id="fixed-holiday-calendar">
                <div class="title" id="fix-hol-cal-title">
                  <a role="button" data-toggle="collapse" data-parent="#fixed-holiday-calendar" [routerLink]="" fragment="fix-hol-cal-collapse" aria-expanded="true" aria-controls="fix-hol-cal-collapse">
                                Holiday Dates
                              </a>
                </div>
                <div id="fix-hol-cal-collapse" class="panel-collapse collapse" aria-labelledby="fix-hol-cal-title">
                  <table class="celled small table">
                    <tbody>
                      <tr class="center aligned" *ngFor="let date of deal.fixedLeg.paymentCalendar.holidayDates">
                        <td>{{date}}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col-xs-6" id="floatingleg">
      <table class="table-striped table-bordered table">
        <thead>
          <tr>
            <th colspan="2" class="text-center">Floating Leg</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Payer</td>
            <td>{{deal.floatingLeg.floatingRatePayer}}</td>
          </tr>
          <tr>
            <td>Notional</td>
            <td>{{deal.floatingLeg.notional.quantity | number}} {{deal.floatingLeg.notional.token}}</td>
          </tr>
          <tr>
            <td>Payment Frequency</td>
            <td>{{deal.floatingLeg.paymentFrequency}}</td>
          </tr>
          <tr>
            <td>Effective From</td>
            <td>{{deal.floatingLeg.effectiveDate}}</td>
          </tr>
          <tr>
            <td>Index</td>
            <td>{{deal.floatingLeg.index}}</td>
          </tr>
          <tr>
            <td>Terminates</td>
            <td>{{deal.floatingLeg.terminationDate}}</td>
          </tr>
          <tr>
            <td>Payment Rule</td>
            <td>{{deal.floatingLeg.paymentRule}}</td>
          </tr>
          <tr>
            <td>Payment Calendars</td>
            <td>
              <span *ngFor="let calendar of deal.floatingLeg.paymentCalendar.calendars">
                <span>{{calendar}}</span>
              <span ng-show="!$last">,</span>
              </span>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <div class="panel-group" id="floating-holiday-calendar">
                <div class="title" id="float-hol-cal-title">
                  <a role="button" data-toggle="collapse" data-parent="#floating-holiday-calendar" [routerLink]="" fragment="float-hol-cal-collapse" aria-expanded="true" aria-controls="float-hol-cal-collapse">
                                Holiday Dates
                              </a>
                </div>
                <div id="float-hol-cal-collapse" class="panel-collapse collapse" aria-labelledby="float-hol-cal-title">
                  <table class="celled small table">
                    <tbody>
                      <tr class="center aligned" *ngFor="let date of deal.floatingLeg.paymentCalendar.holidayDates">
                        <td>{{date}}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td>Fixing Calendars</td>
            <td>
              <span *ngFor="let calendar of deal.floatingLeg.fixingCalendar.calendars">
                          <span>{{calendar}}</span><span ng-show="!$last">,</span>
              </span>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <div class="panel-group" id="floating-fixing-calendar">
                <div class="title" id="float-fix-cal-title">
                  <a role="button" data-toggle="collapse" data-parent="#floating-fixing-calendar" [routerLink]="" fragment="float-fix-cal-collapse" aria-expanded="true" aria-controls="float-fix-cal-collapse">
                                Holiday Dates
                              </a>
                </div>
                <div id="float-fix-cal-collapse" class="panel-collapse collapse" aria-labelledby="float-fix-cal-title">
                  <table class="celled small table">
                    <tbody>
                      <tr class="center aligned" *ngFor="let date of deal.floatingLeg.fixingCalendar.holidayDates">
                        <td>{{date}}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
