<div class="organization-progress-line">
  <md-progress-linear md-mode="indeterminate"
                      ng-show="listOrganizationMembersController.isLoading"></md-progress-linear>
</div>
<md-content flex class="organization-member-list">
  <che-list-header che-input-placeholder="Search"
                   che-search-model="listOrganizationMembersController.memberFilter.name"
                   che-on-search-change="listOrganizationMembersController.onSearchChanged(str)"
                   che-hide-search="listOrganizationMembersController.members.length === 0"
                   che-add-button-title="Add Member"
                   che-on-add="listOrganizationMembersController.selectAddMemberDialog(null)"
                   che-hide-add="!listOrganizationMembersController.hasUpdatePermission"
                   che-delete-button-title="Delete"
                   che-on-delete="listOrganizationMembersController.removeSelectedMembers()"
                   che-hide-delete="listOrganizationMembersController.cheListHelper.isNoItemSelected || !listOrganizationMembersController.hasUpdatePermission"
                   che-hide-header="listOrganizationMembersController.cheListHelper.visibleItemsNumber === 0">
    <div flex="100"
         layout="row"
         layout-align="start stretch"
         class="che-list-item-row">
      <div layout="column" layout-gt-xs="row" ng-if="listOrganizationMembersController.hasUpdatePermission"
           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="Member list"
                       ng-checked="listOrganizationMembersController.cheListHelper.areAllItemsSelected"
                       ng-click="listOrganizationMembersController.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="25"
                                che-sort-value='listOrganizationMembersController.memberOrderBy'
                                che-sort-item='name'
                                che-column-title='Username'></che-list-header-column>
        <che-list-header-column flex-gt-xs="25"
                                che-sort-value='listOrganizationMembersController.memberOrderBy'
                                che-sort-item='email'
                                che-column-title='Email'></che-list-header-column>
        <che-list-header-column flex-gt-xs="35"
                                che-sort-value='listOrganizationMembersController.memberOrderBy'
                                che-column-title='Roles'></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="listOrganizationMembersController.cheListHelper.visibleItemsNumber > 0">
    <che-list-item
      ng-repeat="member in listOrganizationMembersController.cheListHelper.getVisibleItems() | orderBy:[listOrganizationMembersController.memberOrderBy, 'config.name']"
      flex="100" ng-mouseover="hover=true" ng-mouseout="hover=false">
      <div flex="100"
           layout="row"
           layout-align="start stretch"
           ng-class="{'member-bold': listOrganizationMembersController.isOwner(member)}"
           class="che-list-item-row member-list-row">
        <div ng-if="listOrganizationMembersController.hasUpdatePermission"
             layout="row" layout-align="start center" class="che-checkbox-area">
          <che-list-item-checked ng-model="listOrganizationMembersController.cheListHelper.itemsSelectionStatus[member.email]"
                                 ng-click="listOrganizationMembersController.cheListHelper.updateBulkSelectionStatus()"
                                 ng-show="!listOrganizationMembersController.isOwner(member)"
                                 che-aria-label-checkbox="member {{member.email}}"></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="25"
               class="che-list-item-name">
            <span class="che-xs-header noselect" hide-gt-xs>Username</span>
            <span class="member-email che-hover">{{member.name}}</span>
          </div>
          <div flex-gt-xs="25"
               class="che-list-item-secondary">
            <span class="che-xs-header noselect" hide-gt-xs>Email</span>
            <span><img class="user-face" gravatar-src="member.email"></span>
            <span class="member-email che-hover ">{{member.email}}</span>
          </div>
          <div flex-gt-xs="35" class="che-list-item-secondary">
            <span class="che-xs-header noselect" hide-gt-xs>Roles</span>
            <span class="member-list-permissions">{{listOrganizationMembersController.getMemberRoles(member)}} </span>
            <span ng-if="listOrganizationMembersController.getOtherActions(member)"
                  uib-tooltip="{{listOrganizationMembersController.getOtherActions(member)}}"> Other...</span>
          </div>
          <div flex-gt-xs="15">
            <span class="che-xs-header noselect" hide-gt-xs>Actions</span>
            <span class="che-list-actions">

          <a uib-tooltip="Edit developer permissions"
             ng-click="listOrganizationMembersController.editMember(member)"
             ng-if="!listOrganizationMembersController.isOwner(member) && listOrganizationMembersController.hasUpdatePermission"
             ng-disabled="!listOrganizationMembersController.editable">
            <span class="fa fa-pencil"></span>
          </a>
          <a uib-tooltip="Remove developer"
             ng-click="listOrganizationMembersController.removeMember(member)"
             ng-if="!listOrganizationMembersController.isOwner(member) && listOrganizationMembersController.hasUpdatePermission"
             ng-disabled="!listOrganizationMembersController.editable">
            <span class="fa fa-trash-o"></span>
          </a>
        </span>
          </div>
        </div>
      </div>
    </che-list-item>
  </che-list>
  <div class="che-list-empty">
    <span
      ng-show="listOrganizationMembersController.members.length > 0 && listOrganizationMembersController.cheListHelper.visibleItemsNumber === 0">
          No members found.
    </span>
    <span ng-show="listOrganizationMembersController.members.length === 0">There are no members.</span>
  </div>
</md-content>
