<div class="chart-container">
    <!-- Only the scope variables provided through the attributes are available here !!! -->
    <h4 style="margin-bottom: 0;">
        <span style="cursor: pointer;" ng-click="isCollapsed = !isCollapsed; control.dsShow = false">
            {{sensor.desc}} <span ng-if="sensor.subDesc"> - {{sensor.subDesc}}</span>
        </span>
        <small title="The number of data points per second">({{control.frequency}} Hz)</small>
        <small ng-if="showRemote">Remote {{sensor.remote}}</small>
        &nbsp;
        <small ng-if="control.traceSettings.length > 1"
               ng-repeat="trace in control.traceSettings" style="margin: 0 10px 0 0;">
            <input type="checkbox" ng-model="trace.show" />
            <span style="color: {{trace.color}}" ng-bind-html="trace.legend"></span>
        </small>
    </h4>

    <div collapse="isCollapsed" ng-class="{visible: control.dsShow}" style="position:relative;">
        <!-- Chart + FFT -->
        <div ng-mouseenter="open.tools = false">
            <span ng-show="alert.loading" class='alert alert-warning chart-loading'>Please wait ...</span>
            <span ng-show="alert.error" class='alert alert-danger chart-loading'>No data to display ...</span>
            <iolab-analytics></iolab-analytics>
            <div class="chart-holder"></div>
            <iolab-fft ng-if="control.fftSampleRate"></iolab-fft>
        </div>

        <!-- Export alert messages -->
        <div ng-controller="alertCtrl" ng-if="alerts.length != 0">
            <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)" class="export-alert">
                <span ng-if="alert.type === 'success'">The data has been saved to file <strong>{{alert.message}}</strong></span>
                <span ng-if="alert.type === 'danger'">An error occurred when exporting the data: <strong>{{alert.message}}</strong></span>
            </alert>
        </div>

        <!--yAxisSettings button-->
        <button ng-click="open.axisSettings = true" ng-if="!open.axisSettings" title="y-axis settings"
                type="button" class="btn btn-default btn-sm chart-option-button">
            <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
        </button>
        <!--yAxisSettings-->
        <div ng-if="open.axisSettings" ng-mouseleave="open.axisSettings = false"
             style="z-index: 1100; position: absolute; bottom: 0;">
            <div class="chart-axisSettings">
                <h5 style="margin: 0 0 8px 0;">Y-axis settings</h5>
                <div class="btn-group-sm" style="margin-bottom: 5px;">
                    <input type="checkbox"
                           ng-change="yAxisSettingsChanged()"
                           ng-model="yAxisSettings.autoScaleY"/>
                    <span>&nbsp;Autoscale</span>
                </div>
                <div class="input-group input-group-sm" style="margin-bottom: 5px;">
                    <label>Max value</label>
                    <input type="text" class="form-control"
                           ng-change="yAxisSettingsChanged()"
                           ng-model-options="{ debounce: 250 }" ng-model="yAxisSettings.scales[1]">
                </div>
                <div class="input-group input-group-sm">
                    <label>Min value</label>
                    <input type="text" class="form-control"
                           ng-change="yAxisSettingsChanged()"
                           ng-model-options="{ debounce: 250 }" ng-model="yAxisSettings.scales[0]">
                </div>
            </div>
        </div>

        <!-- Rezeroing button -->
        <a ng-if="allowResetSensorOffset()"
           class="btn btn-default btn-sm chart-option-button"
           ng-class="{ 'chart-option-button-disabled': rezeroSensorDisabled() }"
           ng-click="resetSensorOffset(sensor)"
           style="left: 50px;" type="button">
            <span>Rezero sensor</span>
            <span ng-if="sensorOffsetSet()" class="glyphicon glyphicon-ok" style="color: green;"></span>
        </a>

        <!--Footer button-->
        <button ng-click="open.tools = true" ng-if="!open.tools" title="Tool bar"
                type="button" class="btn btn-default btn-sm chart-option-button" style="left: 25px;">
            <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span>
        </button>
        <!--Footer-->
        <div ng-if="open.tools" ng-mouseleave="open.tools = false"
             style="z-index: 1100; position: absolute; bottom: 0; left: 23px;">
            <div class="chart-footer">
                <!-- timeAverage -->
                <div class="input-group input-group-xs">
                    <span class="input-group-addon" title="Average across a number of data points">Smoothing</span>
                    <div class="input-group-btn" dropdown>
                        <button class="btn btn-default btn-xs dropdown-toggle" dropdown-toggle 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" ng-click="control.timeAverage = delta" class="dpdn-opt">{{ delta }}</li>
                        </ul>
                    </div>
                </div>

                <!-- fftSampleRate -->
                <div class="input-group input-group-xs">
                    <span class="input-group-addon" title="FFT sample rate">FFT</span>
                    <div class="input-group-btn" dropdown>
                        <button class="btn btn-default btn-xs dropdown-toggle" dropdown-toggle ng-click="control.dsShow = true">
                            {{control.fftSampleRate}} <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu pull-right skinny" role="menu">
                            <li ng-repeat="rate in fftSampleRates" ng-click="control.fftSampleRate = rate.value" class="dpdn-opt">{{rate.label}}</li>
                        </ul>
                    </div>
                </div>

                <!-- export btn -->
                <div class="btn-group btn-group-xs">
                    <button class="btn btn-default btn-xs" ng-click="exportData(sensor)" ng-disabled="control.exportDataDisabled">
                        <img src="images/export.png" width="14" height="12" /> Export to CSV
                    </button>
                </div>

                <!-- Reverse y-axis -->
                <div class="btn-group-xs" style="display: inline-block;"
                     ng-show="[1, 3, 8, 9].indexOf(sensor.sensorType) > -1">
                    <input type="checkbox" ng-model="control.reverseAxis"/> <span>Reverse y-axis</span>
                </div>

            </div>
        </div>
    </div>
</div>
