@if (wappTreeTableObject) {
  <div [class.table-container]="wappTreeTableObject.tableContainer">
    @if (!loading && elements) {
      <p-treeTable
        #treeTable [value]="elements"
        class="w-table-styles"
        [columns]="columns"
        [scrollable]="true"
        [tableStyle]="{'min-width': wappTreeTableObject.tableMinWidth!}"
        [loading]="loadingElements"
        [showLoader]="false"
        [paginator]="true"
        [rows]="rowsPerPage"
        [rowHover]="false"
        [totalRecords]="totalRecords"
        [showCurrentPageReport]="true"
        [currentPageReportTemplate]="wappTreeTableObject.currentPageReportTemplate ? wappTreeTableObject.currentPageReportTemplate + ' ' +  rowsPerPage + ' de ' + totalRecords! : 'Showing ' + rowsPerPage + ' of ' + totalRecords!">
        @if (true) {
          <ng-template pTemplate="caption">
            <span class="flex align-items-center table-paginator p-0">
              @if (wappTreeTableObject.hasTotalPagingSelector) {
                <span class="showing-per-page"> {{wappTreeTableObject.currentPageReportTemplate}} </span>
              }
              @if (wappTreeTableObject.hasTotalPagingSelector) {
                <p-inputnumber
                  class="pl-2 showing-per-page" size="small" [(ngModel)]="rowsPerPage" [showButtons]="true" [inputStyle]="{ width: '3rem' }"
                  buttonLayout="horizontal" inputId="horizontal" spinnerMode="horizontal" [step]="1" [min]="1" [max]="totalRecords!"
                  decrementButtonClass="p-button-outlined"
                  incrementButtonClass="p-button-outlined"
                  incrementButtonIcon="pi pi-plus"
                  decrementButtonIcon="pi pi-minus"
                  mode="decimal"
                  (ngModelChange)="updateShowingTableRows()">
                </p-inputnumber>
              }
              <p-iconfield class="p-input-icon-left ml-auto" iconPosition="left" class="ml-auto">
                <p-inputicon>
                  <i class="pi pi-search"></i>
                </p-inputicon>
                <input
                  pInputText
                  type="text"
                  (input)="filterGlobal(treeTable, $event)"
                  [placeholder]="wappTreeTableObject.searchPlaceholder" class="w-full height-input w-input"
                  />
                </p-iconfield>
              </span>
            </ng-template>
          }
          <ng-template pTemplate="header" let-columns>
            <tr>
              @for (col of columns; track $index) {
                <th
                  class="'{{col.field}}-field'"
                  [ttSortableColumn]="col.field"
                  [style]="'width: '+wappTreeTableObject.columnWidths[$index]">
                  <div [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignFlexClass(wappTreeTableObject.columnAlign[$index]) : 'flex justify-content-start'" >
                    <div>
                      {{ col.header }}
                    </div>
                    <div>
                      <p-treeTableSortIcon [field]="col.field"></p-treeTableSortIcon>
                    </div>
                  </div>
                </th>
              }
              <th class="buttons-field">
              </th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
            <tr>
              @for (columnType of wappTreeTableObject.columnTypes!; track $index) {
                @if (columnType == tableColumnTypes.Image) {
                  <td [style]="'width: '+wappTreeTableObject.columnWidths[$index]" [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignClass(wappTreeTableObject.columnAlign[$index]) : 'text-center'">
                    <div [class.flex]="$index === 0" [class.justify-content-between]="$index === 0">
                      <div [class.align-content-center]="$index === 0">
                        @if ($index === 0) {
                          <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                        }
                      </div>
                      <div [class.my-auto]="$index === 0">
                        @if (readProperty(rowData, wappTreeTableObject.columns[$index].field)) {
                          <img
                            [src]="readProperty(rowData, wappTreeTableObject.columns[$index].field)"
                            class="element-image-width"/>
                        }
                      </div>
                    </div>
                  </td>
                }
                @if (columnType == tableColumnTypes.Text) {
                  <td  [style]="'width: '+wappTreeTableObject.columnWidths[$index]"
                    [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignClass(wappTreeTableObject.columnAlign[$index]) : 'text-left'">
                    <div [class.flex]="$index === 0" [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignFlexClass(wappTreeTableObject.columnAlign[$index]) : 'justify-content-start'">
                      <div [class.align-content-center]="$index === 0">
                        @if ($index === 0) {
                          <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                        }
                      </div>
                      <div class="w-table-text-word-break" [class.my-auto]="$index === 0">
                        {{ readProperty(rowData, wappTreeTableObject.columns[$index].field) }}
                      </div>
                    </div>
                  </td>
                }
                @if (columnType == tableColumnTypes.Number) {
                  <td  [style]="'width: '+wappTreeTableObject.columnWidths[$index]"
                    [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignClass(wappTreeTableObject.columnAlign[$index]) : 'text-right'">
                    <div [class.flex]="$index === 0" [class.justify-content-between]="$index === 0">
                      <div [class.align-content-center]="$index === 0">
                        @if ($index === 0) {
                          <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                        }
                      </div>
                      <div [class.my-auto]="$index === 0">
                        {{ readProperty(rowData, wappTreeTableObject.columns[$index].field) }}
                      </div>
                    </div>
                  </td>
                }
                @if (columnType == tableColumnTypes.Percentage) {
                  <td  [style]="'width: '+wappTreeTableObject.columnWidths[$index]"
                    [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignClass(wappTreeTableObject.columnAlign[$index]) : 'text-right'">
                    <div [class.flex]="$index === 0" [class.justify-content-between]="$index === 0">
                      <div [class.align-content-center]="$index === 0">
                        @if ($index === 0) {
                          <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                        }
                      </div>
                      <div [class.my-auto]="$index === 0">
                        {{ readProperty(rowData, wappTreeTableObject.columns[$index].field) | wappPercentage }}
                      </div>
                    </div>
                  </td>
                }
                @if (columnType == tableColumnTypes.Currency) {
                  <td [style]="'width: '+wappTreeTableObject.columnWidths[$index]"
                    [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignClass(wappTreeTableObject.columnAlign[$index]) : 'text-right'">
                    <div [class.flex]="$index === 0" [class.justify-content-between]="$index === 0">
                      <div [class.align-content-center]="$index === 0">
                        @if ($index === 0) {
                          <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                        }
                      </div>
                      <div [class.my-auto]="$index === 0">
                        {{ readProperty(rowData, wappTreeTableObject.columns[$index].field) | wappCurrency }}
                      </div>
                    </div>
                  </td>
                }
                @if (columnType == tableColumnTypes.Badge) {
                  <td [style]="'width: '+wappTreeTableObject.columnWidths[$index]"
                    [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignClass(wappTreeTableObject.columnAlign[$index]) : 'text-center'">
                    <div [class.flex]="$index === 0" [class.justify-content-between]="$index === 0">
                      <div [class.align-content-center]="$index === 0">
                        @if ($index === 0) {
                          <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                        }
                      </div>
                      <div [class.my-auto]="$index === 0">
                        <w-badge [label]="readProperty(rowData, wappTreeTableObject.columns[$index].field)" [color]="'info'"></w-badge>
                      </div>
                    </div>
                  </td>
                }
                @if (columnType == tableColumnTypes.Boolean) {
                  <td
                    [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignClass(wappTreeTableObject.columnAlign[$index]) : 'text-center'">
                    <div [class.flex]="$index === 0" [class.justify-content-between]="$index === 0">
                      <div [class.align-content-center]="$index === 0">
                        @if ($index === 0) {
                          <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                        }
                      </div>
                      <div [class.my-auto]="$index === 0">
                        <i class="pi" [ngClass]="getBooleanColumnClass($index, readProperty(rowData, wappTreeTableObject.columns[$index].field))"></i>
                      </div>
                    </div>
                  </td>
                }
                @if (columnType == tableColumnTypes.Date) {
                  <td
                    [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignClass(wappTreeTableObject.columnAlign[$index]) : 'text-left'">
                    <div [class.flex]="$index === 0" [class.justify-content-between]="$index === 0">
                      <div [class.align-content-center]="$index === 0">
                        @if ($index === 0) {
                          <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                        }
                      </div>
                      <div [class.my-auto]="$index === 0">
                        {{ dateConversionService.formatUTCDate(readProperty(rowData, wappTreeTableObject.columns[$index].field)) | wappDate }}
                      </div>
                    </div>
                  </td>
                }
                @if (columnType == tableColumnTypes.ShortDate) {
                  <td
                    [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignClass(wappTreeTableObject.columnAlign[$index]) : 'text-left'">
                    <div [class.flex]="$index === 0" [class.justify-content-between]="$index === 0">
                      <div [class.align-content-center]="$index === 0">
                        @if ($index === 0) {
                          <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                        }
                      </div>
                      <div [class.my-auto]="$index === 0">
                        {{ dateConversionService.formatUTCDate(readProperty(rowData, wappTreeTableObject.columns[$index].field)) | wappDate : wappDateFormat.d }}
                      </div>
                    </div>
                  </td>
                }
                @if (columnType == tableColumnTypes.LongDate) {
                  <td
                    [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignClass(wappTreeTableObject.columnAlign[$index]) : 'text-left'">
                    <div [class.flex]="$index === 0" [class.justify-content-between]="$index === 0">
                      <div [class.align-content-center]="$index === 0">
                        @if ($index === 0) {
                          <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                        }
                      </div>
                      <div [class.my-auto]="$index === 0">
                        {{ dateConversionService.formatUTCDate(readProperty(rowData, wappTreeTableObject.columns[$index].field)) | wappDate : wappDateFormat.D }}
                      </div>
                    </div>
                  </td>
                }
                @if (columnType == tableColumnTypes.GeneralDateTimeShortTime) {
                  <td
                    [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignClass(wappTreeTableObject.columnAlign[$index]) : 'text-left'">
                    <div [class.flex]="$index === 0" [class.justify-content-between]="$index === 0">
                      <div [class.align-content-center]="$index === 0">
                        @if ($index === 0) {
                          <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                        }
                      </div>
                      <div [class.my-auto]="$index === 0">
                        {{ dateConversionService.formatUTCDate(readProperty(rowData, wappTreeTableObject.columns[$index].field)) | wappDate : wappDateFormat.g }}
                      </div>
                    </div>
                  </td>
                }
                @if (columnType == tableColumnTypes.GeneralDateTimeLongTime) {
                  <td
                    [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignClass(wappTreeTableObject.columnAlign[$index]) : 'text-left'">
                    <div [class.flex]="$index === 0" [class.justify-content-between]="$index === 0">
                      <div [class.align-content-center]="$index === 0">
                        @if ($index === 0) {
                          <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                        }
                      </div>
                      <div [class.my-auto]="$index === 0">
                        {{ dateConversionService.formatUTCDate(readProperty(rowData, wappTreeTableObject.columns[$index].field)) | wappDate : wappDateFormat.G }}
                      </div>
                    </div>
                  </td>
                }
              }
              <td class="buttons-field">
                <div class="w-table-buttons flex justify-content-end">
                  @for (button of wappTreeTableObject.actionButtons; track button) {
                    <span>
                      <w-button [icon]="button.icon" (onClick)="actionButtonClicked(button.id, rowData)"  [tooltip]="button.tooltip!" [tooltipPosition]="button.tooltipPosition!" type="table" [buttonClass]="'w-table-button-add '+ button.styleClass!"></w-button>
                    </span>
                  }
                  @if (wappTreeTableObject.hasDeleteButton) {
                    <w-button icon="pi-trash" (onClick)="confirmDeleteSelected($event, rowData)" [tooltip]="wappTreeTableObject.deleteButtonTooltip!" tooltipPosition="bottom" type="table" buttonClass="w-table-button-delete"></w-button>
                  }
                </div>
              </td>
            </tr>
          </ng-template>
          <ng-template pTemplate="emptymessage" let-columns>
            <tr>
              <td [attr.colspan]="columns.length">
                {{wappTreeTableObject.noRecordsLabel}}
              </td>
            </tr>
          </ng-template>
        </p-treeTable>
      } @else {
        <p-treeTable
          #treeTable [value]="tableSkeletons"
          class="w-table-styles"
          [columns]="columns"
          [scrollable]="true"
          [tableStyle]="{'min-width':'50rem'}"
          [loading]="loadingElements"
          [showLoader]="false"
          [paginator]="true"
          [rows]="rowsPerPage"
          [rowHover]="false"
          [totalRecords]="totalRecords"
          [showCurrentPageReport]="true"
          [currentPageReportTemplate]="wappTreeTableObject.currentPageReportTemplate ? wappTreeTableObject.currentPageReportTemplate + ' ' +  rowsPerPage + ' de ' + totalRecords! : 'Showing ' + rowsPerPage + ' of ' + totalRecords!"
          stripedRows>
          @if (true) {
            <ng-template pTemplate="caption">
              <span class="flex align-items-center table-paginator p-0">
                @if (wappTreeTableObject.hasTotalPagingSelector) {
                  <span class="showing-per-page"> {{wappTreeTableObject.currentPageReportTemplate}} </span>
                }
                @if (wappTreeTableObject.hasTotalPagingSelector) {
                  <p-inputnumber
                    class="pl-2 showing-per-page" size="small" [(ngModel)]="rowsPerPage" [showButtons]="true" [inputStyle]="{ width: '3rem' }"
                    buttonLayout="horizontal" inputId="horizontal" spinnerMode="horizontal" [step]="1" [min]="1" [max]="totalRecords!"
                    decrementButtonClass="p-button-outlined"
                    incrementButtonClass="p-button-outlined"
                    incrementButtonIcon="pi pi-plus"
                    decrementButtonIcon="pi pi-minus"
                    mode="decimal"
                    (ngModelChange)="updateShowingTableRows()">
                  </p-inputnumber>
                }
                <p-iconfield class="p-input-icon-left ml-auto" iconPosition="left" class="ml-auto">
                  <p-inputicon>
                    <i class="pi pi-search"></i>
                  </p-inputicon>
                  <input
                    pInputText
                    type="text"
                    (input)="filterGlobal(treeTable, $event)"
                    [placeholder]="wappTreeTableObject.searchPlaceholder" class="w-full height-input w-input"
                    />
                  </p-iconfield>
                </span>
              </ng-template>
            }
            <ng-template pTemplate="header" let-columns>
              <tr>
                @for (col of columns; track $index) {
                  <th
                    class="{{col.field}}-field'"
                    [ttSortableColumn]="col.field">
                    <div [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignFlexClass(wappTreeTableObject.columnAlign[$index]) : 'flex justify-content-start'">
                      <div>
                        {{ col.header }}
                      </div>
                      <div>
                        <p-treeTableSortIcon [field]="col.field"></p-treeTableSortIcon>
                      </div>
                    </div>
                  </th>
                }
                <th class="buttons-field">
                </th>
              </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
              <tr>
                @for (col of columns; track $index) {
                  <td [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignClass(wappTreeTableObject.columnAlign[$index]) : 'text-left'">
                    <p-skeleton></p-skeleton>
                  </td>
                }
                <td class="buttons-field">
                  <div class="w-table-buttons flex justify-content-end">
                    @for (button of wappTreeTableObject.actionButtons; track button) {
                      <span>
                        <w-button [icon]="button.icon" (onClick)="actionButtonClicked(button.id, rowData)" [tooltip]="button.tooltip!" [tooltipPosition]="button.tooltipPosition!" [buttonClass]="'w-table-button-add ' + button.styleClass!"></w-button>
                      </span>
                    }
                    @if (wappTreeTableObject.hasDeleteButton) {
                      <w-button icon="pi-trash" (onClick)="confirmDeleteSelected($event, rowData)" [tooltip]="'Tooltip' " tooltipPosition="bottom"type="table" buttonClass="w-table-button-delete"></w-button>
                    }
                  </div>
                </td>
              </tr>
            </ng-template>
            <ng-template pTemplate="emptymessage" let-columns>
              <tr>
                <td [attr.colspan]="columns.length">
                  {{wappTreeTableObject.noRecordsLabel}}
                </td>
              </tr>
            </ng-template>
          </p-treeTable>
        }
      </div>
    }

    <p-confirmpopup></p-confirmpopup>