<div class="no-print sensor-selector-container">
    <h4 ng-show="displayMode.value != 3 && !inPlayer" class="hidden-xs" >Sensors <small>(Remote {{remote}})</small></h4>
    <h4 ng-show="displayMode.value == 3 || inPlayer" class="pointer" ng-class="{'visible-xs': displayMode.value != 3 && !inPlayer}" ng-click="isCollapsed = !isCollapsed">
        <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>
        Sensors <small>(Remote {{remote}})</small>
    </h4>

    <div collapse="isCollapsed">

        <div ng-if="IOLabMode.showFixedConfigMode" class="btn-group config-selector" dropdown dropdown-append-to-body is-open="status.isOpen">
            <button class="btn btn-default btn-xs dropdown-toggle" dropdown-toggle ng-disabled="!IOLab.isNewAcquisition()">
                <span ng-if="!selectedConfig">Configurations</span>
                <span ng-if="selectedConfig">{{selectedConfig}} - {{configService.getFixedConfig(selectedConfig).desc}}</span>
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu small" role="menu">
                <li ng-repeat="config in fixedConfigService.getAvailableConfigs(remote)" ng-class="{ active: config == selectedConfig }">
                    <a href="#" ng-click="selectConfig(remote, config)">
                        {{config}} - {{ configService.getFixedConfig(config).desc }}
                    </a>
                </li>
            </ul>
        </div>

        <div class="sensor-list">
            <div class="checkbox animate-show" title="Sensor code {{sensor.code}}"
                 ng-repeat="sensor in fixedConfigService.sensors[remote] | orderBy:'desc'">

                <input type="checkbox" ng-checked="sensor.checked" ng-disabled="!sensor.available"
                       ng-click="fixedConfigService.sensorChecked(remote, sensor)" value="{{sensor.code}}" id="Remote{{remote}}-Sensor{{sensor.code}}" />
                <label ng-class="{'disabled': !sensor.available, 'available': sensor.sampleRate}" for="Remote{{remote}}-Sensor{{sensor.code}}">{{sensor.desc}}</label>
                <span ng-if="sensor.sampleRate || sensor.checked" title="Sample rate">({{sensor.sampleRate}} Hz)</span>

                <!-- Header 3V vs 3V3 selector -->
                <span ng-if="[21, 22, 23].indexOf(sensor.code) > -1 && [8, 12, 19, 20, 21, 38].indexOf(selectedConfig) > -1" class="gray">
                    <span ng-if="[8, 38].indexOf(selectedConfig) > -1">3.0V</span>
                    <span ng-if="[12, 19, 20, 21].indexOf(selectedConfig) > -1">3.3V</span>
                </span>

                <div ng-repeat="subChart in sensor.subCharts" ng-if="sensor.checked" style="margin-left: 20px;">
                    <input type="checkbox" ng-checked="subChart.checked"
                           ng-click="fixedConfigService.sensorChecked(remote, sensor, subChart.coordinate)" id="remote-{{remote}}-subChart{{subChart.coordinate}}" />
                    <label for="remote-{{remote}}-subChart{{subChart.coordinate}}">{{subChart.desc}}</label>
                </div>
            </div>
        </div>

    </div>
</div>