<div ng-show="showOutputConfig">
    <h4 class="no-print hidden-xs" ng-if="remotesToDisplay.value != 3">Output <small>(Remote {{remote}})</small></h4>
    <h4 ng-click="isCollapsed = !isCollapsed" ng-show="remotesToDisplay.value == 3" class="pointer" ng-class="{'visible-xs': remotesToDisplay.value != 3}">
        <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>
        Output <small>(Remote {{remote}})</small>
    </h4>
    <!--<h3 class="no-print">Output Config <small>(Remote {{remote}})</small></h3>-->
    <div class="no-print" collapse="isCollapsed">
        <div>
            <span style="padding-top: 5px; font-weight: bold; font-size: 120%">D6 output</span>
            <div class="btn-toolbar" style="padding-top: 5px;" role="toolbar">
                <div class="btn-group">
                    <button type="button" class="btn btn-default btn-xs" ng-change="D6StateChange()" ng-model="D6State" btn-radio="0" ng-disabled="remoteOff">Off</button>
                    <button type="button" class="btn btn-default btn-xs" ng-change="D6StateChange()" ng-model="D6State" btn-radio="2" ng-disabled="remoteOff">On</button>
                </div>
                <div class="btn-group" ng-show="D6State == 2" style="margin-left:12px;">
                    <button type="button" class="btn btn-default btn-xs" ng-change="D6LevelChange()" ng-model="D6Level" btn-radio="0" ng-disabled="remoteOff">0 V</button>
                    <button type="button" class="btn btn-default btn-xs" ng-change="D6LevelChange()" ng-model="D6Level" btn-radio="1" ng-disabled="remoteOff">3.3 V</button>
                </div>
            </div>
        </div>
        <div style="padding-top: 15px;" ng-init="expert = { options: false }">
            <a href="" ng-click="expert.options = true" ng-if="!expert.options">
                Show Expert Options
            </a>
            <form class="expert-options" collapse="!expert.options">
                <a href="" class="pull-right" ng-click="expert.options = false">x</a>
                <h5 style="margin-top: 0">Generic output</h5>
                <div class="form-group" style="width: 35%; float: left; margin-right: 5%;">
                    <label>SensorID</label>
                    <input class="form-control input-sm" ng-model="output.sensorID">
                </div>
                <div class="form-group" style="width: 27.5%; float: left; margin-right: 5%;">
                    <label>Key</label>
                    <input class="form-control input-sm" ng-model="output.key">
                </div>
                <div class="form-group" style="width: 27.5%; float: left;">
                    <label>Value</label>
                    <input class="form-control input-sm" ng-model="output.value">
                </div>
                <button class="btn btn-primary form-control" ng-click="setOutputConfig()" ng-disabled="remoteOff">Set output</button>                
            </form>
        </div>
    </div>
</div>