<fieldset class="c8y-fieldset p-t-8 p-b-8 p-l-16 p-r-16">
  <div *ngIf="inventoryMapping.when.childPredicates.length !== 0">
    <c8y-sso-child-predicates
      [childPredicates]="inventoryMapping.when.childPredicates"
      [accessMappingIndex]="'irm' + inventoryMappingIndex"
      (onRemoveAllChildPredicates)="onRemoveAllChildPredicates()"
    ></c8y-sso-child-predicates>
    <fieldset class="c8y-fieldset p-16">
      <legend>
        {{ 'Provide inventory roles' | translate }}
      </legend>
      <div
        class="p-l-8 p-r-8"
        *ngIf="inventoryMapping.thenInventoryRoles.length !== 0"
      >
        <div class="tight-grid p-b-8 separator-bottom hidden-sm hidden-xs">
          <div class="col-md-5">
            <label translate>Groups</label>
          </div>
          <div class="col-md-6">
            <label translate>Inventory roles</label>
          </div>
        </div>
        <div
          class="tight-grid d-flex-md a-i-center p-t-8 p-b-8 separator-bottom"
          *ngFor="let inventoryRole of inventoryMapping.thenInventoryRoles; index as idx"
        >
          <div class="col-md-5">
            <div class="d-flex a-i-center">
              <!-- TODO:
                We need to retrive the icon here, for groups there are 3 possible icons:
                • Regular group
                • Remote group
                • Smartgroup
                Besides groups, there's also Assets from DTM, in which each asset has a different icon
              -->
              <i
                class="m-r-8 text-16"
                c8yIcon="c8y-group"
              ></i>
              <span
                class="text-truncate"
                title="{{ inventoryRole.managedObject | moName | async }}"
              >
                {{ inventoryRole.managedObject | moName | async }}
              </span>
            </div>
          </div>
          <div class="col-md-6">
            <div
              class="form-group m-b-0"
              title="{{ 'Inventory roles' | translate }}"
            >
              <c8y-select-legacy
                [id]="'ir' + idx + accessMappingIndex"
                [items]="inventoryRoles"
                [selected]="selectedInventoryRoles[inventoryRole.managedObject]"
                [disableApplyOnNoSelection]="true"
                (onChange)="
                  controlContainer.control.markAsDirty();
                  selectedInventoryRoles[inventoryRole.managedObject] = $event;
                  inventoryRole.roleIds = getIds($event)
                "
              ></c8y-select-legacy>
            </div>
          </div>
          <div class="col-md-1">
            <button
              class="btn btn-dot btn-dot--danger hidden-xs hidden-sm"
              [attr.aria-label]="'Remove' | translate"
              tooltip="{{ 'Remove' | translate }}"
              name="removeButton"
              type="button"
              (click)="controlContainer.control.markAsDirty(); removeInventoryRole(inventoryRole)"
              [delay]="300"
            >
              <i c8yIcon="minus-circle"></i>
            </button>
            <button
              class="btn btn-danger btn-block btn-sm visible-xs visible-sm"
              title="{{ 'Remove' | translate }}"
              name="removeButton"
              type="button"
              (click)="controlContainer.control.markAsDirty(); removeInventoryRole(inventoryRole)"
            >
              <i c8yIcon="minus-circle"></i>
              <span translate>Remove</span>
            </button>
          </div>
        </div>
      </div>

      <button
        class="btn btn-default m-t-16"
        title="{{ 'Add inventory roles' | translate }}"
        id="add-inventory-roles-button"
        type="button"
        (click)="addInventoryRoles()"
      >
        <i
          class="m-r-4"
          c8yIcon="plus-circle"
        ></i>
        {{ 'Add inventory roles' | translate }}
      </button>
    </fieldset>
  </div>
</fieldset>