<div #container>
        <div 
            #root
            *ngIf="!!formConfiguration" 
            kendoRippleContainer
            [disabled]="!enableRippleEffect"
            [ngClass]="formConfiguration.settings.classList" 
            [ngStyle]="formConfiguration.settings.style">
                <ng-container *ngIf="!isChildActive">
                    <!-- data sources configuration -->
                    <smart-data-source
                        *ngFor="let datasource of formConfiguration.dataSources"
                        [smart-server-side-filtering]="datasource.serverSideFiltering"
                        [smart-server-side-sorting]="datasource.serverSideSorting"
                        [smart-instance-name]="datasource.instanceName"
                        [smart-object-name]="datasource.objectName"
                        [smart-business-entity-name]="datasource.entityName"
                        [smart-entity-table]="datasource.tableRef"
                        [smart-entity-view]="datasource.entityView"
                        [smart-filter]="datasource.initialFilter || datasource.smartFilter"
                        [smart-sort]="datasource.initialSort"
                        [smart-data-source]="datasource.parentDataSource"
                        [smart-foreign-fields]="datasource.foreignFields"
                        [smart-navigation-source]="datasource.navigationSource"
                        [use-initial-values]="datasource.useInitialValues"
                        [smart-filter-source]="datasource.filterSource"
                        [smart-auto-fetch]="datasource.autoFetch"
                        [smart-partial-dataset]="datasource.partialDataset">
                    </smart-data-source>

                    <ng-container *ngIf="!!formConfiguration.rows && !formConfiguration.columns">
                        <div class="container-fluid">
                        <div class="row smart-form-row" *ngFor="let row of formConfiguration.rows">
                            <FormColumn
                                *ngFor="let column of row.items"
                                [class]="column.widthClass"
                                [formItems]="[column]">
                            </FormColumn>
                        </div>
                        </div>
                    </ng-container>
                    <ng-container *ngIf="!!formConfiguration.columns && !formConfiguration.rows">
                        <div class="container-fluid">
                        <div class="row smart-form-row" [ngStyle]="{ flexDirection: flexDirection ? flexDirection : 'row', display: 'flex' }" >
                            <FormColumn 
                                *ngFor="let column of formConfiguration.columns" 
                                [class]=" flexDirection === 'column' ? 'w-100' : columnWidthCssClass" 
                                [formItems]="column.items">
                            </FormColumn>
                        </div>
                        </div>
                    </ng-container>
            </ng-container>
            <smart-form-outlet *ngIf="isChildActive"></smart-form-outlet>    
        </div>   
    </div>

    <ng-template #floatingWindowTitleBar let-win>
        <div class="k-window-title">
            <img *ngIf="formIconUrl" class="form-window-icon" [src]="formIconUrl">
            <span [ngStyle]="{ marginLeft: formIconUrl ? '20px' : 'inherit' }">
                {{formTitle}}
            </span>
        </div>
        <div class="k-window-actions">
            <button
                (click)="setWindowState('minimized')"
                [hidden]="windowHelperService.windowRef.window.instance.state === 'minimized'"
                class="k-button-icon k-button k-bare" 
                role="button" 
                title="Minimize" 
                aria-label="Minimize" 
                aria-disabled="false" dir="ltr" type="button" 
                style="display: inline-flex;">
                    <span class="k-icon k-i-window-minimize" role="presentation"></span>
            </button>
            <button
                [hidden]="windowHelperService.windowRef.window.instance.state === 'minimized' || windowHelperService.windowRef.window.instance.state === 'maximized'"
                (click)="setWindowState('maximized')"
                class="k-button-icon k-button k-bare" 
                role="button" 
                title="Maximize" 
                aria-label="Maximize" 
                aria-disabled="false" dir="ltr" type="button" 
                style="display: inline-flex;">
                    <span class="k-icon k-i-window-maximize" role="presentation"></span>
            </button>
            <button
                [hidden]="!(windowHelperService.windowRef.window.instance.state === 'minimized' || windowHelperService.windowRef.window.instance.state === 'maximized')"
                (click)="setWindowState('default')"
                class="k-button-icon k-button k-bare" 
                role="button" 
                title="Restore" 
                aria-label="Restore" 
                aria-disabled="false" dir="ltr" type="button" 
                style="display: inline-flex;">
                    <span class="k-icon k-i-window-restore" role="presentation"></span>
            </button>
            <button
                (click)="closeWindow()"
                class="k-button-icon k-button k-bare" 
                role="button" 
                title="Close" 
                aria-label="Close" 
                aria-disabled="false" dir="ltr" type="button" 
                style="display: inline-flex;">
                    <span class="k-icon k-i-close" role="presentation"></span>
            </button>
        </div>
    </ng-template>