<c8y-ui-title-set title="'Users' | translate"></c8y-ui-title-set>

<c8y-breadcrumbs-set>
  <c8y-breadcrumbs-item
    icon="c8y-accounts"
    label="{{ 'Users' | translate }}"
  ></c8y-breadcrumbs-item>
  <c8y-breadcrumbs-item
    icon="c8y-accounts"
    label="{{ 'Accounts' | translate }}"
  ></c8y-breadcrumbs-item>
</c8y-breadcrumbs-set>

<c8y-ui-action-bar-set>
  <li
    class="navbar-form"
    action-bar-position="left"
  >
    <form class="form-inline m-b-0">
      <div class="form-group">
        <div class="input-group input-group-search">
          <input
            class="form-control"
            title="{{ 'Filter users' | translate }}"
            id="Filter"
            placeholder="{{ 'Filter users' | translate }}"
            type="search"
            ng-model="vm.filters.text"
          />
          <span class="input-group-addon">
            <i c8y-icon="search"></i>
          </span>
          <span
            class="sr-only"
            for="Filter"
            translate
          >
            Filter users
          </span>
        </div>
      </div>

      <div class="form-group">
        <c8y-item-selector
          style="max-width: 220px"
          items="::vm.globalRoles"
          items-selected="vm.filters.globalRoles"
          on-apply="vm.filters.globalRoles = items"
          text-apply="{{ 'Done' | translate }}"
          data-cy="c8y-users--filter-user-by-roles"
          text-placeholder="{{ 'Filter by global roles' | translate }}"
        ></c8y-item-selector>
      </div>

      <button
        class="btn btn-default"
        title="{{ 'Apply filters' | translate }}"
        type="button"
        ng-click="vm.applyFilters()"
        c8y-key-shortcut="Enter"
      >
        <i c8y-icon="filter"></i>
        <span
          class="hidden-sm"
          translate
        >
          Apply`filters`
        </span>
      </button>
      <button
        class="m-l-0 btn btn-default"
        title="{{ 'Clear filters' | translate }}"
        type="button"
        ng-click="vm.clearFilters()"
        ng-show="vm.isAnyFilterSelected()"
        c8y-key-shortcut="Escape"
      >
        <i c8y-icon="times"></i>
        <span
          class="hidden-sm"
          translate
        >
          Clear`filters`
        </span>
      </button>
    </form>
  </li>

  <li>
    <button
      class="btn btn-link hidden-sm"
      title="{{ 'Expand all' | translate }}"
      type="button"
      ng-click="vm.expandAll()"
      ng-show="vm.showExpandCollapse()"
    >
      <i c8y-icon="window-maximize"></i>
      {{ 'Expand all' | translate }}
    </button>
  </li>

  <li>
    <button
      class="btn btn-link hidden-sm"
      title="{{ 'Collapse all' | translate }}"
      type="button"
      ng-click="vm.collapseAll()"
      ng-show="vm.showExpandCollapse()"
    >
      <i c8y-icon="minus"></i>
      {{ 'Collapse all' | translate }}
    </button>
  </li>

  <li
    title="{{ 'Add user' | translate }}"
    ng-show="vm.canAddUser"
  >
    <a
      class="btn btn-link"
      href="#{{ vm.ROUTE_NEW_USER }}"
      data-cy="addUser"
    >
      <i
        class="m-r-4"
        c8y-icon="user-plus"
      ></i>
      {{ 'Add user' | translate }}
    </a>
  </li>

  <li ng-show="vm.canRevokeTokens">
    <button
      class="btn btn-link"
      title="{{ 'Log out all users' | translate }}"
      type="button"
      data-cy="c8y-users--log-out-all-users"
      ng-click="vm.revokeTokens()"
    >
      <i c8y-icon="account-disable"></i>
      {{ 'Log out all users' | translate }}
    </button>
  </li>

  <li>
    <button
      class="btn btn-link"
      title="{{ 'Reload' | translate }}"
      type="button"
      ng-click="vm.refresh()"
    >
      <i c8y-icon="refresh"></i>
      {{ 'Reload' | translate }}
    </button>
  </li>
</c8y-ui-action-bar-set>

<c8y-help src="/docs/standard-tenant/managing-users/#managing-users"></c8y-help>

<c8y-bulk-actions
  actions="vm.bulkActions"
  list="vm.users"
  on-complete="vm.refresh()"
></c8y-bulk-actions>

<c8y-user-list
  users="vm.users"
  global-roles="::vm.globalRoles"
  on-load-subusers="vm.loadSubusers(user)"
  on-load-more="vm.loadMore()"
  on-change-user="vm.changeUser(user, action)"
></c8y-user-list>
