<div class="card m-3" *ngIf="pages">
    <!-- <h3>Lista pagine</h3> -->
    <p-table #dt1 dataKey="id" [value]="pages | filterPages:searchText" [paginator]="true" [rows]="10" [showCurrentPageReport]="true" 
        currentPageReportTemplate="{{ 'PAGES_LIST.CURRENT_PAGE_REPORT_TEMPLATE' | translate }}" [rowsPerPageOptions]="[10,25,50]">
        <ng-template pTemplate="caption">
            <div class="md:px-8 md:mx-8">
            <span class="p-input-icon-left w-12">
                <i class="pi pi-search"></i>
                <input pInputText type="text" class="w-12" [(ngModel)]="searchText" placeholder="{{ 'PAGES_LIST.SEARCH' | translate }}" />
            </span>
            </div>
            <!-- <div class="formgrid grid">
                <div class="field col-12 md:col-6">
                </div>
            </div> -->
        </ng-template>
        <ng-template pTemplate="header">
            <tr>
                <th>{{ 'PAGES_LIST.NAME' | translate }}</th>
                <th>{{ 'PAGES_LIST.SLUG' | translate }}</th>
                <th>{{ 'PAGES_LIST.LANGUAGE' | translate }}</th>
                <th></th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-page>
            <tr>
                <td>{{page.name}}</td>
                <td class="monospaced">{{page.slug}}</td>
                <td>
                    <img [src]="'assets/images/lang/64/' + page.lang + '.png'" class="flag"/>
                </td>
                <td>
                    <div class="flex flex-row justify-content-end">
                        <button mat-icon-button  pTooltip="{{'PAGES_LIST.TOOLTIP_SLUG' | translate }}" tooltipPosition="bottom" class="mr-2" (click)="externalLinkPage(page)">
                            <mat-icon color="primary">open_in_new</mat-icon>
                        </button>

                        <button mat-icon-button pTooltip="{{'PAGES_LIST.TOOLTIP_VIEW' | translate }}" tooltipPosition="bottom"
                                class="p-button-text p-button-rounded p-button-info mr-2" (click)="viewPage(page)">
                            <mat-icon color="primary">preview</mat-icon>
                        </button>

                        <button mat-icon-button pTooltip="{{'PAGES_LIST.TOOLTIP_EDIT' | translate }}" tooltipPosition="bottom" class="mr-2" (click)="editPage(page)">
                            <mat-icon color="primary">edit</mat-icon>
                        </button>

                        <p-divider layout="vertical"></p-divider>
                        <button mat-icon-button pTooltip="{{'PAGES_LIST.TOOLTIP_DELETE' | translate }}" tooltipPosition="bottom" (click)="deletePage(page)">
                            <mat-icon color="warn">delete</mat-icon>
                        </button>
                    </div>
                </td>
    
            </tr>
        </ng-template>
        <!-- <ng-template pTemplate="paginatorleft">
            <p-button type="button" icon="pi pi-plus" styleClass="p-button-text"></p-button>
        </ng-template>
        <ng-template pTemplate="paginatorright">
            <p-button type="button" icon="pi pi-cloud" styleClass="p-button-text"></p-button>
        </ng-template> -->
    </p-table>
</div>