<h3 class="text-center"><i class="fa fa-magic"></i>  Importing Job Data</h3>


<div class="installer-container">

  <h4 class="bg-primary">Import job data - Enter your programming key</h4>

  <p><strong>Job Request ID</strong>: {{jobId}}</p>
  <p>&nbsp;</p>

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

    <div class="form-group">
      <div class="radio">
        <label>
          <input type="radio" ng-model="import.option" value="new-system">
          Import into a new system
        </label>
      </div>
    </div>

    <div class="row" ng-if="import.option == 'new-system'">

      <div class="col-md-11 col-md-offset-1">
        <div class="form-group">
          <label for="model-name"> Model Name</label>
          <button type="button" class="btn btn-default margin-left-md" ng-model="import.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="import.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="import.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="import.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="import.key.fourth" ng-pattern="/^[a-z0-9]+$/i" required>

            <p class="help-block" ng-show="importForm.key.$error.required && importForm.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="import.user" value="existing">
              Add this system to an existing account
            </label>
          </div>
        </div>

        <div class="form-group" ng-if="import.user === 'existing'" >
          <div class="form-group">
            <input class="form-control" type="text" name="username" placeholder="Username" ng-model="import.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="import.password" ng-pattern="/^(?:[0-9]+[a-z]|[a-z]+[0-9])[a-z0-9`\-=\\\[\];',\./~!@#\$%\^&\*\(\)_\+|\{\}:<>\?]*$/i" required>

            <p class="help-block" ng-show="importForm.password.$error.pattern && importForm.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="import.user" value="create"> I need to create an account
            </label>
          </div>
        </div>

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

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

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

            <p class="help-block" ng-show="importForm.create_confirmed_password.$error.match && importForm.create_confirmed_password.$dirty" >The specified passwords do not match.</p>
          </div>

          <div class="form-group">
            <input class="form-control" type="email" name="create_email" placeholder="Enter your email address here..." ng-model="import.create.email" required>
            <p class="help-block" ng-show="importForm.create_email.$invalid && importForm.create_email.$dirty" >Please enter a valid email address.</p>
          </div>
        </div>
      </div>

    </div>

    <div class="form-group">
      <div class="radio">
        <label>
          <input type="radio" ng-model="import.option" value="previous-import">
          Continue a previous import
        </label>
      </div>
    </div>

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

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

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

</div>

