<div class="signup-form-element">
  <div quay-show="singleSigninUrl" class="single-sign-on">
    <div class="external-login-button" provider="{{ EXTERNAL_LOGINS[0].id }}"></div>
  </div>

  <div quay-show="Features.USER_CREATION && Config.AUTHENTICATION_TYPE == 'Database' && !singleSigninUrl">
    <form class="form-signup" name="signupForm" ng-submit="register()" ng-show="!awaitingConfirmation && !registering">
      <div quay-show="Features.DIRECT_LOGIN">
        <input type="text" class="form-control" placeholder="Create a username" name="username" ng-model="newUser.username" autofocus required ng-pattern="/^[a-z0-9_]{4,30}$/">
        <input type="email" class="form-control" placeholder="Email address" ng-model="newUser.email" required>
        <input type="password" class="form-control" placeholder="Create a 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,}$/">
      </div>
      <div class="form-group signin-buttons">
        <button id="signupButton"
                class="btn btn-primary btn-block landing-signup-button" ng-disabled="signupForm.$invalid" type="submit"
                analytics-on analytics-event="register"
                quay-show="Features.DIRECT_LOGIN">
          <span quay-show="Features.BILLING">Sign Up for Free!</span>
          <span quay-show="!Features.BILLING">Sign Up</span>
        </button>
        <span class="social-alternate" quay-show="Features.DIRECT_LOGIN && EXTERNAL_LOGINS.length">
          <i class="fa fa-circle"></i>
          <span class="inner-text">OR</span>
        </span>
        <div class="external-login-button" provider="{{ provider.id }}" ng-repeat="provider in EXTERNAL_LOGINS"></div>
      </div>
    </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>
</div>