<ng-container *ngTemplateOutlet="recursiveDropdown"></ng-container>

<ng-template #recursiveDropdown>
    <clr-dropdown *ngIf="extensionActions?.length">
        <button class="btn btn-outline-primary" clrDropdownTrigger>More <cds-icon shape="angle"
                direction="down"></cds-icon></button>

        <clr-dropdown-menu clrPosition="bottom-left">
            <ng-container *ngFor="let subMenu of extensionActions">
                <ng-container *ngTemplateOutlet="recursiveMenuItems; context: { subMenu: subMenu }"></ng-container>
            </ng-container>
        </clr-dropdown-menu>

        <!-- The `recursiveMenuItems` template must be kept as child of `clr-dropdown` to persist proper styling. -->
        <ng-template #recursiveMenuItems let-subMenu="subMenu">
            <button *ngIf="!subMenu.children" (click)="subMenu?.handler()"
                [disabled]="subMenu?.busy || subMenu?.disabled()" clrDropdownItem>
                {{ subMenu.textKey }}
            </button>

            <clr-dropdown *ngIf="subMenu.children">
                <button clrDropdownTrigger>{{ subMenu.textKey }}</button>
                <clr-dropdown-menu clrPosition="bottom-right">
                    <ng-container *ngFor="let subMenu of subMenu.children">
                        <ng-container
                            *ngTemplateOutlet="recursiveMenuItems; context: { subMenu: subMenu }"></ng-container>
                    </ng-container>
                </clr-dropdown-menu>
            </clr-dropdown>
        </ng-template>
    </clr-dropdown>
</ng-template>

<vcd-extension-container [extensionComponents]="vmActionExtensionConsumer.VM_ACTION_COMPONENT_SCOPE"
    (onComponentsChange)="vmActionExtensionConsumer.onEntityActionExtensionComponentsChange($event)">
</vcd-extension-container>