<che-popup title="{{addMemberController.members.length > 0 ? 'Select developers to invite' : 'No members in team'}}"
           on-close="addMemberController.abort()" ng-if="!addMemberController.isLoading" id="add-members-dialog">
  <div layout="column" class="add-workspace-members">

    <che-list-header che-hide-header="!addMemberController.members || addMemberController.members.length === 0">
      <div flex="100"
           layout="row"
           layout-align="start stretch"
           class="che-list-item-row">
        <div layout="column" layout-gt-xs="row" 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 md-default-theme"
                         aria-label="Member list"
                         ng-checked="addMemberController.cheListHelper.areAllItemsSelected"
                         ng-click="addMemberController.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="60"
                                  che-sort-value='addMemberController.memberOrderBy'
                                  che-sort-item='name'
                                  che-column-title='Name'></che-list-header-column>
          <che-list-header-column flex-gt-xs="40"
                                  che-sort-value='addMemberController.memberOrderBy'
                                  che-sort-item='email'
                                  che-column-title='Email'></che-list-header-column>
        </div>
      </div>
    </che-list-header>
    <che-list ng-show="addMemberController.cheListHelper.visibleItemsNumber > 0" class="members-list" id="add-members-list">
      <member-item
        ng-repeat="member in addMemberController.cheListHelper.getVisibleItems()"
        callback="addMemberController"
        editable="true"
        hide-details="true"
        is-owner="false"
        member="member"></member-item>
    </che-list>
    <div class="message-panel" ng-if="(!addMemberController.members || addMemberController.members.length === 0) && (!addMemberController.users || addMemberController.users.length === 0)">
      There are no members in team {{addMemberController.team ? addMemberController.namespace : addMemberController.team.name}}.
    <a href="#/team/{{addMemberController.namespace}}" ng-click="addMemberController.abort()">Invite team members.</a>
    </div>
    <div class="message-panel" ng-if="(!addMemberController.members || addMemberController.members.length === 0) && (addMemberController.users && addMemberController.users.length > 0)">
      The workspace is already shared with all members of the team {{addMemberController.team ? addMemberController.namespace : addMemberController.team.name}}.
    </div>

    <div layout="row" layout-align="end center" class="buttons-panel">
      <che-button-primary
        ng-disabled="addMemberController.cheListHelper.isNoItemSelected || addMemberController.isLoading"
        che-button-title="Share" name="shareButton"
        ng-click="addMemberController.shareWorkspace()"></che-button-primary>
      <che-button-notice che-button-title="Close"
                         name="close-dialog-button"
                         ng-click="addMemberController.abort()"></che-button-notice>
    </div>
  </div>
</che-popup>
