<div class="clr-row">
    <div class="clr-col-lg-4 clr-col-12">
        <div class="card">
            <div class="card-block">
                <h3 class="card-title">VM 1</h3>
                <p class="card-text">
                    ...
                </p>
            </div>
            <div class="card-footer">
                <clr-dropdown>
                    <button class="btn btn-outline-primary" clrDropdownTrigger>
                        Actions
                        <cds-icon shape="angle" direction="down"></cds-icon>
                    </button>
                    <clr-dropdown-menu clrPosition="top-left" *clrIfOpen>
                        <div aria-label="Dropdown header Action 1" clrDropdownItem>Power On</div>
                        <div aria-label="Dropdown header Action 1" clrDropdownItem>Power Off</div>
                        <div aria-label="Dropdown header Disabled Action" [clrDisabled]="true" clrDropdownItem>Disabled Action</div>
                        <div class="dropdown-divider" role="separator" aria-hidden="true"></div>

                        <ng-container *ngFor="let extensionActionItem of extensionActionItems">
                            <ng-template
                                [ngTemplateOutlet]="recursiveDropdown"
                                [ngTemplateOutletContext]="{ extensionActionItem: extensionActionItem }">
                            </ng-template>
                        </ng-container>

                        <ng-template #recursiveDropdown let-extensionActionItem="extensionActionItem">
                            <clr-dropdown *ngIf="extensionActionItem?.children?.length">
                                <button clrDropdownTrigger>{{ extensionActionItem.textKey }}</button>
                                <clr-dropdown-menu>
                                    <ng-container *ngFor="let child of extensionActionItem.children">
                                        <button
                                            *ngIf="!child?.children?.length"
                                            (click)="child.handler()"
                                            clrDropdownItem>
                                            {{ child.textKey }}
                                        </button>
                        
                                        <ng-container *ngIf="child?.children?.length">
                                            <ng-template
                                                [ngTemplateOutlet]="recursiveDropdown"
                                                [ngTemplateOutletContext]="{ extensionActionItem: child }">
                                            </ng-template>   
                                        </ng-container>
                                    </ng-container>            
                                </clr-dropdown-menu>
                            </clr-dropdown>
                        
                            <button
                                *ngIf="!extensionActionItem?.children?.length"
                                (click)="extensionActionItem.handler()"
                                clrDropdownItem>
                                {{ extensionActionItem.textKey }}
                            </button>
                        </ng-template>
                    </clr-dropdown-menu>
                </clr-dropdown>
            </div>
        </div>
    </div>
</div>

<vcd-extension-container
    *ngIf="extensionComponents"
    [extensionComponents]="extensionComponents"
    (onComponentsChange)="onEntityActionExtensionComponentsChange($event)"
>
</vcd-extension-container>