<div class="editor-container">
  <h4 class="bg-primary">Registration</h4>

  <form name="registerForm" role="form" ng-submit="doNext()" enter-press="doNext()" novalidate>

    <div class="form-group">
      <label for="model-name"> Base Station Model Name</label>
      <!-- <select id="model-name" ng-model="register.modelType" ng-options="modelName for modelName in availableModels"></select> -->
      <button type="button" class="btn btn-default margin-left-md" ng-model="register.modelType" ng-options="modelName for modelName in availableModels" bs-select>  <span class="caret"></span></button>
    </div>


    <div class="form-group">
      <label for="key1">Provide a URC programming Key</label>

      <div class="system-key">
        <input class="form-control programming-key" id="key1" type="text" maxlength="4" ng-minlength="4" ng-model="register.key.first" ng-pattern="/^[a-z0-9]+$/i" auto-tab-to="key2" required>

        <input class="form-control programming-key" id="key2" type="text" maxlength="4" ng-minlength="4" ng-model="register.key.second" ng-pattern="/^[a-z0-9]+$/i" auto-tab-to="key3" required>

        <input class="form-control programming-key" id="key3" type="text" maxlength="4" ng-minlength="4" ng-model="register.key.third" ng-pattern="/^[a-z0-9]+$/i" auto-tab-to="key4" required>

        <input class="form-control programming-key" id="key4" type="text" maxlength="4" ng-minlength="4" ng-model="register.key.fourth" ng-pattern="/^[a-z0-9]+$/i" required>

        <p class="help-block" ng-show="registerForm.key.$error.required && registerForm.key.$dirty">Please enter a valid URC System Key.</p>
      </div>
    </div>

    <div class="form-group">
      <div class="radio">
        <label>
          <input type="radio" ng-model="register.option" value="existing">
          Add this system to an existing user's account
        </label>
      </div>
    </div>

    <div class="form-group" ng-if="register.option === 'existing'" >
      <div class="form-group">
        <input class="form-control" type="text" name="username" placeholder="Username" ng-model="register.username" ng-pattern="/^[a-z0-9](_(?!(\.|_))|\.(?!(_|\.))|[a-z0-9]){4,18}[a-z0-9]$/i" required>
      </div>


      <div class="form-group">
        <input class="form-control" type="password" name="password" placeholder="Password" ng-minlength="8" ng-model="register.password" ng-pattern="/^(?:[0-9]+[a-z]|[a-z]+[0-9])[a-z0-9`\-=\\\[\];',\./~!@#\$%\^&\*\(\)_\+|\{\}:<>\?]*$/i" required>

        <p class="help-block" ng-show="registerForm.password.$error.pattern && registerForm.password.$dirty" >Your password must be 8 characters long and include 1 letter and number.</p>
      </div>
    </div>

    <div class="form-group">
      <div class="radio">
    	  <label>
          <input type="radio" ng-model="register.option" value="create"> I need to create a user account
        </label>
    	</div>
    </div>

    <div class="left-and-right">
      <go-back state="home"></go-back>
      <button class="btn btn-primary btn-next" type="submit" ng-disabled="registerForm.$invalid">Next</button>
    </div>
  </form>
</div>