<div>
    <div class="float-right" style="float: right;"><a class="btn" data-bs-toggle="modal" data-bs-target="#scheme-info-modal"><i class="bi bi-sliders"></i></a></div>
    <h1>Allocation Tool</h1>
</div>

<div class="row mb-4">

  <div class="col-12 col-lg-6 col-xl-4">
    <div class="row mb-2">
      <div class="col-7"><b>Traditional allocations</b></div>
      <div class="col-5 text-end">
        <a id="reset-base" title="Reset to Defaults" style="cursor:pointer;text-decoration:none;color:inherit;"><i class="bi bi-arrow-counterclockwise"></i></a>
      </div>
    </div>
    <div class="row mb-1">
      <div class="col-7">LDI</div>
      <div class="col-5">
        <div class="input-group input-group-sm">
          <input class="form-control text-end" type="text" name="tradOffRisk" disabled />
          <span class="input-group-text">%</span>
        </div>
      </div>
    </div>
    <div class="row mb-1">
      <div class="col-7">Waterfall</div>
      <div class="col-5">
        <div class="input-group input-group-sm">
          <input class="form-control text-end" type="text" name="tradLiquidGrowth" />
          <span class="input-group-text">%</span>
        </div>
      </div>
    </div>
    <div class="row mb-1">
      <div class="col-7">Other Growth</div>
      <div class="col-5">
        <div class="input-group input-group-sm">
          <input class="form-control text-end" type="text" name="tradOtherGrowth" />
          <span class="input-group-text">%</span>
        </div>
      </div>
    </div>
    <div class="row mb-1">
      <div class="col-7">LDI Hedge Ratio (% Assets)</div>
      <div class="col-5">
        <div class="input-group input-group-sm">
          <input class="form-control text-end" type="text" name="hedgeRatio" />
          <span class="input-group-text">%</span>
        </div>
      </div>
    </div>
  </div>

  <div class="col-12 col-lg-6 col-xl-4">
    <div class="row mb-2">
      <div class="col"><b>Novum Equivalent</b></div>
    </div>
    <div class="row mb-1">
      <div class="col-7">Gilts / collateral pool</div>
      <div class="col-5">
        <div class="input-group input-group-sm">
          <input class="form-control text-end" type="text" name="equivOffRisk" disabled />
          <span class="input-group-text">%</span>
        </div>
      </div>
    </div>
    <div class="row mb-1">
      <div class="col-7">Shaped Equity Derivatives</div>
      <div class="col-5">
        <div class="input-group input-group-sm">
          <input class="form-control text-end" type="text" name="equivGrowthOverlay" disabled />
          <span class="input-group-text">%</span>
        </div>
      </div>
    </div>
    <div class="row mb-1">
      <div class="col-7">Other Growth</div>
      <div class="col-5">
        <div class="input-group input-group-sm">
          <input class="form-control text-end" type="text" name="equivOtherGrowth" disabled />
          <span class="input-group-text">%</span>
        </div>
      </div>
    </div>
    <div class="row mb-1">
      <div class="col-7">LDI Hedge Ratio (% Assets)</div>
      <div class="col-5">
        <div class="input-group input-group-sm">
          <input class="form-control text-end" type="text" name="equivHedgeRatio" disabled />
          <span class="input-group-text">%</span>
        </div>
      </div>
    </div>
  </div>

  <div class="col-12 col-lg-6 col-xl-4">
    <div class="row mb-2">
      <div class="col-7"><b>Novum DIY</b></div>
      <div class="col-5 text-end">
        <a id="reset-diy" title="Reset to Equivalent" style="cursor:pointer;text-decoration:none;color:inherit;"><i class="bi bi-arrow-counterclockwise"></i></a>
      </div>
    </div>
    <div class="row mb-1">
      <div class="col-7">Gilts / collateral pool</div>
      <div class="col-5">
        <div class="input-group input-group-sm">
          <input class="form-control text-end" type="text" name="novumOffRisk" disabled />
          <span class="input-group-text">%</span>
        </div>
      </div>
    </div>
    <div class="row mb-1">
      <div class="col-7">Shaped Equity Derivatives</div>
      <div class="col-5">
        <div class="input-group input-group-sm">
          <input class="form-control text-end" type="text" name="novumGrowthOverlay" />
          <span class="input-group-text">%</span>
        </div>
      </div>
    </div>
    <div class="row mb-1">
      <div class="col-7">Other Growth</div>
      <div class="col-5">
        <div class="input-group input-group-sm">
          <input class="form-control text-end" type="text" name="novumOtherGrowth"/>
          <span class="input-group-text">%</span>
        </div>
      </div>
    </div>
    <div class="row mb-1">
      <div class="col-7">LDI Hedge Ratio (% Assets)</div>
      <div class="col-5">
        <div class="input-group input-group-sm">
          <input class="form-control text-end" type="text" name="novumHedgeRatio" />
          <span class="input-group-text">%</span>
        </div>
      </div>
    </div>
  </div>



</div>


<div class="row mb-4" style="position:relative;">
  <div id="error-overlay" class="text-center text-danger" 
       style="position:absolute;top:0;left:0;bottom:0;right:0;background-color:rgba(230,230,230,0.90);padding-top:4rem;font-size:1.25rem;display:none;">
  </div>
  <div class="col-12 col-lg-6">
    <ul class="nav nav-tabs small" id="alloc-tabs" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="alloc-tab" data-bs-toggle="tab" data-bs-target="#alloc-panel" 
                  type="button" role="tab" aria-controls="home" aria-selected="true">Asset Allocation</button>
      </li>
    </ul>
    <div class="tab-content" id="risk-tab-content">
      <div class="tab-pane fade show active" id="alloc-panel" role="tabpanel" aria-labelledby="alloc-tab">
        <canvas id="allocation-chart"></canvas>
      </div>
    </div>
  </div>
  <div class="col-12 col-lg-6">
    <ul class="nav nav-tabs small" id="risk-tabs" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="exhaust-tab" data-bs-toggle="tab" data-bs-target="#exhaust-panel" 
                  type="button" role="tab" aria-controls="home" aria-selected="true">Buffer Chart</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="heatmap-tab-1" data-bs-toggle="tab" data-bs-target="#heatmap-panel-1" 
                  type="button" role="tab" aria-controls="profile" aria-selected="false">Scenarios - Novum</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="heatmap-tab-2" data-bs-toggle="tab" data-bs-target="#heatmap-panel-2" 
                  type="button" role="tab" aria-controls="profile" aria-selected="false">Scenarios - DIY</button>
      </li>
    </ul>
    <div class="tab-content" id="risk-tab-content">
      <div class="tab-pane fade show active" id="exhaust-panel" role="tabpanel" aria-labelledby="exhaust-tab">
        <canvas id="exhaustion-chart"></canvas>
      </div>
      <div class="tab-pane fade" id="heatmap-panel-1" role="tabpanel" aria-labelledby="heatmap-tab-1">
        <div>
          <canvas id="heatmap-chart-trad"></canvas>
          <canvas id="heatmap-chart-base1"></canvas>
        </div>
        <div class="heatmap-hover-text"></div>
      </div>
      <div class="tab-pane fade" id="heatmap-panel-2" role="tabpanel" aria-labelledby="heatmap-tab-2">
        <div>
          <canvas id="heatmap-chart-base2"></canvas>
          <canvas id="heatmap-chart-alt"></canvas>
        </div>
        <div class="heatmap-hover-text"></div>
      </div>
    </div>
  </div>
</div>

<div class="mb-4">

<p>
<b>Notes and instuctions</b>
</p>

<p>

Please note calculations are approximate and give a guide only.

Button in the top right hand corner allows users to provide some basic liability information (duration and discount rate).

Strategies can be adjusted by changing numbers in the boxes or by dragging labelled bars in the allocation chart.

Novum Equivalent strategy is a fixed strategy created by replacing Waterfall assets with Gilts and Equity Options (Shaped Equity) Assumption is that Shaped Equity is designed to have the same risk profile as Waterfall assets.

Novum DIY allows users to create their own allocations. The reset button will reset the DIY allocations to the Novum Equivalent strategy.

Buffer chart shows the interest rate rise to exhaust the collateral pool for different shocks to the Waterfall/Shaped Equity allocations. Please note that the Traditional allocation results do not take into account any selling of waterfall assets.

Heat maps show the rise in interest rates to exhaust collateral AFTER the chosen scenario (which is a combination of a rise in interest rates and shock to waterfall/shaped equity assets).
</p>
</div>


<div class="modal fade" id="scheme-info-modal" tabindex="-1" aria-labelledby="scheme-info-modal-title" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="scheme-info-modal-title">Basic Scheme Info</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
    <div class="row mb-1">
      <div class="col-7">Duration</div>
      <div class="col-5">
        <div class="input-group input-group-sm">
          <input class="form-control text-end" type="text" name="dmt"/>
          <span class="input-group-text">years</span>
        </div>
      </div>
    </div>
    <div class="row mb-1">
      <div class="col-7">Discount rate (absolute)</div>
      <div class="col-5">
        <div class="input-group input-group-sm">
          <input class="form-control text-end" type="text" name="disc" />
          <span class="input-group-text">%</span>
        </div>
      </div>
    </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>




<script type="text/javascript" src="/docs/ldi-allocation-tool.js?raw=true"></script>

