<che-list-item flex-gt-sm="100" flex="33" ng-mouseover="hover=true" ng-mouseout="hover=false">
  <div flex="100"
       id="member-email-{{userItemController.user.email}}"
       layout="row"
       layout-align="start stretch"
       class="che-list-item-row user-list-row">
    <div layout="row"
         layout-align="start center"
         class="che-checkbox-area">
      <che-list-item-checked ng-model="userItemController.callback.cheListHelper.itemsSelectionStatus[userItemController.user.id]"
                             ng-click="userItemController.callback.cheListHelper.updateBulkSelectionStatus()"
                             che-aria-label-checkbox="User {{userItemController.user.id}}"></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="40"
           class="che-list-item-name">
        <span class="che-xs-header noselect" hide-gt-xs>Email</span>
        <span><img class="user-face" gravatar-src="userItemController.user.email"></span>
        <span class="user-email che-hover " data-user-email="{{userItemController.user.email}}">{{userItemController.user.email}}</span>
      </div>
      <div flex-gt-xs="35">
        <span class="che-xs-header noselect" hide-gt-xs>Permissions</span>
        <span class="user-permissions" data-user-permissions="{{userItemController.getUserActions()}}">{{userItemController.getUserActions()}}</span>
      </div>
      <div flex-gt-xs="25">
        <span class="che-xs-header noselect" hide-gt-xs>Actions</span>
                  <span class="che-list-actions">
                    <div ng-click="userItemController.removeUser();" uib-tooltip="Remove member" data-user-action="remove-member">
                      <span class="material-design icon-ic_remove_circle_outline_24px"></span>
                    </div>
                  </span>
      </div>
    </div>
  </div>
</che-list-item>
