<div class="editor-container">
  <h4 class="bg-primary">Enter your Programming Key</h4>
  <p>You have selected to replace the primary base station. To swap or replace the primary base station for the system you must obtain a Programming Key from the Setup Menu on one of the remote controls in the system.</p>
  <p>When you have the key, enter it below to proceed.</p>
  
  <form name="keyForm" role="form" ng-submit="doNext()" enter-press="doNext()" novalidate>

    <div class="form-group">
      <label for="model-name"> Base Station Model</label>
      <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">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="keyForm.key.$error.required && keyForm.key.$dirty">Please enter a valid URC System Key.</p>
      </div>
    </div>
    
    <div class="left-and-right">
      <button class="btn btn-primary btn-previous" ng-click="goBack()">Back</button>
      <button class="btn btn-primary btn-next" type="submit" ng-disabled="keyForm.$invalid">Next</button>
    </div>
  </form>
</div>