<ng-container *ngIf="styling == 'grid-menu'">
    <ng-container *ngFor="let componentMenuEntry of componentMenuEntries">
        <ng-container *ngIf="componentMenuEntry.menuEntry?.children">
            <hr class="grid-menu-rule" />
            <h6 class="grid-menu-header top-level">
                {{ componentMenuEntry.menuEntry.text | getExtensionString: componentMenuEntry.translations }}
            </h6>
            <button
                *ngFor="let menuItem of componentMenuEntry.menuEntry.children"
                class="action-item second-level"
                [disabled]="!menuItem.enabled"
                type="button"
                (click)="onMenuItemClick(componentMenuEntry.component, menuItem.urn)"
            >
                <span *ngIf="menuItem.busy" class="spinner spinner-inline"></span>
                {{ menuItem.text }}
            </button>
        </ng-container>

        <button
            *ngIf="!componentMenuEntry.menuEntry.children"
            class="action-item"
            class="top-level"
            [disabled]="!componentMenuEntry.menuEntry.enabled"
            type="button"
            (click)="onMenuItemClick(componentMenuEntry.component, componentMenuEntry.menuEntry.urn)"
        >
            <span *ngIf="componentMenuEntry.menuEntry.busy" class="spinner spinner-inline"></span>
            {{ componentMenuEntry.menuEntry.text | getExtensionString: componentMenuEntry.translations }}
        </button>
    </ng-container>
</ng-container>

<ng-container *ngIf="styling == 'card-menu'">
    <div *ngIf="componentMenuEntries.length" class="dropdown-divider"></div>
    <ng-container *ngFor="let componentMenuEntry of componentMenuEntries">
        <clr-dropdown *ngIf="componentMenuEntry.menuEntry.children" class="card-menu-header">
            <button class="top-level top-level" type="button" clrDropdownTrigger>
                {{ componentMenuEntry.menuEntry.text | getExtensionString: componentMenuEntry.translations }}
            </button>
            <clr-dropdown-menu>
                <button
                    *ngFor="let menuItem of componentMenuEntry.menuEntry.children"
                    class="second-level"
                    [clrDisabled]="!menuItem.enabled"
                    type="button"
                    (click)="onMenuItemClick(componentMenuEntry.component, menuItem.urn)"
                    clrDropdownItem
                >
                    <span *ngIf="menuItem.busy" class="spinner spinner-inline"></span>
                    {{ menuItem.text | getExtensionString: componentMenuEntry.translations }}
                </button>
            </clr-dropdown-menu>
        </clr-dropdown>

        <button
            *ngIf="!componentMenuEntry.menuEntry.children"
            [clrDisabled]="!componentMenuEntry.menuEntry.enabled"
            type="button"
            class="top-level"
            (click)="onMenuItemClick(componentMenuEntry.component, componentMenuEntry.menuEntry.urn)"
            clrDropdownItem
        >
            <span *ngIf="componentMenuEntry.menuEntry.busy" class="spinner spinner-inline"></span>
            {{ componentMenuEntry.menuEntry.text | getExtensionString: componentMenuEntry.translations }}
        </button>
    </ng-container>
</ng-container>
