<div (window:resize)="onResize()" [ngClass]="{'datagrid-full-screen': yesFullScreen && fullscreenMax}">
    <div #header class="datatable">
        <div class="datatable-header">
            <ng-container *ngFor="let cols of columns;let i = index">
                <ng-container *ngIf="cols.datatype=='string'">
                    <div class="datatable-col" tabindex="1" [ngClass]="{'header' : i == 0}" [style.width.%]="cols.width">
                        <ng-container *ngIf="cols.headerTemplate">
                            <ng-template [ngTemplateOutlet]="cols.headerTemplate" [ngTemplateOutletContext]="{column:cols ,index: i}"></ng-template>
                        </ng-container>
                        <ng-container *ngIf="!cols.headerTemplate">
                            {{cols.text}}
                        </ng-container>
                    </div>
                </ng-container>
                <ng-container *ngIf="cols.datatype=='number'">
                    <ng-container *ngIf="cols.headerTemplate">
                        <ng-template [ngTemplateOutlet]="cols.headerTemplate" [ngTemplateOutletContext]="{column:cols ,index: i}"></ng-template>
                    </ng-container>
                    <ng-container *ngIf="!cols.headerTemplate">
                        <span class="float-right" style="display:flex">
                            <div class="datatable-col" tabindex="1" [style.width.%]="cols.width" [ngClass]="{'header' : i == 0}"> {{cols.text}}</div>
                            <span *ngIf="yesFullScreen" style="padding-right: 4px;">
                                <amexio-c-icon class="cursor-style" *ngIf="((yesFullScreen && fullscreenMax))" [key]="'full-screen-min-icon'" (onClick)="minScreenChange($event)"></amexio-c-icon>
                                <amexio-c-icon class="cursor-style" *ngIf="((yesFullScreen && !fullscreenMax))" [key]="'full-screen-max-icon'" (onClick)="maxScreenChange($event)"></amexio-c-icon>
                            </span>
                        </span>
                    </ng-container>
                </ng-container>
            </ng-container>
        </div>
    </div>
<!-- data table -->
    <div class="datatable-height" [style.height.px]="height">
        <div class="datatable">
            <div style="height: 300px;" *ngIf="mask">
                <div class="spinner"></div>
            </div>
            <ng-container *ngIf="!mask">
                <div class="datatable-row" (click)="toogle(row,i)" *ngFor="let row of viewRows;let i=index" (click)="setSelectedRow(row, $event)">
                    <ng-container *ngFor="let cols of columns;let colIndex = index">
                        <ng-container *ngIf="cols.datatype=='string' && !cols?.bodyTemplate">
                            <div #ref id="{{row.refId}}{{i+1}}{{colIndex+1}}" [attr.tabindex]="(((i+1== 1) && (colIndex + 1 == 1))? 1: -1)" (keyup.enter)="toogle(row,i)"
                                (keyup.enter)="setSelectedRow(row, $event)" class="datatable-col" (keyup.arrowright)="arrowRight(ref)"
                                (keyup.arrowleft)="arrowLeft(ref)" (keyup.arrowup)="arrowUp(ref)" (keyup.arrowdown)="arrowDown(ref)"
                                (keyup.end)="keyEnd(ref)" (keyup.home)="keyHome(ref)" (keyup.control.end)="keyControlEnd(ref)"
                                (keyup.control.home)="keyControlHome(ref)" [attr.data-label]="cols.text" [style.width.%]="cols.width">
                                <ng-container *ngIf="colIndex == 0">
                                    <span [style.padding-left.px]="(!row.level || row.level <= 1? 10 : (10+(10*row.level)) )">
                                        <ng-container *ngIf="!row.expanded && row[childarraykey] && row[this.childarraykey].length > 0">
                                            <amexio-c-icon class="iconPaddingStyle" key="tree_collapse"></amexio-c-icon>
                                        </ng-container>
                                        <ng-container *ngIf="row.expanded && row[childarraykey] && row[this.childarraykey].length > 0">
                                            <amexio-c-icon class="iconPaddingStyle" key="tree_expand"></amexio-c-icon>
                                        </ng-container>
                                        <ng-container *ngIf="row[cols.dataindex]!= null && row[cols.dataindex]!= '' ;else elseBlock">
                                            {{row[cols.dataindex]}}
                                        </ng-container>
                                        <ng-template #elseBlock>
                                            &nbsp;
                                        </ng-template>
                                    </span>
                                </ng-container>

                                <ng-container *ngIf="colIndex > 0">
                                    <ng-container *ngIf="row[cols.dataindex]!= null && row[cols.dataindex]!= '' ;else elseBlock">
                                        {{row[cols.dataindex]}}
                                    </ng-container>
                                    <ng-template #elseBlock>
                                        &nbsp;
                                    </ng-template>
                                </ng-container>
                            </div>
                        </ng-container>
                        <ng-container *ngIf="cols.datatype=='number' && !cols?.bodyTemplate">
                            <div #ref class="datatable-col" id="{{row.refId}}{{i+1}}{{colIndex+1}}" (keyup.end)="keyEnd(ref)" (keyup.home)="keyHome(ref)"
                                (keyup.control.end)="keyControlEnd(ref)" (keyup.control.home)="keyControlHome(ref)" (keyup.arrowright)="arrowRight(ref)"
                                (keyup.arrowleft)="arrowLeft(ref)" (keyup.arrowup)="arrowUp(ref)" (keyup.arrowdown)="arrowDown(ref)"
                                [attr.tabindex]="(((i+1== 1) && (colIndex + 1 == 1))? 1: -1)" (keyup.enter)="toogle(row,i)" (keyup.enter)="setSelectedRow(row, $event)"
                                [attr.data-label]="cols.text" [style.width.%]="cols.width">
                                <ng-container *ngIf="colIndex == 0">
                                    <span [style.padding-left.px]="(!row.level || row.level <= 1? 10 : (10+(10*row.level)) )">
                                        <ng-container *ngIf="!row.expanded && row[childarraykey] && row[this.childarraykey].length > 0">
                                            <amexio-c-icon class="iconPaddingStyle" key="tree_collapse"></amexio-c-icon>
                                        </ng-container>
                                        <ng-container *ngIf="row.expanded && row[childarraykey] && row[this.childarraykey].length > 0">
                                            <amexio-c-icon class="iconPaddingStyle" key="tree_expand"></amexio-c-icon>
                                        </ng-container>
                                        <span class="float-right">
                                            <ng-container *ngIf="row[cols.dataindex]!= null;else elseBlock">
                                                {{row[cols.dataindex]}}
                                            </ng-container>
                                            <ng-template #elseBlock>
                                                &nbsp;
                                            </ng-template>
                                        </span>
                                    </span>
                                </ng-container>

                                <ng-container *ngIf="colIndex > 0">
                                    <span class="float-right">
                                        <ng-container *ngIf="row[cols.dataindex]!= null;else elseBlock">
                                            {{row[cols.dataindex]}}
                                        </ng-container>
                                        <ng-template #elseBlock>
                                            &nbsp;
                                        </ng-template>
                                    </span>
                                </ng-container>
                            </div>

                        </ng-container>

                        <ng-container *ngIf="cols.bodyTemplate">

                            <div #ref class="datatable-col" id="{{row.refId}}{{i+1}}{{colIndex+1}}" (keyup.end)="keyEnd(ref)" (keyup.home)="keyHome(ref)"
                                (keyup.control.end)="keyControlEnd(ref)" (keyup.control.home)="keyControlHome(ref)" (keyup.arrowright)="arrowRight(ref)"
                                (keyup.arrowleft)="arrowLeft(ref)" (keyup.arrowup)="arrowUp(ref)" (keyup.arrowdown)="arrowDown(ref)"
                                [attr.tabindex]="(((i+1== 1) && (colIndex + 1 == 1))? 1: -1)" (keyup.enter)="toogle(row,i)" (keyup.enter)="setSelectedRow(row, $event)"
                                [attr.data-label]="cols.text" [style.width.%]="cols.width">
                                <ng-container *ngIf="colIndex == 0">
                                    <span [style.padding-left.px]="(!row.level || row.level <= 1? 10 : (10+(10*row.level)) )">
                                        <ng-container *ngIf="!row.expanded && row[childarraykey] && row[this.childarraykey].length > 0">
                                            <amexio-c-icon class="iconPaddingStyle" key="tree_collapse"></amexio-c-icon>
                                        </ng-container>
                                        <ng-container *ngIf="row.expanded && row[childarraykey] && row[this.childarraykey].length > 0">
                                            <amexio-c-icon class="iconPaddingStyle" key="tree_expand"></amexio-c-icon>
                                        </ng-container>
                                        <ng-template [ngTemplateOutlet]="cols.bodyTemplate" [ngTemplateOutletContext]="{ $implicit: { text : row[cols.dataindex] }, row: row }"></ng-template>
                                    </span>
                                </ng-container>

                                <ng-container *ngIf="colIndex > 0">
                                    <ng-template [ngTemplateOutlet]="cols.bodyTemplate" [ngTemplateOutletContext]="{ $implicit: { text : row[cols.dataindex] }, row: row }"></ng-template>
                                </ng-container>

                            </div>
                        </ng-container>

                    </ng-container>

                </div>
            </ng-container>

        </div>
    </div>
</div>