<h4 class="bg-primary">What name should appear on the new button?</h4>

<form name="btnNameForm" ng-submit="doNext()" novalidate>
  <label for="button-name">Name of the new button for this automated activity</label>
  <input class="form-control" type="text" name="btnName" placeholder="Button name" ng-model="addMacro.button.name" ng-maxlength="32" required>
  <p class="help-block" ng-show="btnNameForm.btnName.$error.required && btnNameForm.btnName.$dirty">A valid button name is required.</p>
  <p class="help-block" ng-show="btnNameForm.btnName.$error.maxlength && btnNameForm.btnName.$dirty">The button name cannot be longer than 32 characters.</p>  

  <div class="left-and-right">
    <go-back state="menu.advanced.add-macros.macro-type"></go-back>
    <button class="btn btn-primary btn-next" type="submit" ng-disabled="btnNameForm.$invalid">Next</button>
  </div>
</form>

