<div class="chart-container">
    <!-- Only the scope variables provided through the attributes are available here !!! -->
    <h4>
        <span style="cursor: pointer;" ng-click="isCollapsed = !isCollapsed; control.dsShow = false">
               {{sensor1.desc}} <span ng-if="sensor1.subDesc"> - {{sensor1.subDesc}}</span>
            vs {{sensor2.desc}} <span ng-if="sensor2.subDesc"> - {{sensor2.subDesc}}</span>
        </span>
        <small title="The number of data points per second">({{frequency}} Hz)</small>
    </h4>
    <div collapse="isCollapsed" ng-class="{visible: control.dsShow}" style="position: relative;">

        <!-- Chart -->
        <div>
            <span ng-show="alert.loading" class='alert alert-warning chart-loading'>Please wait ...</span>
            <div class="chart-holder"></div>
        </div>

        <!--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: 0px;">
            <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;">
            <div class="chart-footer">
                <!-- Coordinates 1 -->
                <div class="input-group input-group-sm pull-left">
                    <span class="input-group-addon" title="Coordinate selection">{{sensor1.desc}}:</span>
                    <div class="input-group-btn" dropdown>
                        <button class="btn btn-default dropdown-toggle"
                                dropdown-toggle data-toggle="dropdown"
                                ng-click="control.dsShow = true"
                                ng-disabled="coordinates1.length === 0">
                            {{control.coordinate1}} <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu pull-right skinny">
                            <li ng-repeat="coord in coordinates1" ng-click="control.coordinate1 = coord" class="dpdn-opt">{{ coord }}</li>
                        </ul>
                    </div>
                </div>

                <!-- Coordinates 2 -->
                <div class="input-group input-group-sm pull-left">
                    <span class="input-group-addon" title="Coordinate selection">{{sensor2.desc}}:</span>
                    <div class="input-group-btn" dropdown>
                        <button class="btn btn-default dropdown-toggle"
                                dropdown-toggle data-toggle="dropdown"
                                ng-click="control.dsShow = true"
                                ng-disabled="coordinates2.length === 0">
                            {{control.coordinate2}} <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu pull-right skinny">
                            <li ng-repeat="coord in coordinates2" ng-click="control.coordinate2 = coord" class="dpdn-opt">{{ coord }}</li>
                        </ul>
                    </div>
                </div>

                <!-- time range -->
                <div class="input-group input-group-sm pull-left">
                    <span class="input-group-addon" title="Time range selection">Δt (ms):</span>
                    <div class="input-group-btn" dropdown>
                        <button class="btn btn-default dropdown-toggle" dropdown-toggle data-toggle="dropdown" ng-click="control.dsShow = true">
                            {{control.timeRange}} <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu pull-right skinny">
                            <li ng-repeat="delta in timeRanges" ng-click="control.timeRange = delta" class="dpdn-opt">{{ delta }}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
