<div class="user-setup-element">
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title accordion-title">
          <a id="signinToggle" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-target="#collapseSignin">
            Sign In
          </a>
        </h4>
      </div>
      <div id="collapseSignin" class="panel-collapse collapse" ng-class="hasSignedIn() ? 'in' : 'out'">
        <div class="panel-body">
          <div class="signin-form" signed-in="signedIn()" sign-in-started="signInStarted()" redirect-url="redirectUrl" invite-code="inviteCode"></div>
        </div>
      </div>
    </div>
    <div class="panel panel-default"
         quay-show="Features.USER_CREATION && Config.AUTHENTICATION_TYPE == 'Database' && Features.DIRECT_LOGIN">
      <div class="panel-heading">
        <h6 class="panel-title accordion-title">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-target="#collapseRegister">
            Create Account
          </a>
        </h6>
      </div>
      <div id="collapseRegister" class="panel-collapse collapse" ng-class="hasSignedIn() ? 'out' : 'in'">
        <div class="panel-body">
          <div class="signup-form" user-registered="handleUserRegistered(username)" invite-code="inviteCode"></div>
        </div>
      </div>
    </div>
    <div class="panel panel-default"
         quay-show="Features.MAILING && Config.AUTHENTICATION_TYPE == 'Database' && Features.DIRECT_LOGIN">
      <div class="panel-heading">
        <h6 class="panel-title accordion-title">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-target="#collapseForgot">
            Forgot Password
          </a>
        </h6>
      </div>
      <div id="collapseForgot" class="panel-collapse collapse out">
        <div style="text-align: center" ng-show="sendingRecovery">
          <div class="cor-loader-inline"></div>
        </div>
        <div class="panel-body" ng-show="!sendingRecovery">
          <form class="form-signin" ng-submit="sendRecovery()" ng-show="!sent">
            <input type="text" class="form-control input-lg" placeholder="Email" ng-model="recovery.email">
            <button class="btn btn-lg btn-primary btn-block" type="submit">Send Recovery Email</button>
          </form>

          <div class="co-alert co-alert-danger" ng-show="invalidRecovery">{{errorMessage}}</div>
          <div class="co-alert co-alert-info" ng-show="sent.status == 'org'">
            The e-mail address <code>{{ sent.orgemail }}</code> is assigned to organization <code>{{ sent.orgname }}</code>.
            To access that organization, an admin user must be used.
            <br><br>
            An e-mail has been sent to
            <code>{{ sent.orgemail }}</code> with the full list of admin users.
          </div>
          <div class="co-alert co-alert-success" ng-show="sent.status == 'sent'">Account recovery email was sent.</div>
        </div>
      </div>
    </div>
  </div>
</div>