<div>
    <h2>{{title}}</h2>
    <p>
        Moving average trend lines are used to analyze data by creating a series
        of averages of the original data set.
    </p>    <!-- FinancialChart -->
    <wj-financial-chart #chart
                        [itemsSource]="data"
                        bindingX="date"
                        (rendered)="chartRendered()">
        <wj-financial-chart-series binding="close"
                                   [name]="selectedSymbol | uppercase">
        </wj-financial-chart-series>
        <wj-flex-chart-moving-average binding="close"
                                      [name]="shortProps.period + ' ' + shortProps.name"
                                      [period]="shortProps.period"
                                      [type]="shortProps.type">
        </wj-flex-chart-moving-average>
        <wj-flex-chart-moving-average binding="close"
                                      [name]="longProps.period + ' ' + longProps.name"
                                      [period]="longProps.period"
                                      [type]="longProps.type">
        </wj-flex-chart-moving-average>
    </wj-financial-chart>

    <!-- "Short" MA Settings -->
    <div class="panel-group" id="settingsShort">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    {{ shortProps.period }} {{ shortProps.name }} Settings
                </h4>
            </div>
            <div id="settingsBody" class="panel-collapse collapse in">
                <div class="panel-body">
                    <ul class="list-inline">
                        <li>
                            <label>Period</label>
                            <wj-input-number #iptSP (valueChanged)="shortPeriodChanged(iptSP)"
                                             [value]="50"
                                             [min]="2" [max]="data.length > 0 ? data.length - 1 : shortProps.period"
                                             [step]="1" format="n0">
                            </wj-input-number>
                        </li>
                        <li>
                            <wj-menu header="Moving Avg. Type"
                                     [(value)]="shortProps.type">
                                <wj-menu-item value="Simple">Simple</wj-menu-item>
                                <wj-menu-item value="Weighted">Weighted</wj-menu-item>
                                <wj-menu-item value="Exponential">Exponential</wj-menu-item>
                                <wj-menu-item value="Triangular">Triangular</wj-menu-item>
                            </wj-menu>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- "Long" MA Settings -->
    <div class="panel-group" id="settingsLong">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    {{ longProps.period }} {{ longProps.name }} Settings
                </h4>
            </div>
            <div id="settingsBody" class="panel-collapse collapse in">
                <div class="panel-body">
                    <ul class="list-inline">
                        <li>
                            <label>Period</label>
                            <wj-input-number #iptLP (valueChanged)="longPeriodChanged(iptLP)"
                                             [value]="200"
                                             [min]="2" [max]="data.length > 0 ? data.length - 1 : longProps.period"
                                             [step]="1" format="n0">
                            </wj-input-number>
                        </li>
                        <li>
                            <wj-menu header="Moving Avg. Type"
                                     [(value)]="longProps.type">
                                <wj-menu-item value="Simple">Simple</wj-menu-item>
                                <wj-menu-item value="Weighted">Weighted</wj-menu-item>
                                <wj-menu-item value="Exponential">Exponential</wj-menu-item>
                                <wj-menu-item value="Triangular">Triangular</wj-menu-item>
                            </wj-menu>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>