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

<div ng-show="vm.failedToFetchOwnerInventoryRoles === true">
  <div
    class="alert alert-info"
    translate
  >
    You don't have the permission required to manage inventory roles for {{ vm.userId }}.
  </div>
</div>

<div
  class="col-md-10"
  ng-if="vm.failedToFetchOwnerInventoryRoles === false"
>
  <div class="card card--fullpage">
    <div class="card-header separator">
      <div class="card-title">
        {{ 'Assign inventory roles to device groups' | translate }}
      </div>
      <button
        class="btn-help btn-help--sm"
        aria-label="{{ 'Help' | translate }}"
        type="button"
        uib-popover-template="'helpContent.html'"
        popover-trigger="'focus'"
        popover-placement="bottom"
      ></button>
    </div>
    <div
      class="inner-scroll"
      id="inventory-roles-container"
    >
      <div class="card-block sticky-top overflow-visible p-b-0">
        <div
          class="alert alert-info"
          ng-show="vm.displayNoOwnerRolesAlert"
          translate
        >
          No device groups available due to the device owner permissions. The device owner must be
          granted access to some device groups first.
        </div>

        <div class="row m-b-16">
          <div class="col-md-4">
            <div
              class="input-group input-group-search"
              title="{{ 'Filter device groups…' | translate }}"
            >
              <input
                class="form-control"
                placeholder="{{ 'Filter device groups…' | translate }}"
                ng-model="searchTearm"
                ng-model-options="{ allowInvalid: true, debounce: 1000 }"
                ng-change="vm.currentPage = 1; vm.scrollToTop()"
              />
              <span class="input-group-addon">
                <i
                  ng-class="{ 'icon-spin': loading }"
                  c8y-icon="search"
                  ng-show="searchTearm === 0 || !searchTearm"
                ></i>
                <i
                  class="text-muted"
                  c8y-icon="times"
                  ng-show="searchTearm.length > 0"
                  ng-click="searchTearm = ''"
                ></i>
              </span>
            </div>
          </div>
          <div class="col-md-4 col-md-offset-4 d-flex">
            <button
              class="m-l-auto btn btn-clean"
              title="{{ 'Copy inventory roles from another user' | translate }}"
              type="button"
              ng-click="vm.copyRoles()"
              ng-disabled="vm.disableEditForExternalUsers"
            >
              <i c8y-icon="clipboard"></i>
              {{ 'Copy inventory roles from another user' | translate }}
            </button>
          </div>
        </div>

        <div class="c8y-list__item hidden-xs separator-top-bottom">
          <div class="c8y-list__item__block">
            <div class="c8y-list__item__icon p-l-0 p-r-4">
              <button
                class="btn-dot"
                aria-label="{{ 'Expand all groups' | translate }}"
                uib-tooltip="{{ 'Expand all groups' | translate }}"
                data-cy="c8yUserInventoryRolesTab--expandAllGroups"
                tooltip-popup-delay="500"
                tooltip-placement="right"
                type="button"
                ng-click="vm.expandGroups = !vm.expandGroups"
                ng-disabled="vm.expandGroups"
              >
                <i c8y-icon="level-down"></i>
              </button>
            </div>
            <div class="c8y-list__item__body">
              <div class="d-flex">
                <div class="col-sm-7 p-l-0">
                  <label class="m-b-0">Groups</label>
                </div>
                <div class="col-sm-5 p-l-0">
                  <label class="m-b-0">
                    {{ 'Inventory roles' | translate }}
                    <button
                      class="btn-help btn-help--sm"
                      aria-label="{{ 'Help' | translate }}"
                      type="button"
                      uib-popover="{{
                        'Use dropdown to select which roles should be applied to each group and its children.'
                          | translate
                      }}"
                      popover-trigger="'focus'"
                      popover-placement="right"
                      popover-append-to-body="true"
                    ></button>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card-block p-t-0 p-b-0">
        <c8y-roles-asset-tree-downgraded
          [user]="vm.user"
          [expand-groups]="vm.expandGroups"
          [owner-assigned-roles]="vm.ownerAssignedRoles"
          [search-filter]="searchTearm"
          [assigned-roles]="vm.assignedRoles"
          [page-size]="vm.pageSize"
          [pagination-offset]="(vm.currentPage - 1) * vm.pageSize"
          [disable-edit-for-external-users]="vm.disableEditForExternalUsers"
          (on-change-roles)="vm.onChangeRoles($event)"
          (on-change-item-count)="vm.totalItemsCount = $event"
        ></c8y-roles-asset-tree-downgraded>
      </div>
    </div>
    <div class="d-flex card-footer separator sticky-bottom">
      <button
        class="btn btn-default"
        title="{{ 'Clear changes' | translate }}"
        type="button"
        ng-click="vm.loadAssignedRoles()"
        ng-disabled="vm.isUnchanged()"
      >
        {{ 'Clear changes' | translate }}
      </button>
      <button
        class="btn btn-primary"
        title="{{ 'Save' | translate }}"
        type="submit"
        ng-disabled="vm.disableEditForExternalUsers || vm.isUnchanged()"
        ng-click="vm.onSaveInventoryRoles()"
      >
        {{ 'Save' | translate }}
      </button>

      <div class="m-l-auto">
        <pagination
          [total-items]="vm.totalItemsCount"
          [items-per-page]="vm.pageSize"
          [max-size]="10"
          rotate="{{ true }}"
          ng-model="vm.currentPage"
          ng-change="vm.scrollToTop()"
        ></pagination>
      </div>
    </div>
  </div>
</div>

<script
  id="helpContent.html"
  type="text/ng-template"
>
  <div>
    <p class="m-b-4" translate>
      Grant user access to the listed device groups as allowed by the assigned
      inventory roles.
    </p>
    <p class="m-b-4" translate>
      An <strong>inventory role</strong> contains permissions that can be attached to devices
      and groups of devices. You can define inventory roles <a href="#/roles/inventory_roles">here</a>.
    </p>
    <p class="m-b-4" translate>
      You can also copy inventory roles from another user or replace this user's roles with the
      roles of another user.
    </p>
    <span
      ng-click="vm.stopEventPropagation($event)"
    >
      <small
        ng-show="::vm.helpLink"
      >
        <a
          title="{{ 'Help &amp; documentation' | translate }}"
          ng-href="{{::vm.helpLink}}"
          target="_blank"
          rel="noopener noreferrer"
        >
          <i c8y-icon="question-circle-o" class="text-info"></i>
          <span translate>Help &amp; documentation</span>
        </a>
      </small>
    </span>
  </div>
</script>
