<md-content flex class="list-organizations-content">
  <div ng-class="{'list-empty': !(listOrganizationsController.organizations | filter:listOrganizationsController.organizationFilter).length}">
    <che-list-header che-hide-header="!listOrganizationsController.organizations || listOrganizationsController.cheListHelper.visibleItemsNumber === 0"
                     che-input-placeholder="Search"
                     che-search-model="listOrganizationsController.organizationFilter.name"
                     che-on-search-change="listOrganizationsController.onSearchChanged(str)"
                     che-hide-search="!listOrganizationsController.organizations || listOrganizationsController.organizations.length === 0"
                     che-add-button-title="{{listOrganizationsController.parentName ? 'Add Sub-Organization' : 'Add Organization'}}"
                     che-add-button-href="#/admin/create-organization{{listOrganizationsController.parentName ? '/' + listOrganizationsController.parentName : ''}}"
                     che-hide-add="!listOrganizationsController.hasManagePermission() || listOrganizationsController.hideAddButton"
                     che-delete-button-title="Delete"
                     che-on-delete="listOrganizationsController.deleteSelectedOrganizations()"
                     che-hide-delete="!listOrganizationsController.hasManagePermission() || listOrganizationsController.cheListHelper.isNoItemSelected"
                     che-filter-values="listOrganizationsController.namespaceLabels"
                     che-on-filter-changed="listOrganizationsController.onFilterChanged">
      <div flex="100"
           layout="row"
           layout-align="start stretch"
           class="che-list-item-row">
        <div ng-if="listOrganizationsController.hasManagePermission()"
             layout="column" layout-gt-xs="row" layout-align="start center" class="che-checkbox-area">
          <div layout="row" layout-align="center center" class="che-list-item-checkbox-main">
            <md-checkbox class="che-list-item-checkbox"
                         aria-label="organization list"
                         ng-checked="listOrganizationsController.cheListHelper.areAllItemsSelected"
                         ng-click="listOrganizationsController.cheListHelper.changeBulkSelection()"></md-checkbox>
          </div>
        </div>
        <div flex hide-xs layout-gt-xs="row"
             layout-align="start center"
             class="che-list-item-details">
          <che-list-header-column flex-gt-xs="30"
                                  che-sort-value='listOrganizationsController.organizationOrderBy'
                                  che-sort-item='name'
                                  che-column-title='Name'></che-list-header-column>
          <che-list-header-column flex-gt-xs="20"
                                  che-column-title='Members'></che-list-header-column>
          <che-list-header-column flex-gt-xs="15"
                                  che-column-title='Total RAM'></che-list-header-column>
          <che-list-header-column flex-gt-xs="15"
                                  che-column-title='Available RAM'></che-list-header-column>
          <che-list-header-column flex-gt-xs="20"
                                  che-column-title='Sub-Organizations'></che-list-header-column>
          <che-list-header-column flex-gt-xs="15"
                                  che-column-title='Actions'></che-list-header-column>
        </div>
      </div>
    </che-list-header>
    <che-list ng-show="listOrganizationsController.organizations">
      <organizations-item
        ng-repeat="organization in listOrganizationsController.cheListHelper.getVisibleItems() | orderBy:listOrganizationsController.organizationOrderBy"
        organization="organization"
        members="listOrganizationsController.getMembersCount(organization.id)"
        total-ram="listOrganizationsController.getTotalRAM(organization.id)"
        available-ram="listOrganizationsController.getAvailableRAM(organization.id)"
        cdvy-is-selectable="listOrganizationsController.hasManagePermission()"
        ng-model="listOrganizationsController.cheListHelper.itemsSelectionStatus[organization.id]"
        on-update="listOrganizationsController.onUpdate()"
        cdvy-on-checkbox-click="listOrganizationsController.cheListHelper.updateBulkSelectionStatus()">
      </organizations-item>
    </che-list>
  </div>
  <div class="che-list-empty">
    <span ng-class="{'list-empty-no-sub-organizations': listOrganizationsController.parentName, 'list-empty-no-organizations': !listOrganizationsController.parentName}"
          ng-show="listOrganizationsController.cheListHelper.visibleItemsNumber === 0">There are no {{listOrganizationsController.parentName ? 'sub-organizations' : 'organizations'}}.</span>
  </div>
</md-content>
