<c8y-confirm-modal [title]="title" [status]="status" [labels]="labels" #modalRef>
  <form #assetsForm="ngForm">
    <p class="text-wrap m-b-16">
      {{ message | translate }}
    </p>
    <c8y-form-group *ngIf="showWithCascadeCheckbox" class="m-b-0">
      <label title="{{ 'Delete devices' | translate }}" class="c8y-checkbox">
        <input
          type="checkbox"
          name="cascade"
          [(ngModel)]="config.cascade"
          c8yProductExperience
          [actionName]="PRODUCT_EXPERIENCE.EVENT"
          [actionData]="{
            component: PRODUCT_EXPERIENCE.DELETE_ASSET.COMPONENTS.DELETE_ASSETS_MODAL,
            action: PRODUCT_EXPERIENCE.DELETE_ASSET.ACTIONS.CASCADE_DELETE
          }"
          [disabled]="config?.withDeviceUser"
        />
        <span></span>
        <span class="text-break-word">
          {{ deleteGroupSubAssetsMsg | translate }}
        </span>
      </label>
    </c8y-form-group>
    <c8y-form-group *ngIf="showWithDeviceUserCheckbox" class="m-b-0">
      <label title="{{ 'Delete associated device owner' | translate }}" class="c8y-checkbox">
        <input
          type="checkbox"
          name="withDeviceUser"
          [(ngModel)]="config.withDeviceUser"
          c8yProductExperience
          [actionName]="PRODUCT_EXPERIENCE.EVENT"
          [actionData]="{
            component: PRODUCT_EXPERIENCE.DELETE_ASSET.COMPONENTS.DELETE_ASSETS_MODAL,
            action: PRODUCT_EXPERIENCE.DELETE_ASSET.ACTIONS.DELETE_DEVICE_OWNER
          }"
          [disabled]="config?.cascade"
        />
        <span></span>
        <span>
          {{ 'Also delete associated device owner.' | translate }}
        </span>
      </label>
    </c8y-form-group>
  </form>
</c8y-confirm-modal>