<ng-container *ngIf="params$ | async as params">
    <div
        *ngIf="
            headerDetails(params.details$ | async) ||
            bodyDetails(params.details$ | async)?.length ||
            (params.actions$ | async)?.length
        "
        [id]="DOCDB_POPUP"
        [style.bottom]="(bottom$ | async) + 'px'"
        [style.left]="(left$ | async) + 'px'"
        [style.right]="(right$ | async) + 'px'"
        [style.top]="(top$ | async) + 'px'"
        class="docdb-popup"
    >
        <nz-card
            [nzBorderless]="true"
            [nzTitle]="headerDetails(params.details$ | async)"
        >
            <div *ngIf="bodyDetails(params.details$ | async)?.length">
                <nz-table
                    #detailsTable
                    [nzData]="bodyDetails(params.details$ | async)"
                    nzFrontPagination="false"
                    nzSize="small"
                >
                    <tbody>
                    <tr *ngFor="let data of detailsTable.data">
                        <td>
                            {{ data.title }}
                        </td>
                        <td>
                            {{ data.value }}
                        </td>
                    </tr>
                    </tbody>
                </nz-table>
            </div>
            <div class="buttons">
                <div class="dynamic-buttons">
                    <button
                        (click)="actionClicked(item)"
                        *ngFor="let item of params.actions$ | async"
                        [nzTooltipTitle]="item.tooltip"
                        nz-button
                        nz-tooltip
                        nzSize="large"
                        nzType="default"
                        style="white-space: normal"
                    >
                        <i
                            *ngIf="item.icon"
                            nz-icon
                            nzTheme="outline"
                            nzType="{{ item.icon }}"
                        ></i>
                    </button>
                </div>
                <div class="details-buttons">
                    <button
                        (click)="showDetailsPopup()"
                        *ngIf="(currentPopup$ | async) === 'summary'"
                        [nzTooltipTitle]="'Full Details'"
                        nz-button
                        nz-tooltip
                        nzSize="large"
                        nzType="default"
                        style="white-space: normal"
                    >
                        <i nz-icon nzTheme="outline" nzType="info"></i>
                    </button>
                </div>
            </div>
        </nz-card>
    </div>
</ng-container>

<nz-modal
    (nzOnCancel)="closeModal()"
    (nzVisible)="closeModal()"
    [nzFooter]="null"
    [nzTitle]="modalName()"
    [nzVisible]="(modalAction$ | async) != null"
>
    <ng-container *nzModalContent>
        <div class="child-menu-items">
            <ul nz-menu>
                <li
                    (click)="modalActionClicked(child)"
                    *ngFor="let child of modalChildActions()"
                    nz-menu-item
                >
                    <i
                        *ngIf="child.icon"
                        nz-icon
                        nzTheme="outline"
                        nzType="{{ child.icon }}"
                    ></i>
                    {{ child.name }}
                </li>
            </ul>
        </div>
    </ng-container>
</nz-modal>
