<h4 class="bg-primary">Create New User</h4>

<form name="addUserForm" ng-submit="addUserForm.$valid && doNext()" novalidate>
  <div class="form-group">
    <label for="first-name">First Name:</label>
    <input class="form-control" id="first-name" type="text" name="first_name" placeholder="Enter a first name"
           ng-model="dealerInfo.addUser.first_name" required>
    <p class="help-block" ng-show="addUserForm.first_name.$error.required && addUserForm.first_name.$dirty">A valid
      first name is required.</p>
  </div>

  <div class="form-group">
    <label for="last-name">Last Name:</label>
    <input class="form-control" id="last-name" type="text" name="last_name" placeholder="Enter a last name"
           ng-model="dealerInfo.addUser.last_name" required>
    <p class="help-block" ng-show="addUserForm.last_name.$error.required && addUserForm.last_name.$dirty">A valid last
      name is required.</p>
  </div>

  <div class="form-group">
    <label for="email">Email:</label>
    <input class="form-control" id="email" type="email" name="email" placeholder="Enter the user's email address"
           ng-model="dealerInfo.addUser.email" required>
    <p class="help-block" ng-show="addUserForm.email.$error.required && addUserForm.email.$dirty">A valid email address
      is required.</p>
  </div>

  <div class="form-group">
    <label for="confirm-email">Confirm Email:</label>
    <input class="form-control" id="confirm-email" type="email" name="confirm_email"
           placeholder="Enter the user's email address" ng-model="confirm_email" match="dealerInfo.addUser.email"
           required>
    <p class="help-block" ng-show="addUserForm.confirm_email.$error.required && addUserForm.confirm_email.$dirty">A
      valid email address is required.</p>
    <p class="help-block" ng-show="addUserForm.confirm_email.$dirty && addUserForm.confirm_email.$error.match">Your
      emails must match.</p>
  </div>

  <div class="form-group">
    <label for="phone-number">Phone:</label>
    <input class="form-control" id="phone-number" type="text" name="phone_number"
           placeholder="Enter the user's phone number" ng-model="dealerInfo.addUser.phone_number" required>
    <p class="help-block" ng-show="addUserForm.phone_number.$error.required && addUserForm.phone_number.$dirty">A valid
      phone number is required.</p>
  </div>

  <div class="form-group">
    <label for="account-type">Account Type:</label>
    <select id="account-type" class="form-control" name="account_type" ng-model="dealerInfo.addUser.account_type">
      <option ng-repeat="category in categories track by $index" value="{{category.value}}">{{category.value}}</option>
    </select>
  </div>

  <div class="left-and-right">
    <a ui-sref="dealer-account-settings.main" class="btn btn-danger">Cancel</a>
    <button type="submit" class="btn btn-primary" ng-disabled="addUserForm.$invalid">Add</button>
  </div>
</form>
