<che-list-item flex ng-mouseover="hover=true" ng-mouseout="hover=false">
  <div flex="100"
       layout="row"
       layout-align="start stretch"
       class="che-list-item-row">
    <div ng-if="organizationsItemController.isSelectable"
         layout="row" layout-align="start center" class="che-checkbox-area">
      <che-list-item-checked ng-model="organizationsItemController.isSelect"
                             che-aria-label-checkbox="Organization {{organizationsItemController.organization.name}}"
                             ng-click="organizationsItemController.onCheckboxClick()"></che-list-item-checked>
    </div>
    <div flex
         layout-xs="column" layout-gt-xs="row"
         layout-align-gt-xs="start center"
         layout-align-xs="start start"
         class="che-list-item-details">
      <div flex-gt-xs="30"
           class="che-list-item-name"
           ng-click="organizationsItemController.redirectToOrganizationDetails();">
        <span class="che-xs-header noselect" hide-gt-xs>Name</span>
        <span class="che-hover">{{organizationsItemController.organization.qualifiedName}}</span>
      </div>
      <div flex-gt-xs="20"
           ng-click="organizationsItemController.redirectToOrganizationDetails('Members')">
        <span class="che-xs-header noselect" hide-gt-xs>Members</span>
        <span>{{organizationsItemController.members}}</span>
      </div>
      <div flex-gt-xs="15"
           ng-click="organizationsItemController.redirectToOrganizationDetails()"
           class="cap-value">
        <span class="che-xs-header noselect" hide-gt-xs>Total RAM</span>
        <span>{{organizationsItemController.totalRam ? organizationsItemController.totalRam + 'GB' : 'not limited'}}</span>
      </div>
      <div flex-gt-xs="15"
           ng-click="organizationsItemController.redirectToOrganizationDetails()"
           class="cap-value">
        <span class="che-xs-header noselect" hide-gt-xs>Available RAM</span>
        <span>{{organizationsItemController.availableRam ? organizationsItemController.availableRam + 'GB' : 'not limited'}}</span>
      </div>
      <div flex-gt-xs="20"
           ng-click="organizationsItemController.redirectToOrganizationDetails('Organization')">
        <span class="che-xs-header noselect" hide-gt-xs>Sub-Organizations</span>
        <span>
          {{organizationsItemController.getAllSubOrganizations().length ? organizationsItemController.getAllSubOrganizations().length : 'none'}}
        </span>
      </div>
      <div flex-gt-xs="15">
        <span class="che-xs-header noselect" hide-gt-xs>Actions</span>
        <span class="che-list-actions" ng-if="organizationsItemController.hasDeletePermission() || organizationsItemController.isSelectable">
           <a uib-tooltip="Remove organization" ng-click="organizationsItemController.removeOrganization();">
            <span class="fa fa-trash-o"></span>
          </a>
        </span>
      </div>
    </div>
  </div>
</che-list-item>
