<p-table
        [dataKey]="dataKey"
        [value]="rows"
        [paginator]="true"
        [rowsPerPageOptions]="rowsPerPageOptions"
        [rows]="take"
        (rowsChange)="takeChange.emit($event)"
        [first]="skip"
        (firstChange)="skipChange.emit($event)"
        [totalRecords]="totalCount"
        [lazy]="true"
        (onLazyLoad)="loadData($event)"
        [loading]="loading"
        [resizableColumns]="false"
        [reorderableColumns]="false"
        [responsiveLayout]="responsiveLayout"
        columnResizeMode="expand"
        [breakpoint]="'900px'"
        [rowHover]="true">
    <ng-template pTemplate="caption">
        <div class="flex justify-between items-center">
            <div>
                <div *ngIf="countHeaderTranslation" class="table-caption-table-info">
                    <div class="table-caption-text">
                        <ng-container *ngIf="!loading"
                        >{{ skip > 0 ? skip : 1 }} {{ 'table.to' | translate }}
                            {{ skip + rows.length }} {{ 'table.of' | translate }}
                            {{ totalCount }}
                        </ng-container>
                        {{ countHeaderTranslation | translate }}
                    </div>
                </div>
            </div>
            <div class="flex space-x-2">
                <p-button
                        *ngIf="create && hasPermissions.create"
                        class="icon-btn btn"
                        icon="pi pi-plus"
                        tooltipPosition="left"
                        pTooltip="{{ 'table.create' | translate }}"
                        routerLink="{{ updateBaseUrl }}create"></p-button>
                <p-button
                        class="icon-btn btn"
                        [styleClass]="showDeleted ? 'highlight2' : ''"
                        icon="pi pi-trash"
                        tooltipPosition="left"
                        pTooltip="{{
            (showDeleted ? 'table.hide_deleted' : 'table.show_deleted')
              | translate
          }}"
                        (click)="toggleShowDeleted()"></p-button>
                <p-button
                        class="icon-btn btn"
                        icon="pi pi-sort-alt-slash"
                        tooltipPosition="left"
                        pTooltip="{{ 'table.reset_sort' | translate }}"
                        (click)="resetSort()"></p-button>
                <p-button
                        class="icon-btn btn"
                        icon="pi pi-filter-slash"
                        tooltipPosition="left"
                        pTooltip="{{ 'table.reset_filters' | translate }}"
                        (click)="resetFilters()"></p-button>
            </div>
        </div>
    </ng-template>

    <ng-template pTemplate="header">
        <tr>
            <th
                    *ngFor="let column of columns"
                    [pSortableColumn]="column.name"
                    [class]="column.class ?? ''">
                <div class="flex items-center space-x-2">
                    <span>{{ column.label | translate }}</span>
                    <p-sortIcon *ngIf="column.sortable !== false" [field]="column.name"></p-sortIcon>
                </div>
            </th>
            <th *ngIf="update || delete.observed"></th>
        </tr>

        <tr *ngIf="showFilters">
            <th *ngFor="let column of columns" [class]="column.class ?? ''">
                <form *ngIf="filterForm && column.filterable" [formGroup]="filterForm">
                    <ng-container [ngSwitch]="column.type">
                        <input
                                *ngSwitchCase="'date'"
                                pInputText
                                type="text"
                                [formControlName]="column.name"
                                class="w-full box-border"
                                placeholder="dd.MM.yyyy HH:mm:ss"/>
                        <p-triStateCheckbox
                                *ngSwitchCase="'bool'"
                                [formControlName]="column.name"
                                class="w-full box-border"></p-triStateCheckbox>
                        <input
                                *ngSwitchDefault
                                pInputText
                                [formControlName]="column.name"
                                class="w-full box-border"/>
                    </ng-container>
                </form>
            </th>
            <th *ngIf="update || delete.observed"></th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-row let-i="rowIndex">
        <tr *ngIf="hasPermissions.read && resolvedColumns.length > 0">
            <ng-container *ngFor="let r of resolvedColumns[i - take * (skip / take)]">
                <td
                        [ngClass]="{ deleted: row?.deleted }"
                        [class]="r.column.class ?? ''">
                    <ng-container [ngSwitch]="r.column.type">
            <span *ngSwitchCase="'date'">{{
                    r.value | customDate: 'dd.MM.yyyy HH:mm:ss'
                }}</span>
                        <span *ngSwitchCase="'bool'">
              <ng-container [ngSwitch]="r.value">
                <span *ngSwitchCase="true">
                  <span class="pi pi-check-circle info"></span>
                </span>
                <span *ngSwitchCase="false">
                  <span class="pi pi-times-circle error"></span>
                </span>
              </ng-container>
            </span>
                        <span *ngSwitchCase="'password'">
              {{ r.value | protect }}
                            <p-button
                                    class="btn icon-btn"
                                    icon="pi pi-copy"
                                    (onClick)="copy(r.value)"></p-button>
            </span>
                        <span *ngSwitchDefault>{{ r.value }}</span>
                    </ng-container>
                </td>
            </ng-container>
            <td class="flex overflow-hidden">
                <ng-container
                        *ngTemplateOutlet="
            customActions;
            context: { $implicit: row }
          "></ng-container>
                <p-button
                        *ngIf="update && hasPermissions.update"
                        class="icon-btn btn"
                        icon="pi pi-pencil"
                        tooltipPosition="left"
                        pTooltip="{{ 'table.update' | translate }}"
                        [disabled]="row?.deleted"
                        routerLink="{{ updateBaseUrl }}edit/{{ row.id }}"></p-button>
                <p-button
                        *ngIf="delete.observed && hasPermissions.delete"
                        class="icon-btn btn danger-icon-btn"
                        icon="pi pi-trash"
                        tooltipPosition="left"
                        pTooltip="{{ 'table.delete' | translate }}"
                        [disabled]="row?.deleted"
                        (click)="delete.emit(row)"></p-button>
                <p-button
                        *ngIf="restore.observed && row?.deleted && hasPermissions.restore"
                        class="icon-btn btn"
                        icon="pi pi-undo"
                        tooltipPosition="left"
                        pTooltip="{{ 'table.restore' | translate }}"
                        (click)="restore.emit(row)"></p-button>
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="emptymessage">
        <tr></tr>
        <tr>
            <td [attr.colspan]="columns.length + 1">
                {{ 'table.no_entries_found' | translate }}
            </td>
        </tr>
        <tr></tr>
    </ng-template>
</p-table>
