<h4 class="bg-primary">Advanced Device Name</h4>
<p>Enter a name for the device which will appear on the remote control.</p>

<p ng-if="device.category.name">Device type is: <strong class="text-primary">{{device.category.name}}</strong></p>

<form name="deviceNameForm" role="form" ng-submit="doNext()" novalidate>

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

  <div class="left-and-right">
    <go-back state="menu.programming.add-advanced-device.device-type"></go-back>
    <button type="submit" class="btn btn-primary btn-next" ng-disabled="deviceNameForm.$invalid">Next</button>
  </div>

</form>
