<ng-container *ngIf="page">
<!-- <pre style="text: 18px"> {{ selectedWidget | json }} </pre> -->
    <div id="page">
        <!-- CONTENT EDITOR -->
        <div id="content">
            <div class="p-3 static-page-text" *ngIf="!page?.dynamic">
                <i class="pi pi-file" style="font-size: 5rem"></i>
                <div class="static-page-text-title">{{ 'PAGE_EDITOR.STATIC_PAGE_TITLE' | translate }}</div>                
                <div class="static-page-text-subtitle">{{ 'PAGE_EDITOR.STATIC_PAGE_SUBTITLE' | translate }}</div>                
            </div>
            <div class="p-3" *ngIf="page?.dynamic">
                <div *ngIf="page?.configuration?.layout?.rows;else noConfiguration">
                    <div class="grid m-2" *ngFor="let row of page?.configuration?.layout?.rows; let rowIndex = index">
                        <div class="col">
                            <p-card>
                                <ng-template pTemplate="header">
                                    <div class="grid">
                                        <div class="col-12 text-right p-0 pr-2">
                                            <button 
                                                (click)="removeRow(row)"
                                                pTooltip="{{ 'PAGE_EDITOR.REMOVE_ROW_TITLE' | translate }}"
                                                pButton                                                        
                                                type="button"
                                                class="p-button-text button-close p-button-danger">
                                                <mat-icon>clear</mat-icon>
                                            </button>
                                        </div>
                                    </div>
                                </ng-template>

                                <div>
                                    <button 
                                        (click)="addColumn(row)"
                                        pTooltip="{{ 'PAGE_EDITOR.ADD_COLUMN_TITLE' | translate }}"
                                        pButton
                                        pRipple type="button"
                                        icon="pi pi-plus"
                                        class="p-button float-right ml-2">
                                        
                                    </button>
                                </div>

                                <div class="grid" *ngIf="row?.columns">
                                    <div *ngFor="let column of row.columns; let columnIndex = index" class="col px-0 mx-0 pb-0 mb-2 col-{{column.width}}" [ngClass]="{ 'column-selected': column === selectedColumn }">
                                        <p-card (click)="selectedColumn = column" styleClass="m-2">
                                            <ng-template pTemplate="header">
                                                <div class="grid">
                                                    <div class="col-12 text-right p-0 pr-2">
                                                        <button 
                                                            (click)="removeColumn(row, column)"
                                                            pTooltip="{{ 'PAGE_EDITOR.REMOVE_COLUMN_TITLE' | translate }}"
                                                            pButton                                                                
                                                            type="button"
                                                            class="p-button-text button-close p-button-danger">
                                                        <mat-icon>clear</mat-icon>
                                                        </button>
                                                    </div>
                                                </div>
                                            </ng-template>

                                            <div class="widgetContainer m-2 p-2"
                                                 *ngFor="let widget of column.widgets, index as i"
                                                 (click)="updateSelectedWidget(column, i )"
                                                 [ngStyle]="column!.style ? column!.style : {}"
                                                 [ngClass]="{ 'widget-selected': widget === selectedWidget }
                                                 ">
<!--   <pre>{{widget | json}}</pre> -->
                                                <div class="text-right button-widgets-set">
                                                 	 <button
                                                             (click)="updateSelectedWidget(column, i)"
                                                             pTooltip="{{ 'PAGE_EDITOR.UPDATE_WIDGET' | translate }}"
                                                             pButton
                                                             type="button"
                                                         
                                                             class="p-button-text button-widget button-widget-refresh p-button-info">
                                                     <mat-icon>edit</mat-icon>
                                                     </button>
                                                    <button
                                                            (click)="refreshWidget(column, widget)"
                                                            pTooltip="{{ 'PAGE_EDITOR.REFRESH_WIDGET' | translate }}"
                                                            pButton
                                                            type="button"
                                                            class="p-button-text button-widget button-widget-refresh p-button-info">
                                                    <mat-icon>refresh</mat-icon></button>
                                                    <button
                                                            (click)="removeWidget(column, widget)"
                                                            pTooltip="{{ 'PAGE_EDITOR.REMOVE_WIDGET' | translate }}"
                                                            pButton
                                                            type="button"
                                                            class="p-button-text button-widget button-widget-close p-button-danger">
                                                    <mat-icon>clear</mat-icon></button>
                                                </div>

                                                <chart-widget *ngIf="'CHART' == widget.type" [widget]="widget"></chart-widget>
                                                <text-widget *ngIf="'TEXT' == widget.type" [widget]="widget"></text-widget>
                                                <table-widget *ngIf="'TABLE' == widget.type" [widget]="widget"></table-widget>
                                                <image-widget *ngIf="'IMAGE' == widget.type" [widget]="widget"></image-widget>

                                            </div>
                                            <div>                                                
                                                <button type="button" pButton pRipple icon="pi pi-plus-circle" label="{{'PAGE_EDITOR.ADD_WIDGET' | translate}}" 
                                                (click)="selectedColumn = column; menu.toggle($event)"></button>
                                                <p-menu #menu [popup]="true" [model]="widgetsMenuItems"></p-menu>
                                            </div>        
        
                                        </p-card>
                                    </div>
                                    <!-- <div class="col-1">
                                        <button 
                                            (click)="addColumn(row)"
                                            pTooltip="{{ 'PAGE_EDITOR.ADD_COLUMN_TITLE' | translate }}"
                                            pButton
                                            pRipple type="button"
                                            icon="pi pi-plus"
                                            class="p-button">
                                        </button>
                                    </div> -->
                                </div>        

                            </p-card>
                        </div>
                    </div>

                    <div class="ml-3">
                        <button 
                            (click)="addRow()"
                            pTooltip="{{ 'PAGE_EDITOR.ADD_ROW_TITLE' | translate }}"
                            pButton
                            pRipple type="button"
                            icon="pi pi-plus"
                            class="p-button">
                        </button>
                    </div>

                </div>
            
                <ng-template #noConfiguration>
                    <div>
                        {{ 'PAGE_EDITOR.NO_CONFIG' | translate }}                 
                    </div>        
                </ng-template>

            </div>
        </div>

        <!-- SIDEBAR -->
        <div id="sideBar" [ngClass]="{'sidebar-closed': sidebarClosed}">
            <div 
                class="sidebar-handle"
                (click)="sidebarClosed = !sidebarClosed"                
                ><i class="pi pi-chevron-left" style="font-size: 10px; color: #8b8ba2;"></i></div>
            <div class="p-0" [ngClass]="{'hidden': sidebarClosed}">
                <p-accordion [multiple]="true">
                    <p-accordionTab header="{{ 'PAGE_EDITOR.PAGE_PROPERTIES.PANEL_TITLE' | translate }}" [selected]="true">
                        
                        <app-page-properties-editor [page]="page"></app-page-properties-editor>

                    </p-accordionTab>
                    <p-accordionTab *ngIf="page?.dynamic" header="{{ 'PAGE_EDITOR.COLUMN_PROPERTIES.PANEL_TITLE' | translate }}" [selected]="true">
                        
                        <div *ngIf="!selectedColumn" class="mb-2">
                            {{ 'PAGE_EDITOR.COLUMN_PROPERTIES.NO_COLUMN_SELECTED' | translate }}
                        </div>
    
                        <app-column-properties-editor *ngIf="selectedColumn" [column]="selectedColumn"></app-column-properties-editor>

                    </p-accordionTab>
                    <p-accordionTab *ngIf="page?.dynamic" header="{{ 'PAGE_EDITOR.WIDGET_PROPERTIES.PANEL_TITLE' | translate }}" [selected]="true">
                        <div *ngIf="!selectedWidget" class="mb-2">
                        {{ 'PAGE_EDITOR.WIDGET_PROPERTIES.NO_WIDGET_SELECTED' | translate }}
                        </div>
<!-- 						<pre style="text: 18px"> {{ selectedWidget | json }} </pre> -->
                        <div *ngIf="selectedWidget">
                        	<app-chart-widget-configuration *ngIf="'CHART' == selectedWidget.type" [widget]="selectedWidget"></app-chart-widget-configuration>
                            <app-text-widget-configuration *ngIf="'TEXT' == selectedWidget.type" [widget]="selectedWidget"></app-text-widget-configuration>
                            <app-table-widget-configuration *ngIf="'TABLE' == selectedWidget.type" [widget]="selectedWidget"></app-table-widget-configuration>
                            <app-image-widget-configuration *ngIf="'IMAGE' == selectedWidget.type" [widget]="selectedWidget"></app-image-widget-configuration>
                        </div>
                        
                    </p-accordionTab>
                </p-accordion>
            </div>
        </div>
    </div>

</ng-container>
