<div class="c8y-list__group m-b-0 no-border-last">
  <div
    class="c8y-list__item"
    *ngFor="
      let asset of flatAssetTree$ | async | slice: paginationOffset:paginationOffset + pageSize
    "
  >
    <div
      class="c8y-list__item__block"
      [title]="
        (asset._subGroups && asset.isOpened
          ? asset._subGroups.length
            ? asset._subGroups.length > 1
              ? manySubgroupsTitle
              : oneSubgroupTitle
            : noSubgroupTitle
          : clickToOpenTitle
        ) | translate: { count: asset._subGroups?.length }
      "
    >
      <div [ngStyle]="{ 'padding-left': asset._depth * 8 + 'px' }"></div>
      <div class="c8y-list__item__icon m-t-4 p-l-0">
        <button
          class="btn-clean"
          [attr.aria-label]="(!asset.isOpened ? expandAriaLabel : collapseAriaLabel) | translate"
          type="button"
          (click)="loadChildren(asset)"
        >
          <i
            class="c8y-icon-duocolor"
            c8yIcon="c8y-group"
            *ngIf="!asset.isOpened"
          ></i>
          <i
            class="c8y-icon-duocolor"
            c8yIcon="c8y-group-open"
            *ngIf="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"
              (click)="loadChildren(asset)"
            >
              <span
                class="text-truncate"
                [ngStyle]="{ cursor: 'pointer' }"
                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-upgraded
                  [ownerAllowedRoles]="
                    ownerAllAssignedRoles ? ownerAllAssignedRoles[asset.id] : undefined
                  "
                  [inheritedRoles]="inheritedRoles ? inheritedRoles[asset.id] : undefined"
                  [assignedRoles]="assignedRoles ? assignedRoles[asset.id] : undefined"
                  [inventoryRoles]="inventoryRoles"
                  [disableEditForExternalUsers]="disableEditForExternalUsers"
                  (onApply)="onApply($event, asset.id)"
                  (click)="$event.stopPropagation()"
                ></c8y-inventory-role-selector-upgraded>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <c8y-ui-empty-state
    [icon]="'search'"
    [title]="'No matching group found among the expanded groups.' | translate"
    [subtitle]="'Try to expand more groups or to refine your search term.' | translate"
    *ngIf="searchFilter && !(flatAssetTree$ | async).length"
    [horizontal]="false"
  ></c8y-ui-empty-state>
</div>