<h4 class="bg-primary">New Device Info</h4>

<form class="form-horizontal" role="form" name="newDeviceForm" ng-submit="doNext()" novalidate>
  <div class="form-group">
    <label class="col-sm-5 control-label" for="">Add a device to room</label>
    <div class="col-sm-7">
      <select name="room" id="" ng-model="learnIr.room" ng-options="room.name for room in system.rooms | excludeMaxedRoom" required></select>
      <!-- <button type="button" class="btn btn-default" ng-model="room" ng-options="room.name for room in rooms" bs-select>  <span class="caret"></span></button> -->
    </div>
  </div>


  <div class="form-group">
    <label class="col-sm-5 control-label" for="">Select a device type to control</label>
    
    <div class="col-sm-7">
      <select name="deviceType" id="" ng-model="learnIr.device.category" ng-options="type for type in types" required></select>
      <!-- <ui-select ng-model="learnIr.device.type" theme="bootstrap">
        <ui-select-match placeholder="Select or search a type in the list...">{{$select.selected}}</ui-select-match>
        <ui-select-choices repeat="type in types | filter: $select.search">
          <span ng-bind-html="type | highlight: $select.search"></span>
        </ui-select-choices>
      </ui-select> -->
    </div>
  </div>


  <div class="form-group">
    <label class="col-sm-5 control-label" for="device-name">Enter a name for the device</label>
    <div class="col-sm-7">
      <input class="form-control" id="device-name" type="text" name="deviceName" placeholder="Device name" ng-model="learnIr.device.name" ng-maxlength="32" required>
      <p class="help-block" ng-show="newDeviceForm.deviceName.$error.required && newDeviceForm.deviceName.$dirty">A valid device name is required.</p>
      <p class="help-block" ng-show="newDeviceForm.deviceName.$error.maxlength && newDeviceForm.deviceName.$dirty">The device name cannot be longer than 32 characters.</p>
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-5 control-label" for="manufacturer-name">Enter the manufacturer name</label>
    <div class="col-sm-7">
      <input class="form-control" id="brand-name" type="text" name="brandName" placeholder="Manufacturer name" ng-model="learnIr.device.brand" ng-maxlength="32" required>
      <p class="help-block" ng-show="newDeviceForm.brandName.$error.required && newDeviceForm.brandName.$dirty">A valid manufacturer name is required.</p>
      <p class="help-block" ng-show="newDeviceForm.brandName.$error.maxlength && newDeviceForm.brandName.$dirty">The manufacturer name cannot be longer than 32 characters.</p>
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-5 control-label" for="model">Enter the exact model number</label>
    <div class="col-sm-7">
      <input class="form-control" id="model" type="text" name="model" placeholder="Model number" ng-model="learnIr.device.model" ng-maxlength="64" required>
      <p class="help-block" ng-show="newDeviceForm.model.$error.required && newDeviceForm.model.$dirty">A valid model number is required.</p>
      <p class="help-block" ng-show="newDeviceForm.model.$error.maxlength && newDeviceForm.model.$dirty">The model number cannot be longer than 64 characters.</p>
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-5 control-label">Base station infrared (IR) output setting</label>
    <div class="col-sm-7">
      <div class="radio">
        <label>
          <input type="radio" name="targetPort" ng-model="learnIr.device.target.port"  ng-value="255"> Wired IR emitters attached to my device
        </label>
      </div>

      <div class="radio">
        <label>
          <input type="radio" name="targetPort" ng-model="learnIr.device.target.port"  ng-value="0"> Wireless IR (requires line of sight from the base station to the device)
        </label>
      </div>
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-5 control-label">Select which Controller will control this device</label>
    <div class="col-sm-7">
      <select name="baseStation" ng-model="learnIr.device.target.addr" ng-options="baseStation.mac as baseStation.name +' (' + baseStation.type + ')' for baseStation in learnIr.room.bstations" required>  </select>
    </div>
  </div>
    


  <div class="left-and-right">
    <go-back state="menu.advanced.learn-ir.options"></go-back>
    <button class="btn btn-primary btn-next" type="submit" ng-disabled="newDeviceForm.$invalid">Next</button>
  </div>
</form>