<!-- @Deprecated: Component migrated to angular.-->
<!--packages/ngx-components/user-roles/roles-asset-tree/roles-asset-tree.component.ts-->

<div hidden="true">
  {{
    vm.onChangeItemCount({
      count: (vm.flatAssetTree | filter: vm.filterAsset | filter: { name: vm.searchFilter }).length
    })
  }}
</div>
<div class="c8y-list__group m-b-0 no-border-last">
  <div
    class="c8y-list__item"
    ng-repeat="asset in vm.flatAssetTree | filter:vm.filterAsset | filter:{name:vm.searchFilter} | limitTo : vm.pageSize : vm.paginationOffset"
  >
    <div
      class="c8y-list__item__block"
      title="{{ vm.title(asset) }}"
    >
      <div ng-style="::{'padding-left': asset._depth * 8}"></div>
      <div class="c8y-list__item__icon m-t-4 p-l-0">
        <button
          class="btn-clean"
          aria-label="{{ 'Open' | translate }}"
          type="button"
          ng-click="vm.loadChildren(asset)"
        >
          <i
            class="c8y-icon-duocolor"
            c8y-icon="c8y-group"
            ng-if="!asset.isOpened"
          ></i>
          <i
            class="c8y-icon-duocolor"
            c8y-icon="c8y-group-open"
            ng-if="asset.isOpened"
          ></i>
        </button>
      </div>
      <div class="c8y-list__item__body">
        <div class="d-flex a-i-center">
          <div class="col-sm-7 p-l-0 col-xs-12">
            <button
              class="btn-clean"
              type="button"
              ng-click="vm.loadChildren(asset)"
            >
              <span
                class="text-truncate"
                ng-style="{ cursor: asset._subGroups === undefined ? 'pointer' : 'default' }"
                title="{{::asset.name}}"
              >
                {{::asset.name}}
              </span>
            </button>
          </div>
          <div class="p-t-8 col-xs-12 visible-xs"></div>
          <div class="col-sm-5 p-l-0 col-xs-12 p-r-0">
            <div class="d-flex">
              <div class="flex-grow form-group-sm max-width-100">
                <c8y-inventory-role-selector
                  owner-allowed-roles="vm.ownerAllAssignedRoles[asset.id]"
                  inherited-roles="vm.inheritedRoles[asset.id]"
                  assigned-roles="vm.assignedRoles[asset.id]"
                  inventory-roles="::vm.inventoryRoles"
                  on-apply="::vm.onApply(roles, asset.id)"
                  ng-click="$event.stopPropagation()"
                ></c8y-inventory-role-selector>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
