<div>
  <h4 class="bg-primary">
    Select the
    <span ng-if="device.type === 0">Power Off</span>
    <span ng-if="device.type === 1">Power On</span>
    <span ng-if="device.type === 2">Input</span>
    command for this device
  </h4>

  <h5>Device name: <span class="text-primary">{{device.name}}</span></h5>

  <div class="row">
    <div class="col-sm-6">
      <p>
        <span ng-if="device.type !== 2">
          Select the command that turns the device <span ng-if="device.type === 0">off</span> <span ng-if="device.type === 1">on</span> from this list.
        </span>

        <span ng-if="device.type === 2">
          Select the command that will allow this device to be changed to the correct input.
          It can be a command that cycles through all of the inputs or one that jumps directly to the correct input.
        </span>
      </p>

      <test-function ng-if="!$parent.virtualEditor"
                     ng-disabled="!device.func"
                     system-id="systemId"
                     room-id="room.id"
                     device="device"
                     func="device.func">
      </test-function>

    </div>

    <div class="col-sm-6">
      <ui-select ng-model="device.func" theme="bootstrap">
        <ui-select-match placeholder="Select or search a function...">{{$select.selected.name}}</ui-select-match>
        <ui-select-choices repeat="function in fs.functions | filter: $select.search">
          <span ng-bind-html="function.name | highlight: $select.search"></span>
        </ui-select-choices>
      </ui-select>
    </div>
  </div>
</div>
