<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="teamItemController.selectable"
       layout="row"
       layout-align="start center"
       class="che-checkbox-area">
      <che-list-item-checked ng-model="teamItemController.isSelect"
                             che-aria-label-checkbox="Team {{teamItemController.team.name}}"
                             ng-click="teamItemController.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="teamItemController.redirectToTeamDetails();">
        <span class="che-xs-header noselect" hide-gt-xs>Name</span>
        <span class="che-hover">{{teamItemController.getTeamDisplayName(teamItemController.team)}}</span>
      </div>
      <div flex-gt-xs="25" ng-click="teamItemController.redirectToTeamDetails('Members')">
        <span class="che-xs-header noselect" hide-gt-xs>Members</span>
        <span>{{teamItemController.members}}</span>
      </div>
      <div flex-gt-xs="25" ng-click="teamItemController.redirectToTeamDetails()" class="cap-value">
        <span class="che-xs-header noselect" hide-gt-xs>RAM Cap</span>
        <span>{{teamItemController.ramCap ? teamItemController.ramCap + 'GB' : 'not set'}}</span>
      </div>
      <div flex-gt-xs="20">
        <span class="che-xs-header noselect" hide-gt-xs>Actions</span>
        <span class="che-list-actions">
           <a uib-tooltip="Remove team" ng-click="teamItemController.removeTeam();">
            <span class="fa fa-trash-o"></span>
          </a>
        </span>
      </div>
    </div>
  </div>
</che-list-item>
