<div ng-controller="deviceUserListCtrl as vm">
  <c8y-ui-title-set
    title="'Device credentials' | translate"
    subtitle="getSubtitle()"
  ></c8y-ui-title-set>

  <c8y-breadcrumbs-set>
    <c8y-breadcrumbs-item
      icon="card-security1"
      label="{{ 'Device credentials' | translate }}"
    ></c8y-breadcrumbs-item>
    <c8y-breadcrumbs-item
      icon="c8y-management"
      label="{{ 'Management' | translate }}"
    ></c8y-breadcrumbs-item>
  </c8y-breadcrumbs-set>

  <c8y-ui-action-bar-set>
    <li
      class="navbar-form"
      action-bar-position="left"
    >
      <form class="form-inline">
        <div class="form-group">
          <div
            class="input-group input-group-search"
            title="{{ 'Filter…' | translate }}"
          >
            <input
              class="form-control"
              placeholder="{{ 'Filter…' | translate }}"
              type="search"
              ng-model="vm.filtering.filters.username"
            />
            <span class="input-group-addon">
              <button
                class="btn-clean"
                title="{{ 'Apply filter' | translate }}"
                type="submit"
                ng-click="vm.applyFilters()"
              >
                <i c8y-icon="search"></i>
                <span
                  class="sr-only"
                  translate
                >
                  Apply`filters`
                </span>
              </button>
              <button
                class="btn-clean"
                title="{{ 'Clear filters' | translate }}"
                type="button"
                ng-click="vm.clearFilters()"
                ng-show="vm.isAnyFilterSelected()"
              >
                <i c8y-icon="times"></i>
                <span
                  class="sr-only"
                  translate
                >
                  Clear`filters`
                </span>
              </button>
            </span>
          </div>
        </div>
      </form>
    </li>

    <c8y-refresh-btn></c8y-refresh-btn>
  </c8y-ui-action-bar-set>

  <c8y-help
    src="/docs/device-management-application/managing-device-data/#managing-device-credentials"
  ></c8y-help>

  <!-- empty state-->
  <div
    class="c8y-empty-state text-center m-t-40"
    ng-show="!vm.filtering.applied && users.length === 0"
  >
    <h1 c8y-icon="card-security1"></h1>
    <h3 translate>There are no device credentials</h3>
    <p translate>Start by registering a device</p>
    <a
      class="btn btn-primary ng-scope"
      title="{{ 'Register device' | translate }}"
      href="/apps/devicemanagement/#/deviceregistration"
    >
      <i c8y-icon="c8y-device-connect"></i>
      {{ 'Register device' | translate }}
    </a>
  </div>

  <!-- no results empty state -->
  <div
    class="c8y-empty-state"
    ng-if="vm.filtering.applied && users.length === 0"
  >
    <h1
      class="c8y-icon-duocolor"
      c8y-icon="search"
    ></h1>
    <h3 translate>No results to display.</h3>
    <p>
      <span translate>No device users starting with</span>
      <strong>{{::vm.filtering.filters.username}}</strong>
      .
      <br />
      <span translate>Refine your search terms or check your spelling.</span>
    </p>
  </div>

  <div
    class="c8y-list__group"
    ng-if="users.length > 0"
  >
    <div
      class="c8y-list__item c8y-list__item--empty-actions page-sticky-header hidden-xs"
      ng-if="users.length"
    >
      <div class="c8y-list__item__block">
        <div class="c8y-list__item__icon">
          <i class="dlt-c8y-icon p-l-24"></i>
        </div>
        <div class="c8y-list__item__body text-truncate-wrap">
          <div class="content-flex-60">
            <div class="col-4">
              {{ 'Device user' | translate }}
            </div>
            <div class="col-3">
              {{ 'Status' | translate }}
            </div>
            <div class="col-3">
              {{ 'Global roles' | translate }}
            </div>
          </div>
        </div>
        <div class="c8y-list__actions"></div>
      </div>
    </div>

    <div
      class="c8y-list__item"
      ng-repeat="user in users"
    >
      <div class="c8y-list__item__block">
        <div class="c8y-list__item__icon">
          <i c8y-icon="card-security1"></i>
        </div>
        <div class="c8y-list__item__body">
          <div class="content-flex-60">
            <div class="col-4">
              <button
                class="btn-clean"
                title="{{::user.userName}}"
                type="button"
                ng-click="navigateToDetail(user)"
              >
                <span class="text-truncate">
                  {{::user.userName}}
                </span>
              </button>
            </div>
            <div class="col-3">
              <label class="c8y-switch c8y-switch--inline">
                <input
                  type="checkbox"
                  ng-model="user.enabled"
                  ng-change="toggleUserStatus(user)"
                />
                <span></span>
                <span ng-if="user.enabled">
                  {{ 'Enabled' | translate }}
                </span>
                <span ng-if="!user.enabled">
                  {{ 'Disabled' | translate }}
                </span>
              </label>
              <div class="visible-xs p-t-8"></div>
            </div>
            <div class="col-3">
              <c8y-item-selector
                class="form-group-sm"
                items="globalRolesAvailable(user)"
                items-selected="mapRolesForUser(user.groups.references)"
                on-apply="onChangeRoles(user, items)"
                text-apply="{{ 'Apply' | translate }}"
              ></c8y-item-selector>
            </div>
          </div>
        </div>
        <div class="c8y-list__item__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()"
            >
              <i c8y-icon="ellipsis-v"></i>
            </button>
            <ul
              class="dropdown-menu dropdown-menu-right"
              uib-dropdown-menu
            >
              <li>
                <button
                  title="{{ 'Edit' | translate }}"
                  type="button"
                  ng-click="navigateToDetail(user)"
                >
                  <i c8y-icon="pencil"></i>
                  {{ 'Edit' | translate }}
                </button>
              </li>
              <li>
                <button
                  title="{{ 'Delete' | translate }}"
                  type="button"
                  ng-click="onClickDelete(user)"
                >
                  <i c8y-icon="delete"></i>
                  {{ 'Delete' | translate }}
                </button>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <c8y-load-more change-page-size></c8y-load-more>
</div>
