<div class="page-sticky-header user-list-row hidden-sm hidden-xs">
  <div class="col-expand"></div>
  <label
    class="col-username"
    translate
  >
    Username and login alias
  </label>
  <label class="col-subaccounts"></label>
  <label
    class="col-fullname"
    translate
  >
    Name and email
  </label>
  <label
    class="col-globalroles"
    translate
  >
    Global roles
  </label>
  <div class="col-actions"></div>
</div>

<div
  class="user-list-row"
  ng-class="::{owned: !!user.owner, owns: user.subusersCount > 0}"
  ng-style="{ 'margin-left': user._depth * 4, 'margin-right': user._depth * 4 }"
  data-cy="c8y-user-list--row"
  ng-repeat="user in vm.userFlatTree | filter:vm.visible"
>
  <button
    class="col-expand interact btn-clean"
    title="{{ 'Direct sub-users' | translate }}"
    type="button"
    ng-click="::!vm.searchOn() && vm.toggleExpanded(user)"
    ng-show="::user.subusersCount"
  >
    <label
      class="hidden-md hidden-lg"
      translate
    >
      Direct sub-users
    </label>
    <span class="badge badge-info hidden-md hidden-lg">{{ user.subusersCount }}</span>
    <i c8y-icon="chevron-down" ng-class="{ open: user._expanded }" ng-hide="vm.searchOn()" data-cy="user--with-subusers-expandBtn"></i>
  </button>
  <div
    class="col-expand"
    ng-hide="::user.subusersCount"
  ></div>

  <button
    class="col-username interact text-truncate btn-clean l-h-1"
    ng-style="{ width: 250 - user._depth * 4 }"
    type="button"
    ng-click="vm.editUser(user)"
  >
    <div
      class="user-dot"
      ng-class="{ 'user-disabled': !user.enabled }"
    >
      {{::user.userName.substr(0,2)}}
    </div>
    <span class="username text-truncate">
      <span
        class="h4"
        title="{{:: user.userName + (user.displayName ? ' (' + user.displayName + ')' : '')}}"
      >
        {{::user.userName}}
      </span>
      <br />
      <small
        class="text-muted"
        title="{{:: user.userName + (user.displayName ? ' (' + user.displayName + ')' : '')}}"
        ng-if="user.displayName"
      >
        <em>{{::user.displayName}}</em>
      </small>

      <br ng-hide="::user.enabled" />
      <small
        class="disabled"
        ng-hide="::user.enabled"
        translate
      >
        Disabled
      </small>
      <br ng-show="::user.delegatedBy" />
      <small
        class="delegated text-primary"
        ng-show="::user.delegatedBy"
        translate
      >
        Delegated by {{::user.delegatedBy}}
      </small>
    </span>
  </button>

  <div class="col-subaccounts text-center">
    <button
      class="btn-clean"
      aria-label="{{ 'Direct sub-users' | translate }}"
      uib-tooltip="{{ 'Direct sub-users' | translate }}"
      tooltip-popup-delay="500"
      tooltip-placement="right"
      type="button"
      ng-show="vm.FEATURE_USER_HIERARCHY && user.subusersCount"
    >
      <span class="badge badge-info">{{ user.subusersCount }}</span>
    </button>
  </div>

  <button
    class="col-fullname interact text-truncate btn-clean l-h-1"
    title="{{ 'Edit user' | translate }}"
    type="button"
    ng-click="vm.editUser(user)"
  >
    <span title="{{::vm.fullName(user)}}">{{::vm.fullName(user)}}</span>
    <br />
    <small title="{{::user.email}}">{{::user.email}}</small>
  </button>

  <div class="col-globalroles">
    <div class="row">
      <div class="col-sm-10 p-r-sm-0">
        <c8y-item-selector
          items="vm.globalRolesAvailable(user)"
          items-selected="::vm.mapRolesForUser(user.groups.references)"
          on-apply="vm.changeGlobalRoles(user, items)"
          text-apply="{{ 'Apply' | translate }}"
          text-placeholder="{{ '----' }}"
          ng-disabled="vm.shouldDisableGlobalRolesSelector(user)"
        ></c8y-item-selector>
      </div>
      <div class="col-sm-1 p-l-sm-4">
        <button
          class="btn-help"
          aria-label="{{ 'Help' | translate }}"
          type="button"
          uib-popover-html="vm.editGlobalRolesForUserWithExternalOrigin | translate"
          popover-trigger="'focus'"
          popover-placement="right"
          popover-append-to-body="true"
          ng-if="vm.hasExternalOrigin(user) && !vm.mapRolesOnlyForNewUser"
        ></button>
      </div>
    </div>
  </div>

  <div class="col-twofactorauth text-right">
    <i
      class="text-success"
      c8y-icon="key"
      uib-tooltip="{{ 'TFA active' | translate }} ({{ vm.totpStrategy }})"
      ng-show="user.twoFactorAuthenticationEnabled"
    ></i>
  </div>

  <div class="col-actions">
    <div
      class="dropdown"
      uib-dropdown
    >
      <button
        class="dropdown-toggle c8y-dropdown"
        title="{{ 'Actions' | translate }}"
        aria-haspopup="true"
        type="button"
        uib-dropdown-toggle
        ng-click="::$event.stopPropagation()"
      >
        <span><i c8y-icon="ellipsis-v"></i></span>
      </button>
      <ul
        class="dropdown-menu dropdown-menu-right"
        uib-dropdown-menu
      >
        <li>
          <a
            title="{{ 'Edit' | translate }}"
            ng-href="#{{::vm.detailLink(user)}}"
          >
            <i c8y-icon="edit"></i>
            {{ 'Edit' | translate }}
          </a>
        </li>
        <li>
          <button
            title="{{ 'Copy inventory roles from' | translate }}…"
            type="button"
            ng-click="vm.copyInventoryRoles(user)"
          >
            <i c8y-icon="clipboard"></i>
            {{ 'Copy inventory roles from' | translate }}…
          </button>
        </li>
        <li ng-show="::vm.showDelegate(user)">
          <button
            title="{{ 'Delegate' | translate }}"
            type="button"
            ng-click="vm.delegate(user)"
          >
            <i c8y-icon="batch-assign"></i>
            {{ 'Delegate' | translate }}
          </button>
        </li>
        <li ng-show="::vm.showUndelegate(user)">
          <button
            title="{{ 'Undelegate' | translate }}"
            type="button"
            ng-click="vm.removeDelegate(user)"
          >
            <i c8y-icon="batch-assign"></i>
            {{ 'Undelegate' | translate }}
          </button>
        </li>
        <li ng-show="user.enabled && !vm.isCurrent(user)">
          <button
            title="{{ 'Disable' | translate }}"
            type="button"
            ng-click="vm.disable(user)"
          >
            <i c8y-icon="ban"></i>
            {{ 'Disable' | translate }}
          </button>
        </li>
        <li ng-hide="::(user.enabled)">
          <button
            title="{{ 'Enable' | translate }}"
            type="button"
            ng-click="vm.enable(user)"
          >
            <i c8y-icon="check-circle-o"></i>
            {{ 'Enable' | translate }}
          </button>
        </li>
        <li>
          <button
            title="{{ 'Delete' | translate }}"
            type="button"
            ng-click="vm.remove(user)"
            ng-hide="::vm.isUndeletable(user)"
          >
            <i c8y-icon="delete"></i>
            {{ 'Delete' | translate }}
          </button>
        </li>
      </ul>
    </div>
  </div>
  <div
    class="tip"
    ng-class="{ expanded: user._expanded }"
  ></div>
</div>

<c8y-load-more cheapNextCheck></c8y-load-more>
