<che-list-item flex-gt-sm="100" flex="33" ng-mouseover="hover=true" ng-mouseout="hover=false">
  <div flex="100"
       layout="row"
       layout-align="start stretch"
       ng-class="{'member-bold': memberItemController.isOwner}"
       class="che-list-item-row member-list-row">
    <div layout="row"
         layout-align="start center"
         class="che-checkbox-area" ng-if="memberItemController.editable">
      <che-list-item-checked ng-model="memberItemController.callback.cheListHelper.itemsSelectionStatus[memberItemController.member.email]"
                             ng-click="memberItemController.callback.cheListHelper.updateBulkSelectionStatus()"
                             ng-show="!memberItemController.isOwner"
                             che-aria-label-checkbox="member {{memberItemController.member.userId}}"></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="{{memberItemController.hideDetails ? 60 : 25}}"
           class="che-list-item-name">
        <span class="che-xs-header noselect" hide-gt-xs>Email</span>
        <span class="member-email che-hover">{{memberItemController.member.email}}</span>
      </div>
      <div flex-gt-xs="{{memberItemController.hideDetails ? 40 : 25}}"
           class="che-list-item-secondary">
        <span class="che-xs-header noselect" hide-gt-xs>Info</span>
        <span class="member-email che-hover ">
          <md-icon md-font-icon="fa-clock-o" class="fa member-pending-icon" ng-if="memberItemController.member.isPending"></md-icon>
          {{memberItemController.member.name}}
        </span>
      </div>
      <div flex-gt-xs="35" class="che-list-item-secondary" ng-if="!memberItemController.hideDetails">
        <span class="che-xs-header noselect" hide-gt-xs>Roles</span>
        <span class="member-list-permissions">{{memberItemController.getMemberRoles()}} </span>
        <span uib-tooltip="{{memberItemController.otherActions.toString()}}" ng-if="memberItemController.otherActions.length > 0"> Other...</span>
      </div>
     <!-- <div flex-gt-xs="10"
           class="che-list-item-secondary">
        <span class="che-xs-header noselect" hide-gt-xs>State</span>
        <span class="member-email che-hover ">member</span>
      </div>-->
      <div flex-gt-xs="15" ng-if="!memberItemController.hideDetails">
        <span class="che-xs-header noselect" hide-gt-xs>Actions</span>
        <span class="che-list-actions">

          <a uib-tooltip="Edit developer permissions"
             ng-click="memberItemController.editMember()"
             ng-if="!memberItemController.isOwner"
             ng-disabled="!memberItemController.editable">
            <span class="fa fa-pencil"></span>
          </a>
          <a uib-tooltip="Remove developer"
             ng-click="memberItemController.removeMember($event)"
             ng-if="!memberItemController.isOwner"
             ng-disabled="!memberItemController.editable">
            <span class="fa fa-trash-o"></span>
          </a>
        </span>
      </div>
    </div>
  </div>
</che-list-item>
