<!--

    Copyright (c) 2015-2018 Red Hat, Inc.
    This program and the accompanying materials are made
    available under the terms of the Eclipse Public License 2.0
    which is available at https://www.eclipse.org/legal/epl-2.0/

    SPDX-License-Identifier: EPL-2.0

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<che-toolbar che-title="User Management"></che-toolbar>
<md-content flex md-scroll-y md-theme="maincontent-theme" class="admins-user-management">
  <div class="progress-line">
    <md-progress-linear ng-show="adminsUserManagementCtrl.isLoading" md-mode="indeterminate"></md-progress-linear>
  </div>
  <div>
    <che-list-header flex="100"
                     che-input-placeholder="Search"
                     che-search-model="adminsUserManagementCtrl.userFilter.name"
                     che-on-search-change="adminsUserManagementCtrl.onSearchChanged(str)"
                     che-hide-search="adminsUserManagementCtrl.users.length === 0"
                     che-add-button-title="Add User"
                     che-on-add="adminsUserManagementCtrl.showAddUserDialog($event)"
                     che-delete-button-title="Delete"
                     che-on-delete="adminsUserManagementCtrl.deleteSelectedUsers()"
                     che-hide-delete="adminsUserManagementCtrl.cheListHelper.isNoItemSelected"
                     che-hide-header="adminsUserManagementCtrl.cheListHelper.visibleItemsNumber === 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="start center" class="che-list-item-checkbox-main">
            <md-checkbox class="che-list-item-checkbox"
                         aria-label="Bulk check on users"
                         ng-checked="adminsUserManagementCtrl.cheListHelper.areAllItemsSelected"
                         ng-click="adminsUserManagementCtrl.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="40"
                                  che-sort-value='adminsUserManagementCtrl.userOrderBy'
                                  che-sort-item='email'
                                  che-column-title='Email'></che-list-header-column>
          <che-list-header-column flex-gt-xs="20"
                                  che-sort-value='adminsUserManagementCtrl.userOrderBy'
                                  che-sort-item='name'
                                  che-column-title='Login'></che-list-header-column>
          <che-list-header-column flex-gt-xs="20"
                                  che-column-title='Organizations'></che-list-header-column>
          <che-list-header-column flex-gt-xs="20"
                                  che-column-title='Actions'></che-list-header-column>
        </div>
      </div>
    </che-list-header>
    <che-list flex ng-if="adminsUserManagementCtrl.users && adminsUserManagementCtrl.users.length > 0">
      <che-list-item
              ng-repeat="user in adminsUserManagementCtrl.cheListHelper.getVisibleItems() | orderBy:adminsUserManagementCtrl.userOrderBy"
              ng-init="adminsUserManagementCtrl.updateUserOrganizationsCount(user.id)"
              flex-gt-sm="100" flex="33"
              ng-mouseover="hover=true"
              ng-mouseout="hover=false">
        <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">
            <che-list-item-checked ng-model="adminsUserManagementCtrl.cheListHelper.itemsSelectionStatus[user.id]"
                                   ng-click="adminsUserManagementCtrl.cheListHelper.updateBulkSelectionStatus()"
                                   che-aria-label-checkbox="User {{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"
                 ng-click="adminsUserManagementCtrl.redirectToUserDetails(user.id)">
              <span class="che-xs-header noselect" hide-gt-xs>Email</span>
              <span><img class="user-face" gravatar-src="user.email"></span>
              <span class="user-email">{{user.email}}</span>
            </div>
            <div flex-gt-xs="20"
                 ng-click="adminsUserManagementCtrl.redirectToUserDetails(user.id)">
              <span class="che-xs-header noselect" hide-gt-xs>Login</span>
              <span class="user-description">{{user.name}}</span>
            </div>
            <div flex-gt-xs="20"
                 ng-click="adminsUserManagementCtrl.redirectToUserDetails(user.id, 'Organization')">
              <span class="che-xs-header noselect" hide-gt-xs>Organizations</span>
              <span class="user-description">{{adminsUserManagementCtrl.userOrganizationCount[user.id] ? adminsUserManagementCtrl.userOrganizationCount[user.id] : '-'}}</span>
            </div>
            <div flex-gt-xs="20"
                 ng-click="adminsUserManagementCtrl.redirectToUserDetails(user.id)">
              <span class="che-xs-header noselect" hide-gt-xs>Actions</span>
                  <span class="che-list-actions">
                    <div ng-click="adminsUserManagementCtrl.removeUser($event, user);" uib-tooltip="Remove user">
                      <span class="material-design icon-ic_remove_circle_outline_24px"></span>
                    </div>
                  </span>
            </div>
          </div>
        </div>
      </che-list-item>
      <div class="paging-buttons-area" ng-if="adminsUserManagementCtrl.isPagination()">
        <md-button
                ng-disabled="!adminsUserManagementCtrl.hasPreviousPage()"
                ng-click="adminsUserManagementCtrl.fetchUsersPage('first');">
          <span><<</span>
        </md-button>
        <md-button
                ng-disabled="!adminsUserManagementCtrl.hasPreviousPage()"
                ng-click="adminsUserManagementCtrl.fetchUsersPage('prev');">
          <span><</span>
        </md-button>
        <md-button disabled>
          <span>{{adminsUserManagementCtrl.pagesInfo.currentPageNumber}}</span>
        </md-button>
        <md-button
                ng-disabled="!adminsUserManagementCtrl.hasNextPage()"
                ng-click="adminsUserManagementCtrl.fetchUsersPage('next');">
          <span>></span>
        </md-button>
        <md-button
                ng-disabled="!adminsUserManagementCtrl.hasNextPage()"
                ng-click="adminsUserManagementCtrl.fetchUsersPage('last');">
          <span>>></span>
        </md-button>
      </div>
    </che-list>
    <div class="che-list-empty">
        <span ng-show="adminsUserManagementCtrl.users.length > 0 && adminsUserManagementCtrl.cheListHelper.visibleItemsNumber === 0">
          No users found.
        </span>
      <span ng-show="adminsUserManagementCtrl.users.length === 0">There are no users.</span>
    </div>
  </div>
</md-content>
