@if (selectionMode === 'multiple' && showActionButtons) {
<gov-flex
  class="gov-table-complex__actions mt-2"
  justify-content="space-between"
  align-items="center"
>
  <div class="gov-table-complex__records-selected">
    {{ selectedCount }} {{ ('TABLES.CHOSEN_RECORDS' | translate) ?? 'chosen records'}}
  </div>
  <div>
    <gov-button color="primary" size="s" type="solid" (gov-click)="delete.emit(selected)">
      {{ ('BUTTONS.DELETE' | translate) ?? 'Delete'}}
    </gov-button>
    <gov-button color="primary" size="s" type="solid" (gov-click)="save.emit(selected)">
      {{ ('BUTTONS.SAVE' | translate) ?? 'Save'}}
    </gov-button>
    <gov-button color="primary" size="s" type="solid" (gov-click)="download.emit(selected)">
      {{ ('BUTTONS.DOWNLOAD' | translate) ?? 'Download'}}
    </gov-button>
    <gov-button color="primary" size="s" type="solid" (gov-click)="deselectAll()">
      {{ ('BUTTONS.CANCEL' | translate) ?? 'Cancel'}}
    </gov-button>
  </div>
</gov-flex>
}

<div
  class=" v-table gov-table"
  [attr.size]="size | govSize"
>
  <table class="v-table__table">
    <thead class="v-table__head">
      <tr class="v-table__header">
        @if (this.rowDetailTemplate) {
          <th></th>
        } @if (selectionMode === 'multiple') {
        <th scope="col">
          <gov-form-checkbox
            [checked]="allSelected"
            (gov-change)="toggleAll($event)"
          />
        </th>
        }
        @for (column of tableColumns; track column; let index = $index) {
        @if (column.visible && column.forceVisibility !== 'hidden') {
        <th
          scope="col"
          [style]="{'text-align': column.textAlign}"
          [class]="column.columnClass"
        >
          <span
            class="gov-table--fit-width"
            [class.v-table__sortable]="column.sortable"
            [class.v-table__sortable--desc]="column.sortable && column.sortDirection === 'desc'"
            [class.v-table__sortable--asc]="column.sortable && column.sortDirection === 'asc'"
            (click)="sortColumn(column)"
          >
            {{ column.headerGetter(column.id, index) | translate }}
          </span>
        </th>
        } @if (this.rowDetailButtonTemplate) {
        <th></th>
        }}
      </tr>
    </thead>
    @if (loading) {
      <v-loader />
    } @else {
    <tbody class="v-table__body">
      @for (data of tableRowView; track data.id; let rowIndex = $index) {
      <tr
        class="v-table__row"
        [class.gov-table--highlight]="data.selected && selectionMode"
        (click)="selectRow(data, $event)"
        (dblclick)="navigate(data, $event)"
        (mousedown)="navigateNewWindow(data, $event)"
      >
        @if (this.rowDetailTemplate) {
        <td>
          <gov-button
            [size]="size | govSize"
            color="primary"
            type="solid"
            (gov-click)="toggleDetail(data)"
          >
            <gov-icon
              [name]="data.expanded ? 'chevron-up' : 'chevron-down'"
              [size]="size | govSize"
              slot="icon-start"
            ></gov-icon>
          </gov-button>
        </td>
        } @if (selectionMode === 'multiple') {
        <td class="gov-table--fit-content gov-table--border-right">
          <gov-form-checkbox
            no-label
            [checked]="data.selected"
            [size]="size | govSize"
            (gov-change)="selectRowCheckbox(data, $event)"
          />
        </td>
        }
        @for (column of tableColumns; track column; let columnIndex = $index) {
        @if (column.visible && column.forceVisibility !== 'hidden') {
        <td
          [style]="{'text-align': column.textAlign}"
          [class]="column.columnClass!"
          [class.v-auto-cell]="column.template"
        >
          @if (column.template) {
          <ng-container
            *ngTemplateOutlet="
              column.template;
              context: { $implicit: data.row }
            "
          ></ng-container>
          } @else {
          <span
            [queryParams]="column.queryParams ? column.queryParams : undefined"
            [routerLink]="column.routerLink ? column.routerLink(data.row) : undefined"
            [innerHTML]="truncate(column.valueGetter(data.row, rowIndex))"
            [attr.title]="
              column.valueGetter(data.row, rowIndex).length > maximumColumnLength
                ? column.valueGetter(data.row, rowIndex)
                : null
            "
          ></span>
          }
        </td>
        @if (this.rowDetailButtonTemplate) {
        <td scope="">
          <ng-container
            *ngTemplateOutlet="
              this.rowDetailButtonTemplate;
              context: { $implicit: data.row }
            "
          ></ng-container>
        </td>
        }}}
      </tr>
      @if (this.rowDetailTemplate && data.expanded) {
      <tr>
        <td [attr.colspan]="tableColumns.length + 1">
          <ng-container
            class="w-100"
            *ngTemplateOutlet="
              this.rowDetailTemplate;
              context: { $implicit: data.row }
            "
          ></ng-container>
        </td>
      </tr>
      } } @if (!tableRows.length && !loading){
      <td [attr.colspan]="tableColumns.length">
        <gov-empty align="center" [size]="size | govSize">
          <gov-icon slot="icon" name="empty-file" type="colored"/>
          <p slot="headline">
            {{ ('TABLES.EMPTY' | translate) ?? 'No records were found!' }}
          </p>
        </gov-empty>
      </td>
      }
    </tbody>
  }
  </table>
  @if(showPaginator) {
  <div class="v-table__paginator d-flex pt-3 pb-3">
    @if (tableRows.length) {
    <div class="mt-2">
      <v-table-pagination-info
        [showingText]="'TABLES.PAGINATION.SHOWING' | translate"
        [toText]="'TABLES.PAGINATION.TO' | translate"
        [ofText]="'TABLES.PAGINATION.OF' | translate"
        [entriesText]="'TABLES.PAGINATION.ENTRIES' | translate"
        [currentPage]="currentPage"
        [pageSize]="pageSize"
        [total]="total"
      />
    </div>
    <div class="ms-4">
      <gov-form-select
        [options]="pageSizeOptions"
        [value]="govPageSize"
        (gov-change)="changePageSize($event)"
      />
    </div>
    }
    <div class="ms-4">
      <gov-pagination
        [current]="currentPage"
        [pageSize]="pageSize"
        [total]="total"
        [type]="'button'"
        (gov-page)="changePage($event)"
      />
    </div>
  </div>
  }
</div>