<div class="chart-container">
    <!-- Only the scope variables provided through the attributes are available here !!! -->
    <h3 ng-click="isCollapsed = !isCollapsed; control.dsShow = false">
        <button class="btn btn-default btn-xs pull-right" ng-show="!isCollapsed" title="Click to collapse">&#8722;</button>
        <button class="btn btn-default btn-xs pull-right" ng-show="isCollapsed" title="Click to expand">+</button>
        <span>{{sensor.desc}} <!--(Remote: {{sensor.remote}})--></span>
        <small title="The number of data points per second">{{control.frequency}} Hz</small>
    </h3>
    <div collapse="isCollapsed" ng-class="{visible: control.dsShow}">
        <!-- Header -->
        <div>
            <span ng-repeat="path in control.legendSettings" style="margin: 0 5px;">
                <input type="checkbox" ng-init="path.show = true" ng-model="path.show" /> <span style="color: {{path.color}}" ng-bind-html="path.legend"></span>
            </span>
        </div>
        <!-- Chart + FFT -->
        <div>
            <span ng-show="loading" class='alert alert-warning' style="position: absolute; left: 45%; top: 30%;">
                Please wait ...
            </span>
            <div class="chart"></div>
            <iolab-fft></iolab-fft>
        </div>

        <div class="chart-footer">
            <!-- chart mode -->
            <div class="input-group input-group-sm pull-left btn-group">
                <label class="btn btn-default btn-sm"
                       ng-repeat="mode in chartModes"
                       ng-model="control.chartMode" btn-radio="mode">
                    <span class="glyphicon" ng-class="mode.glyphicon"></span>
                </label>
            </div>
            <!-- timeAverage -->
            <div class="input-group input-group-sm pull-left">
                <span class="input-group-addon" title="Average across a number of data points">Data smoothing:</span>
                <div class="input-group-btn">
                    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                            ng-click="control.dsShow = true"> {{control.timeAverage}} <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu pull-right skinny">
                        <li ng-repeat="delta in timeAverages"><a ng-click="control.timeAverage = delta">{{ delta }}</a></li>
                    </ul>
                </div>
            </div>
            <!-- fftSampleRate -->
            <div class="input-group input-group-sm pull-left">
                <span class="input-group-addon" title="FFT sample rate">FFT:</span>
                <div class="input-group-btn">
                    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                            ng-click="control.dsShow = true"> {{control.fftSampleRate}} <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu pull-right skinny">
                        <li ng-repeat="rate in fftSampleRates"><a ng-click="control.fftSampleRate = rate">{{ rate || "-" }}</a></li>
                    </ul>
                </div>
            </div>
            <!-- exportData -->
            <button class="btn btn-default btn-sm" type="button" ng-click="exportData(sensor)" ng-disabled="control.exportDataDisabled">Export data {{exportDataDisabled}}</button>
            <!-- resetSensorOffset -->
            <span style="margin-right: 8px;"></span>
            <button class="btn btn-default btn-sm" type="button" ng-click="resetSensorOffset(sensor)" ng-show="sensor.sensorType == 8 || sensor.sensorType == 9">Rezero sensor</button>

            <div ng-controller="alertCtrl">
                <div ng-show="alerts.length != 0" style="margin-top:20px;">
                    <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">
                        The data has been exported to the file <strong>{{alert.message}}</strong>
                    </alert>
                </div>
            </div>
        </div>
    </div>
</div>
