<organization-not-found ng-if="createOrganizationController.parentQualifiedName && !createOrganizationController.parentOrganizationId"
                        organization-name="createOrganizationController.parentQualifiedName"></organization-not-found>

<div ng-if="!createOrganizationController.parentQualifiedName || createOrganizationController.parentOrganizationId"
     flex layout="column">
  <che-toolbar che-title="{{createOrganizationController.parentOrganizationId ? 'Create Sub-Organization' : 'Create New Organization'}}" border-none></che-toolbar>
  <che-description>
    Create {{createOrganizationController.parentOrganizationId ? 'a sub-organization' : 'an organization'}} to share resources.
  </che-description>
  <div class="organization-progress-line">
    <md-progress-linear md-mode="indeterminate"
                        ng-show="createOrganizationController.isLoading"></md-progress-linear>
  </div>
  <md-content md-scroll-y flex md-theme="default" class="create-organization">
    <ng-form name="createOrganizationForm">
      <!-- Name -->
      <che-label-container che-label-name="Name"
                           che-label-description="Name will be displayed in menus and prefix workspaces.">

        <div layout="column" class="create-organization-input">
          <che-input-box che-form="createOrganizationForm"
                         che-name="name"
                         che-place-holder="Enter organization name"
                         aria-label="Name of the organization"
                         ng-model="createOrganizationController.organizationName"
                         ng-trim
                         ng-minlength="1"
                         ng-maxlength="20"
                         ng-model-options="{allowInvalid: true, updateOn: 'default blur', debounce: { 'default': 200, 'blur': 0 } }"
                         custom-validator="createOrganizationController.isUniqueName($value)"
                         parent-account="createOrganizationController.accountName"
                         ng-keypress="createOrganizationForm.$valid && $event.which === 13 && createOrganizationController.createOrganization()"
                         ng-pattern="/^[a-z\d](?:[a-z\d]|-(?=[a-z\d])){0,38}$/i"
                         required focusable>
            <div ng-message="pattern">The name can contain alphanumeric characters or single '-' inside.
            </div>
            <div ng-message="minlength">The name has to be more than 1 character long.</div>
            <div ng-message="maxlength">The name has to be less than 20 characters long.</div>
            <div ng-message="customValidator">This organization name is already used.</div>
          </che-input-box>
        </div>
      </che-label-container>

      <che-label-container che-label-name="Members" che-label-description="Invite others to collaborate in the organization."
                           che-alignment="{{createOrganizationController.members.length > 0 ? 'column' : 'row'}}">
        <list-organization-invite-members members="createOrganizationController.members"
                                          parent-organization-id="createOrganizationController.parentOrganizationId"
                                          parent-organization-members="createOrganizationController.parentOrganizationMembers"
                                          class="create-organization-list"></list-organization-invite-members>
      </che-label-container>
    </ng-form>

    <div layout="row" layout-align="center center">
      <che-button-primary id="create-organization-button"
                          che-button-title="Create {{createOrganizationController.parentOrganizationId ? 'Sub-Organization' : 'Organization'}}"
                          ng-click="createOrganizationController.createOrganization()"
                          ng-disabled="!createOrganizationForm.$valid || createOrganizationController.isLoading">
      </che-button-primary>
    </div>

  </md-content>
</div>
