<form action="" name="addRoomForm" ng-submit="finish()" novalidate>

  <div class="form-group">
    <label for="room-name">Enter the new room name</label>
    <input class="form-control" name="roomName" id="room-name" type="text" placeholder="Room name" ng-model="addRoom.name" ng-maxlength="32" required>
    <p class="help-block" ng-show="addRoomForm.roomName.$error.required && addRoomForm.roomName.$dirty">A valid room name is required.</p>
    <p class="help-block" ng-show="addRoomForm.roomName.$error.maxlength && addRoomForm.roomName.$dirty">The room name cannot be longer than 32 characters.</p>
  </div> 

  <label>Choose an available base station for the room (listed by MAC address)</label>

  <refresh-hardware reset="addRoom.baseStation" ng-model="baseStations" device-type="bsType"></refresh-hardware>

  <div class="alert alert-warning margin-top-md" role="alert" ng-if="!baseStations.length">
    <i class="fa fa-warning"></i>&nbsp;&nbsp;<strong>No Base Stations Found</strong>
    <p>There were no available base stations found on your network.</p>
  </div>

  <div class="radio" ng-repeat="baseStation in baseStations track by baseStation.mac">
    <label>
      <input type="radio" name="baseStation" ng-model="addRoom.baseStation" id="base-station-{{$index}}" ng-value="baseStation" required>
      {{baseStation.mac | macAddress}} <span class="text-muted">({{baseStation.name}})</span>
    </label>
  </div>


  <div class="left-and-right">
    <go-back state="menu.advanced.options"></go-back>
    <button class="btn btn-primary" type="submit" ng-disabled="addRoomForm.$invalid || !baseStations.length"> Finish</i></button>
  </div>
</form>