<div class="new-organization">
  <div class="page-content">
    <div class="cor-title">
      <span class="cor-title-link">
        <a class="back-link" href="/repository">
          Repositories
        </a>
      </span>
      <span class="cor-title-content">
        Create New Organization
      </span>
    </div>

    <div class="co-main-content-panel">
      <div class="cor-loader" ng-show="creating"></div>

      <div class="create-org" ng-show="!creating">
        <!-- Step 1 -->
        <div ng-show="!user || user.anonymous">
          <div class="page-description">
            In order to create a new organization, <b>you must first be signed in</b> as the
            user that <b>will become an admin</b> for the organization.
          </div>
          <div class="step-container row">
            <div class="col-sm-offset-3 col-sm-6">
            <div class="user-setup" redirect-url="'/organizations/new'"
                 sign-in-started="signinStarted()"
                 signed-in="signedIn()"></div>
            </div>
          </div>
        </div>

        <!-- Step 2 -->
        <div ng-show="user && !user.anonymous && !created">
          <div class="step-container">
            <form method="post" name="newOrgForm" id="newOrgForm" ng-submit="createNewOrg()">
              <div class="form-group nested">
                <label for="orgName">Organization Name</label>
                <input id="orgName" name="orgName" type="text" class="form-control"
                       placeholder="Organization Name"
                       ng-model="org.name" required autofocus data-trigger="manual"
                       data-content="{{ createError }}"
                       data-placement="bottom" data-container="body" ng-pattern="/^[a-z0-9_]{4,30}$/">
                <span class="description">This will also be the namespace for your repositories. Must be alphanumeric and all lowercase.</span>
              </div>

              <div class="form-group nested">
                <label for="orgName">Organization Email</label>
                <input id="orgEmail" name="orgEmail" type="email" class="form-control" placeholder="Organization Email"
                       ng-model="org.email" required>
                <span class="description">This address must be different from your account's email.</span>
              </div>

              <!-- Plans Table -->
              <div class="form-group nested plan-group" quay-require="['BILLING']">
               <strong>Choose your organization's plan</strong>
               <div class="plans-table" plans="plans" current-plan="holder.currentPlan"></div>
              </div>

              <div class="button-bar">
                <button class="btn btn-large btn-primary" type="submit"
                        ng-disabled="newOrgForm.$invalid || (Features.BILLING && !holder.currentPlan)"
                        analytics-on analytics-event="create_organization">
                  Create Organization
                </button>
              </div>
            </form>
          </div>
        </div>

        <!-- Step 3 -->
        <div ng-show="user && !user.anonymous && created">
          <div class="step-container">
            <h3>Organization Created</h3>
            <h4><a href="/organization/{{ org.name }}">Manage Teams Now</a></h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>