<div class="list-members" layout="column">

  <div ng-if="listMembersController.members.length > 0" class="list-members-spacing">
    <che-list-header>
      <div flex="100"
           layout="row"
           layout-align="start stretch"
           class="che-list-item-row">
        <div layout="row"
             layout-align="start center"
             class="che-checkbox-area">
          <div layout="row" layout-align="start center" class="che-list-item-checkbox-main">
            <md-checkbox class="che-list-item-checkbox"
                         aria-label="All members"
                         md-theme="default"
                         ng-checked="listMembersController.isBulkChecked"
                         ng-click="listMembersController.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="30"
                                  che-sort-value="listMembersController.membersOrderBy"
                                  che-sort-item="name"
                                  che-column-title='Invited Members'></che-list-header-column>
          <che-list-header-column flex="35"
                                  che-column-title='Developer'></che-list-header-column>
          <che-list-header-column flex="35"
                                  che-column-title='Admin'></che-list-header-column>
        </div>
      </div>
    </che-list-header>
    <che-list flex>
      <che-list-item ng-mouseover="hover=true" ng-mouseout="hover=false"
                     ng-repeat="member in listMembersController.members | orderBy:listMembersController.membersOrderBy">
        <div flex="100"
             layout="row"
             layout-align="start stretch"
             class="member-item-row">
          <div layout="row"
               layout-align="start center"
               class="che-checkbox-area">
            <che-list-item-checked ng-model="listMembersController.membersSelectedStatus[member.email]"
                                   che-aria-label-checkbox="Member {{member.email}}"
                                   ng-click="listMembersController.updateSelectedStatus()"></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="30"
                 class="che-list-item-name">
              <span class="material-design icon-ic_done_24px user-exists-checked" ng-if="member.id"></span>
              <span class="che-hover">{{member.email}}</span>
            </div>
            <div flex="35">
              <md-radio-group ng-model="member.role" ng-change="listMembersController.onValueChanged(member)">
                <md-radio-button value="{{listMembersController.getDeveloperRoleValue()}}"></md-radio-button>
              </md-radio-group>
            </div>
            <div flex="35">
              <md-radio-group ng-model="member.role" ng-change="listMembersController.onValueChanged(member)">
                <md-radio-button value="{{listMembersController.getAdminRoleValue()}}"></md-radio-button>
              </md-radio-group>
            </div>
          </div>
        </div>
      </che-list-item>
    </che-list>
  </div>
  <!-- buttons -->
  <div layout="row">
    <div flex layout-align="center start">
      <che-button-default class="che-list-add-button"
                          che-button-title="Add" name="addButton"
                          ng-click="listMembersController.showAddDialog($event)"></che-button-default>
    </div>
    <div flex-offset="5" ng-if="listMembersController.members.length > 0">
      <che-button-primary-flat ng-disabled="(listMembersController.membersSelectedNumber === 0)"
                               che-button-title="Remove" name="removeButton"
                               ng-click="listMembersController.removeSelectedMembers()"></che-button-primary-flat>
    </div>
  </div>
</div>

