<fieldset class="c8y-fieldset p-8">
  <div *ngIf="accessMapping.when.childPredicates.length != 0">
    <c8y-sso-child-predicates
      [childPredicates]="accessMapping.when.childPredicates"
      [accessMappingIndex]="'am' + accessMappingIndex"
      (onRemoveAllChildPredicates)="onRemoveAllChildPredicates()"
    ></c8y-sso-child-predicates>

    <fieldset class="c8y-fieldset p-16">
      <legend>
        {{ 'Provide access to' | translate }}
      </legend>
      <div class="row">
        <div class="col-sm-6">
          <div
            title="{{ 'Default global roles' | translate }}"
            class="form-group"
          >
            <label
              [for]="'groups' + accessMappingIndex"
              class="control-label"
            >
              {{ 'Default global roles' | translate }}
            </label>
            <c8y-select-legacy
              [id]="'groups' + accessMappingIndex"
              [items]="groups"
              [selected]="selectedGroups"
              [disableApplyOnNoSelection]="true"
              (onChange)="controlContainer.control.markAsDirty(); selectedGroups = $event; accessMapping.thenGroups = getIds($event)"
            ></c8y-select-legacy>
          </div>
        </div>
        <div class="col-sm-6">
          <div
            title="{{ 'Default applications' | translate }}"
            class="form-group"
          >
            <label
              [for]="'apps' + accessMappingIndex"
              class="control-label"
            >
              {{ 'Default applications' | translate }}
            </label>
            <c8y-select-legacy
              [id]="'apps' + accessMappingIndex"
              [items]="apps"
              [selected]="selectedApps"
              [disableApplyOnNoSelection]="true"
              (onChange)="controlContainer.control.markAsDirty(); selectedApps = $event; accessMapping.thenApplications = getIds($event)"
            ></c8y-select-legacy>
          </div>
        </div>
      </div>
    </fieldset>
  </div>
</fieldset>