@if (configTable.tTitleBar?.title) {
  <frg-title-bar
    [title]="configTable.tTitleBar?.title ?? ''"
    [styleType]="styleType"
  ></frg-title-bar>
}
@if (configTable.tBody.data && configTable.tBody.data.length > 0) {
  <div class="frg-table-responsive">
    <table
      class="frg-table"
      id="table1"
      [ngClass]="{
        'frg-table__primary': styleType === 'primary',
        'frg-table__secondary': styleType === 'secondary',
        'frg-table__tertiary': styleType === 'tertiary',
        'frg-table__dark': styleType === 'dark',
        'frg-table__light': styleType === 'light',
        'frg-table--row-small': rowSize === 'small',
        'frg-table--row-medium': rowSize === 'medium',
        'frg-table--row-large': rowSize === 'large'
      }"
    >
      @if (configTable.tCaption && configTable.tCaption.srOnly) {
        <caption class="visually-hidden">
          {{ configTable.tCaption.srOnly }}
        </caption>
      }
      @if (configTable.tHead.columns.length > 0) {
        <thead #tableHead>
          <tr>
            <!--Sort-->
            @if (configTable.tHead) {
              @for (hColumn of configTable.tHead.columns; track $index) {
                @if (hColumn.fieldOrder) {
                  <th
                    scope="col"
                    [tabindex]="hColumn.fieldOrder ? 0 : null"
                    [attr.aria-sort]="
                      !(hColumn.fieldOrder === configTable.tPagination.order)
                        ? null
                        : configTable.tPagination.direction ===
                            EnumDirectionSortTable.asc
                          ? 'ascending'
                          : 'descending'
                    "
                    [ngClass]="{
                      'frg-sorting': hColumn.fieldOrder,
                      'frg-sorting-asc':
                        configTable.tPagination.direction ===
                          EnumDirectionSortTable.asc &&
                        hColumn.fieldOrder === configTable.tPagination.order,
                      'frg-sorting-desc':
                        configTable.tPagination.direction ===
                          EnumDirectionSortTable.desc &&
                        hColumn.fieldOrder === configTable.tPagination.order
                    }"
                    (click)="
                      hColumn.fieldOrder ? orderBy(hColumn.fieldOrder) : null
                    "
                    (keydown.enter)="
                      hColumn.fieldOrder ? orderBy(hColumn.fieldOrder) : null
                    "
                  >
                    <span>
                      {{ hColumn.fieldLabel }}
                    </span>
                  </th>
                } @else {
                  <th scope="col">
                    <span>
                      {{ hColumn.fieldLabel }}
                    </span>
                  </th>
                }
              }
            }
            <!--End Sort-->
            @if (configTable.tHead.action) {
              <th
                scope="col"
                [ngClass]="configTable.tHead.action.customClass ?? ''"
              >
                {{ configTable.tHead.action.label }}
              </th>
            }
          </tr>
        </thead>
      }
      <tbody>
        @for (item of configTable.tBody.data; let i = $index; track $index) {
          <tr
            [attr.id]="i === 0 ? idFirstTr : null"
            [ngClass]="
              configTable.tBody.rowClick?.behaviourAction?.clickEvent
                ? 'cursor-pointer'
                : ''
            "
            [routerLink]="
              configTable.tBody.rowClick?.disabled &&
              configTable.tBody.rowClick?.disabled(item)
                ? null
                : configTable.tBody.rowClick?.behaviourAction?.link
                  ? [
                      configTable.tBody.rowClick?.behaviourAction?.link
                        ? configTable.tBody.rowClick?.behaviourAction?.link
                        : './',
                      configTable.tBody.rowClick?.behaviourAction
                        ?.customParamsLink ||
                        (item | fieldArrayPosition: configTable.tBody.uniqueField)
                    ]
                  : null
            "
            (click)="handleRowClick($event, item)"
            (keyup.enter)="handleRowClick($event, item)"
            (keydown)="handleRowClick($event, item)"
          >
            @for (column of configTable.tBody.columns; let i = $index; track $index) {
              <td>
                <div [ngClass]="column.customClass">
                  <ng-container
                    [ngTemplateOutlet]="
                      (column.cells | typeOfArray) ? cellForTpl : cellTpl
                    "
                    [ngTemplateOutletContext]="{
                      cells: column.cells,
                      item: item
                    }"
                  ></ng-container>
                </div>
              </td>
            }
            @if (configTable.tBody.action ?? false) {
              <td
                class="table-action"
                [ngClass]="configTable.tBody.action?.customClasses ?? ''"
              >
                @for (act of configTable.tBody.action?.buttons ?? []; track $index) {
                  @if (act.visible && act.visible(item) ? true : null) {
                    <frg-button
                      [ariaLabel]="act.ariaLabel || 'Azione'"
                      [text]="''"
                      [iconClass]="act.iconClass ? act.iconClass(item) : ''"
                      [styleType]="'icon'"
                      [size]="'small'"
                      frgTooltip
                      [tooltipConfig]="{
                        apply:
                          act.tooltip &&
                          act.tooltip.apply &&
                          act.visible &&
                          act.visible(item)
                            ? act.tooltip.apply
                            : true,
                        text:
                          act.tooltip && act.tooltip.text
                            ? act.tooltip.text(item)
                            : '',
                        textContent:
                          act.tooltip && act.tooltip.textContent
                            ? act.tooltip.textContent(item)
                            : '',
                        position:
                          act.tooltip && act.tooltip.position
                            ? act.tooltip.position
                            : 'top',
                        gap: act.tooltip && act.tooltip.gap ? act.tooltip.gap : 0
                      }"
                      [disabled]="act.disabled ? act.disabled(item) : null"
                      [buttonRouterLink]="
                        act.disabled && act.disabled(item)
                          ? null
                          : act.behaviourAction.link
                            ? [
                                act.behaviourAction.link
                                  ? act.behaviourAction.link
                                  : './',
                                act.behaviourAction.customParamsLink ||
                                  (item
                                    | fieldArrayPosition
                                      : configTable.tBody.uniqueField)
                              ]
                            : null
                      "
                      (clickEvent)="
                        act.behaviourAction.clickEvent
                          ? act.behaviourAction.clickEvent(item)
                          : null
                      "
                      (click)="$event.stopPropagation()"
                      (keydown)="$event.stopPropagation()"
                      (keyup.enter)="$event.stopPropagation()"
                    >
                    </frg-button>
                  }
                }
              </td>
            }
          </tr>
        }
      </tbody>
    </table>
  </div>

  @if (configTable.tPagination) {
    <frg-small-pagination
      [hasElipsisPages]="configTable.tPagination.hasElipsisPages ?? false"
      [pageSize]="configTable.tPagination.pageSize ?? 10"
      [page]="configTable.tPagination.page ?? 0"
      [totalItems]="configTable.tPagination.fullData?.length ?? 0"
      [fullData]="configTable.tPagination.fullData ?? []"
      [styleType]="styleType"
      (pageChange)="updateCurrentPage($event)"
    ></frg-small-pagination>
  }
} @else {
  <div class="d-flex justify-content-center my-4">
    <div class="text-center">No Elements</div>
  </div>
}

<ng-template #cellForTpl let-cells="cells" let-item="item">
  @for (cell of $any(cells); track $index) {
    <ng-container
      [ngTemplateOutlet]="cellTpl"
      [ngTemplateOutletContext]="{
        cell: cell,
        item: item
      }"
    ></ng-container>
    <br />
  }
</ng-template>

<ng-template #cellTpl let-cell="cells" let-item="item">
  @if (!cell.fieldPipe) {
    @if (
      cell.icon &&
      cell.icon.position !== 'right' &&
      cell.icon.action.visible &&
      cell.icon.action.visible(item)
    ) {
      <frg-button
        [ariaLabel]="cell.icon.ariaLabel || 'Azione'"
        [text]="''"
        [iconClass]="cell.icon.iconClass ? cell.icon.iconClass : ''"
        [styleType]="'icon'"
        [size]="'small'"
        frgTooltip
        [tooltipConfig]="{
          apply:
            cell.icon.action.tooltip && cell.icon.action.tooltip.apply
              ? cell.icon.action.tooltip.apply
              : true,
          text:
            cell.icon.action.tooltip && cell.icon.action.tooltip.text
              ? cell.icon.action.tooltip.text(item)
              : '',
          textContent:
            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent
              ? cell.icon.action.tooltip.textContent(item)
              : '',
          position:
            cell.icon.action.tooltip && cell.icon.action.tooltip.position
              ? cell.icon.action.tooltip.position
              : 'top',
          gap:
            cell.icon.action.tooltip && cell.icon.action.tooltip.gap
              ? cell.icon.action.tooltip.gap
              : 0
        }"
        [disabled]="
          cell.icon.action.disabled
            ? cell.icon.action.disabled(item)
            : null
        "
        (clickEvent)="handleIconClick(cell, item)"
        (click)="$event.stopPropagation()"
        (keydown)="$event.stopPropagation()"
        (keyup.enter)="$event.stopPropagation()"
      >
      </frg-button>
    }
    <span [ngClass]="cell.customClass ? cell.customClass(item) : ''">
      {{ item | fieldArrayPosition: cell.fieldArrayPosition }}
    </span>
    @if (
      cell.icon &&
      cell.icon.position === 'right' &&
      cell.icon.action.visible &&
      cell.icon.action.visible(item)
    ) {
      <frg-button
        [ariaLabel]="cell.icon.ariaLabel || 'Azione'"
        [text]="''"
        [iconClass]="cell.icon.iconClass ? cell.icon.iconClass : ''"
        [styleType]="'icon'"
        [size]="'small'"
        frgTooltip
        [tooltipConfig]="{
          apply:
            cell.icon.action.tooltip && cell.icon.action.tooltip.apply
              ? cell.icon.action.tooltip.apply
              : true,
          text:
            cell.icon.action.tooltip && cell.icon.action.tooltip.text
              ? cell.icon.action.tooltip.text(item)
              : '',
          textContent:
            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent
              ? cell.icon.action.tooltip.textContent(item)
              : '',
          position:
            cell.icon.action.tooltip && cell.icon.action.tooltip.position
              ? cell.icon.action.tooltip.position
              : 'top',
          gap:
            cell.icon.action.tooltip && cell.icon.action.tooltip.gap
              ? cell.icon.action.tooltip.gap
              : 0
        }"
        [disabled]="
          cell.icon.action.disabled
            ? cell.icon.action.disabled(item)
            : null
        "
        (clickEvent)="handleIconClick(cell, item)"
        (click)="$event.stopPropagation()"
        (keydown)="$event.stopPropagation()"
        (keyup.enter)="$event.stopPropagation()"
      >
      </frg-button>
    }
  } @else {
    @if (
      cell.icon &&
      cell.icon.position !== 'right' &&
      cell.icon.action.visible &&
      cell.icon.action.visible(item)
    ) {
      <frg-button
        [ariaLabel]="cell.icon.ariaLabel || 'Azione'"
        [text]="''"
        [iconClass]="cell.icon.iconClass ? cell.icon.iconClass : ''"
        [styleType]="'icon'"
        [size]="'small'"
        frgTooltip
        [tooltipConfig]="{
          apply:
            cell.icon.action.tooltip && cell.icon.action.tooltip.apply
              ? cell.icon.action.tooltip.apply
              : true,
          text:
            cell.icon.action.tooltip && cell.icon.action.tooltip.text
              ? cell.icon.action.tooltip.text(item)
              : '',
          textContent:
            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent
              ? cell.icon.action.tooltip.textContent(item)
              : '',
          position:
            cell.icon.action.tooltip && cell.icon.action.tooltip.position
              ? cell.icon.action.tooltip.position
              : 'top',
          gap:
            cell.icon.action.tooltip && cell.icon.action.tooltip.gap
              ? cell.icon.action.tooltip.gap
              : 0
        }"
        [disabled]="
          cell.icon.action.disabled
            ? cell.icon.action.disabled(item)
            : null
        "
        (clickEvent)="handleIconClick(cell, item)"
        (click)="$event.stopPropagation()"
        (keydown)="$event.stopPropagation()"
        (keyup.enter)="$event.stopPropagation()"
      >
      </frg-button>
    }
    <span
      [innerHtml]="
        item
          | fieldArrayPosition: cell.fieldArrayPosition
          | dynamicPipe: cell.fieldPipe.type : cell.fieldPipe.args
          | safeHtml
      "
      [ngClass]="cell.customClass ? cell.customClass(item) : ''"
    ></span>
    @if (
      cell.icon &&
      cell.icon.position === 'right' &&
      cell.icon.action.visible &&
      cell.icon.action.visible(item)
    ) {
      <frg-button
        [ariaLabel]="cell.icon.ariaLabel || 'Azione'"
        [text]="''"
        [iconClass]="cell.icon.iconClass ? cell.icon.iconClass : ''"
        [styleType]="'icon'"
        [size]="'small'"
        frgTooltip
        [tooltipConfig]="{
          apply:
            cell.icon.action.tooltip && cell.icon.action.tooltip.apply
              ? cell.icon.action.tooltip.apply
              : true,
          text:
            cell.icon.action.tooltip && cell.icon.action.tooltip.text
              ? cell.icon.action.tooltip.text(item)
              : '',
          textContent:
            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent
              ? cell.icon.action.tooltip.textContent(item)
              : '',
          position:
            cell.icon.action.tooltip && cell.icon.action.tooltip.position
              ? cell.icon.action.tooltip.position
              : 'top',
          gap:
            cell.icon.action.tooltip && cell.icon.action.tooltip.gap
              ? cell.icon.action.tooltip.gap
              : 0
        }"
        [disabled]="
          cell.icon.action.disabled
            ? cell.icon.action.disabled(item)
            : null
        "
        (clickEvent)="handleIconClick(cell, item)"
        (click)="$event.stopPropagation()"
        (keydown)="$event.stopPropagation()"
        (keyup.enter)="$event.stopPropagation()"
      >
      </frg-button>
    }
  }
</ng-template>