<p-table *ngIf="data && !loadingData"
         [columns]="columns"
         [value]="data.result"
         [selectionMode]="widget?.rowSelectable ? 'single' : undefined"
         (onRowSelect)="onRowSelect($event)"
         [(selection)]="selectedRow"
         [paginator]="true"
         [rows]="5"
         [showCurrentPageReport]="true"
         responsiveLayout="scroll"
         currentPageReportTemplate="{{ 'TABLE_WIDGET.PAGINATION_MESSAGE' | translate }}"
         [rowsPerPageOptions]="[5,10,25,50]">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" [pSortableColumn]="col.name" >
                {{ col.description ? col.description.split("|")[0] : "--" }}
                <p-sortIcon [field]="col.name" ariaLabel="Activate to sort" 
                ariaLabelDesc="Activate to sort in descending order" a
                riaLabelAsc="Activate to sort in ascending order"></p-sortIcon>
  
            </th>
            <th *ngIf="widget?.editable && !loadingData" class="text-right">
                <button
                        pButton
                        pRipple
                        type="button"
                        pTooltip="{{'TABLE_WIDGET.TOOLTIP_CREATE' | translate }}"
                        tooltipPosition="bottom"
                        icon="pi pi-plus"
                        (click)="create()"
                        class="p-button-rounded p-button-text">
                </button>
            </th>
        </tr>
    </ng-template>

    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr [pSelectableRow]="rowData">
            <td *ngFor="let col of columns">
                {{formatCell(col, rowData[col.name])}}
            </td>
            <td *ngIf="widget?.editable && !loadingData" class="text-right">
                <button
                        pButton
                        pRipple
                        icon="pi pi-pencil"
                        pTooltip="{{'TABLE_WIDGET.TOOLTIP_EDIT' | translate }}"
                        tooltipPosition="bottom"
                        (click)="edit(rowData)"
                        class="p-button-text p-button-rounded p-button-success mr-2">
                </button>
            </td>
        </tr>
    </ng-template>
</p-table>
<div class= "div-table" *ngIf="!loadingData" >
    <div class="div-table-row" >
        <ng-container  *ngFor="let parameter of widget?.datasourceConfiguration?.parameters">
            <div class="div-table-cell" style="padding-right: 10px;" *ngIf="parameter.type === 'any_date_choosen_by_user'">
                {{parameter.name | translate}}
            </div>
            <div class="div-table-cell" style="padding-right: 10px;" *ngIf="parameter.type === 'any_date_choosen_by_user'">
                <p-calendar
                    [showTime]="true"
                    placeholder="{{ 'DATASOURCE_CONFIGURATION.SELECT_A_DATE_VALUE' | translate }}"
                    (ngModelChange)="parameter!.value = $event.toJSON()"
                    [ngModel]="parameter?.value | toDate"
                ></p-calendar>
            </div>
        </ng-container>
        <div class="div-table-cell" *ngIf="updatable">
            <button mat-menu-item iconPos="left"  pTooltip="{{ 'Update' | translate }}" 
                (click)="updateData()"><mat-icon>update</mat-icon>
            </button>
        </div>
    </div>
</div>

<div *ngIf="loadingData" style="max-width: 180px; margin: 0 auto;">
     <p-table [value]="[1, 2, 3, 4]">
        <ng-template pTemplate="body" let-product>
            <tr>
                <td><p-skeleton></p-skeleton></td>
                <td><p-skeleton></p-skeleton></td>
                <td><p-skeleton></p-skeleton></td>
                <td><p-skeleton></p-skeleton></td>
            </tr>
        </ng-template>
    </p-table>
</div>

<div *ngIf="!loadingData && !data" class="p-grid">
    <div class="col-12 text-center"><i class="pi pi-exclamation-triangle"  style="font-size: 2rem"></i></div>
    <div class="col-12 text-center">{{'TABLE_WIDGET.NO_DATA' | translate}}</div>
</div>