<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 + 1 }} {{ 'table.to' | translate }}
              {{ skip + rows.length }} {{ 'table.of' | translate }}
              {{ totalCount }}
            </ng-container>
            {{ countHeaderTranslation | translate }}
          </div>
        </div>
      </div>
      <div class="flex space-x-2">
        <ng-container *ngTemplateOutlet="customActions"></ng-container>
        <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>
        <app-column-selector
          *ngIf="selectableColumns"
          [columns]="columns"
          (selectChange)="resolveColumns()"></app-column-selector>
      </div>
    </div>
  </ng-template>

  <ng-template pTemplate="header">
    <tr>
      <th
        *ngFor="let column of visibleColumns"
        [pSortableColumn]="column.sortable !== false ? column.name : undefined"
        [class]="column.class ?? ''"
        [style.min-width]="
          column.minWidth ? column.minWidth + ' !important' : ''
        "
        [style.width]="column.width ? column.width + ' !important' : ''"
        [style.max-width]="
          column.maxWidth ? column.maxWidth + ' !important' : ''
        ">
        <div class="flex items-center space-x-2">
          <span>{{ column.translationKey | translate }}</span>
          <p-sortIcon
            [field]="column.name"
            *ngIf="column.sortable !== false"></p-sortIcon>
        </div>
      </th>
      <th *ngIf="update || delete.observed || customRowActionsVisible"></th>
    </tr>

    <tr *ngIf="fuzzyFilter">
      <th [attr.colspan]="visibleColumns.length">
        <form
          *ngIf="filterForm"
          [formGroup]="filterForm"
          class="flex gap-2 justify-between items-center">
          <input
            pInputText
            type="text"
            class="w-full box-border"
            formControlName="fuzzy"
            placeholder="{{ 'table.search' | translate }}" />
          <p-button
            class="btn icon-btn"
            icon="pi pi-times"
            (onClick)="filterForm.get('fuzzy')?.setValue(undefined)"
            [disabled]="!filterForm.get('fuzzy')?.value"></p-button>
        </form>
      </th>
      <th *ngIf="update || delete.observed || customRowActionsVisible"></th>
    </tr>

    <tr *ngIf="showFilters">
      <th
        *ngFor="let column of visibleColumns"
        [class]="column.class ?? ''"
        [style.min-width]="
          column.minWidth ? column.minWidth + ' !important' : ''
        "
        [style.width]="column.width ? column.width + ' !important' : ''"
        [style.max-width]="
          column.maxWidth ? column.maxWidth + ' !important' : ''
        ">
        <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" />
            <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 || customRowActionsVisible"></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,
            'row-disabled': rowDisabled(row),
          }"
          [style.min-width]="
            r.column.minWidth ? r.column.minWidth + ' !important' : ''
          "
          [style.width]="r.column.width ? r.column.width + ' !important' : ''"
          [style.max-width]="
            r.column.maxWidth ? r.column.maxWidth + ' !important' : ''
          ">
          <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 max-w-32">
        <ng-container
          *ngTemplateOutlet="
            customRowActions;
            context: { $implicit: row, rowDisabled: rowDisabled(row) }
          "></ng-container>
        <p-button
          *ngIf="update && hasPermissions.update"
          class="icon-btn btn"
          icon="pi pi-pencil"
          tooltipPosition="left"
          pTooltip="{{ 'table.update' | translate }}"
          [disabled]="rowDisabled(row) || 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]="rowDisabled(row) || 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)"
          [disabled]="rowDisabled(row)"></p-button>
        <p-button
          *ngIf="history"
          class="icon-btn btn"
          icon="pi pi-history"
          tooltipPosition="left"
          pTooltip="{{ 'table.history' | translate }}"
          routerLink="history/{{ row.id }}"></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>
