<div class="signup-form-element">
  <h4 ng-show="!registering && !awaitingConfirmation">
    Create new account
  </h4>

  <div class="co-alert co-alert-warning" ng-show="registerIssue">
    {{ registerIssue }}
  </div>

  <form class="form-signup" name="signupForm" ng-submit="register()" ng-show="!awaitingConfirmation && !registering">
    <label for="username">Username:</label>
    <input type="text" class="form-control" placeholder="Requested username" name="username" ng-model="newUser.username" autofocus required ng-pattern="/^[a-z0-9_]{4,30}$/">

    <label for="email">E-mail address:</label>
    <input type="email" class="form-control" placeholder="Your email address" name="email" ng-model="newUser.email" required>

    <label for="password">Password:</label>
    <input type="password" class="form-control" placeholder="Create a password" name="password" ng-model="newUser.password" required
           ng-pattern="/^.{8,}$/">
    <input type="password" class="form-control" placeholder="Verify your password" ng-model="newUser.repeatPassword"
           match="newUser.password" required
           ng-pattern="/^.{8,}$/">
    <button id="signupButton"
            class="btn btn-primary btn-block landing-signup-button" ng-disabled="signupForm.$invalid" type="submit"
            analytics-on analytics-event="register">
      <span quay-show="Features.BILLING">Create Free Account</span>
      <span quay-show="!Features.BILLING">Create Account</span>
    </button>
  </form>

  <div class="cor-loader" ng-show="registering"></div>
  <div class="co-alert co-alert-info" ng-show="awaitingConfirmation && hideRegisteredMessage != 'true'">
    Thank you for registering! We have sent you an activation email.
    You must <b>verify your email address</b> before you can continue.
  </div>
</div>