<h2>{{ title }}</h2>
<p>
    Overlays, like technical indicators, are a set of derived data that is calculated by
    applying one or more formulas to the original set of data. Overlays are generally used
    to forecast an asset's market direction and generally plotted with the original
    data set since the the Y-axis scales are the same.
</p>

<!-- Symbol -->
<label>Symbol</label>
<wj-combo-box items-source="dataList"
              selected-index-changed="selectedSymbolChanged(s,e)"
              display-member-path="name"
              selected-value-path="symbol"
              selected-value="selectedSymbol">
</wj-combo-box>

<!-- overlays Chart -->
<wj-financial-chart items-source="data"
                    binding-x="date"
                    control="ctx.chart"
                    rendered="chartRendered(s,e)">
    <wj-financial-chart-series binding="high,low,open,close"
                               chart-type="Candlestick"
                               name="{{ selectedSymbol | uppercase }}">
    </wj-financial-chart-series>

    <wj-flex-chart-bollinger-bands binding="close"
                                   name="Bollinger Bands"
                                   period="{{ ctx.properties.bollingerPeriod }}"
                                   multiplier="{{ ctx.properties.bollingerMultiplier }}"
                                   visibility="selectedOverlay === 'bollinger' ? 'Visible' : 'Hidden'">
    </wj-flex-chart-bollinger-bands>

    <wj-flex-chart-envelopes binding="close"
                             name="Envelopes"
                             period="{{ ctx.properties.envelopePeriod }}"
                             type="{{ ctx.properties.envelopeType }}"
                             size="{{ ctx.properties.envelopeSize }}"
                             visibility="selectedOverlay === 'envelopes' ? 'Visible' : 'Hidden'">
    </wj-flex-chart-envelopes>
</wj-financial-chart>

<!-- Settings -->
<div class="panel-group" id="settingsShort">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#settings" href="#settingsBody" target="_self">{{ title }} Settings</a>
            </h4>
        </div>
        <div id="settingsBody" class="panel-collapse collapse in">
            <div class="panel-body">
                <!-- Overlay Selector -->
                <ul class="list-inline">
                    <li>
                        <label>Overlay</label>
                        <wj-combo-box control="overlayComboBox"
                                      items-source="overlays"
                                      selected-value-path="abbreviation"
                                      display-member-path="name"
                                      selected-value="selectedOverlay">
                        </wj-combo-box>
                    </li>
                </ul>

                <!-- Bollinger Bands Properties -->
                <ul class="list-inline" ng-if="selectedOverlay === 'bollinger'">
                    <li>
                        <label>Period</label>
                        <wj-input-number value="ctx.bollingerPeriod" value-changed="bollingerPeriodChanged(s,e)"
                                         min="2" max="{{ data.length > 0 ? data.length - 1 : ctx.properties.bollingerPeriod }}"
                                         step="1" format="n0">
                        </wj-input-number>
                    </li>
                    <li>
                        <label>Multiplier</label>
                        <wj-input-number value="ctx.bollingerMultiplier" value-changed="bollingerMultiplierChanged(s,e)"
                                         min="1" max="100"
                                         step="1" format="n0">
                        </wj-input-number>
                    </li>
                </ul>

                <!-- Envelope Properties -->
                <ul class="list-inline" ng-if="selectedOverlay === 'envelopes'">
                    <li>
                        <label>Period</label>
                        <wj-input-number value="ctx.envelopePeriod" value-changed="envelopePeriodChanged(s,e)"
                                         min="2" max="{{ data.length > 0 ? data.length - 1 : ctx.properties.envelopePeriod }}"
                                         step="1" format="n0">
                        </wj-input-number>
                    </li>
                    <li>
                        <label>Size</label>
                        <wj-input-number value="ctx.envelopeSize" value-changed="envelopeSizeChanged(s,e)"
                                         min="0" max="1"
                                         step="0.01" format="p0">
                        </wj-input-number>
                    </li>
                    <li>
                        <wj-menu header="Type"
                                 value="ctx.properties.envelopeType">
                            <wj-menu-item value="'Simple'">Simple</wj-menu-item>
                            <wj-menu-item value="'Exponential'">Exponential</wj-menu-item>
                        </wj-menu>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>