@if (showToolbar()) {
  <div class="ngm-card-header flex justify-between items-center" [ngStyle]="styling?.bar">
    <div class="truncate">{{ title }}</div>

    <div style="flex: 1; display: flex; place-content: center flex-end; align-items: center">
      <ng-content></ng-content>
    </div>

    <div class="actions flex justify-around items-center">
      <ng-content select="[ngmAction]"></ng-content>

      <!-- data download -->
      @if (!options()?.hideDataDownload) {
        <button
          class="btn pressable flex justify-center items-center w-7 h-7 rounded-full border-0 text-text-secondary hover:text-text-primary bg-transparent hover:bg-hover-bg"
          [zTooltip]="'Ngm.AnalyticalGrid.DataDownload' | translate: { Default: 'Data Download' }"
          zPosition="top"
          (click)="downloadData()"
          >
          <i class="ri-download-2-line"></i>
        </button>
      }

      <button
        ngmAction
        class="relative btn pressable flex justify-center items-center w-7 h-7 rounded-full border-0 text-text-secondary hover:text-text-primary bg-transparent hover:bg-hover-bg"
        [cdkMenuTriggerFor]="filtersMenu"
        [cdkMenuTriggerData]="{ trigger: mt }"
        #mt="cdkMenuTriggerFor"
        [class.active]="mt.isOpen()"
        [zTooltip]="'Story.Common.Slicers' | translate: { Default: 'Slicers' }"
        zPosition="top"
        >
        <i class="ri-filter-line"></i>
        @if (slicers?.length) {
          <span
            class="absolute right-0 top-0 mr-1 flex h-2 w-2 rounded-[2.5px] bg-primary-500 shadow-md ng-star-inserted"
          ></span>
        }
      </button>

      <!-- Refresh & Loading icon -->
      @if (isLoading$ | async) {
        <div class="w-7 h-7 flex justify-center items-center">
          <i class="ri-loader-2-line animate-spin"></i>
        </div>
      } @else {
        <button
          class="btn pressable flex justify-center items-center w-7 h-7 rounded-full border-0 text-text-secondary hover:text-text-primary bg-transparent hover:bg-hover-bg"
          [zTooltip]="'Ngm.AnalyticalCard.Refresh' | translate: { Default: 'Refresh' }"
          zPosition="top"
          (click)="refresh(true)"
          >
          <i class="ri-refresh-line"></i>
        </button>
      }
    </div>
  </div>
}

<div class="ngm-card-content">
  @if (error$ | async) {
    <div class="ngm-card-error">
      <span class="text-2xl font-notoColorEmoji">🐞</span>
      <span>{{ error$ | async }}</span>
    </div>
  } @else {
    <div class="max-h-full overflow-auto">
      @for (tableConfig of tablesConfig(); track tableConfig) {
        <table
          z-table
          [zSize]="appearance?.displayDensity === 'compact' ? 'compact' : appearance?.displayDensity === 'cosy' ? 'default' : 'comfortable'"
          [class.ngm-table-grid]="options()?.grid"
          class="min-w-full text-sm"
        >
          <thead z-table-header>
            <tr z-table-row [ngStyle]="styling?.bar">
              @for (column of orderedRowAxes(tableConfig); track column.name + column.caption; let j = $index; let last = $last) {
                <th
                  z-table-head
                  [attr.rowspan]="pivotColumnRowCount"
                  class="ngm-analytical-grid__dimension"
                  [class.ngm-analytical-grid__measure]="column.property?.role === AggregationRole.measure"
                  [zTableStickyStart]="column.sticky ? stickyStartOffset(tableConfig, column.name) : null"
                  [zTableStickyZIndex]="column.sticky ? 6 : 3"
                  [style.position]="options()?.sticky ? 'sticky' : null"
                  [style.top]="headerStickyTop(0)"
                >
                  <div class="flex items-center gap-2">
                    @if (column.name === rowTreeProperty()) {
                      <button
                        z-button
                        zType="ghost"
                        zSize="icon"
                        zShape="circle"
                        [displayDensity]="appearance?.displayDensity"
                        (click)="toggleRowUnfold($event)"
                      >
                        @if (rowUnfold) {
                          <z-icon zType="unfold_less"></z-icon>
                        } @else {
                          <z-icon zType="unfold_more"></z-icon>
                        }
                      </button>
                    }

                    @if (options()?.sortable) {
                      <button
                        z-table-sort-header
                        class="min-w-0 flex-1"
                        [zDirection]="sortDirection(column.name)"
                        (click)="$event.stopPropagation()"
                        (zSortChange)="onSortChange(column.name, $event)"
                      >
                        {{ column.caption || column.name }}
                      </button>
                    } @else {
                      <span>{{ column.caption || column.name }}</span>
                    }

                    <button [class]="column.selections?.length ? 'text-text-accent hover:text-text-accent' : ''"
                      z-button
                      zType="ghost"
                      zSize="icon"
                      zShape="circle"
                      displayDensity="compact"
                      cdkOverlayOrigin
                      #trigger="cdkOverlayOrigin"
                      (click)="$event.stopPropagation(); $event.preventDefault(); column.isFilterOpen = !column.isFilterOpen"
                    >
                      <z-icon zType="more_vert"></z-icon>
                    </button>

                    <ng-template
                      cdkConnectedOverlay
                      cdkConnectedOverlayHasBackdrop
                      [cdkConnectedOverlayOrigin]="trigger"
                      [cdkConnectedOverlayOpen]="column.isFilterOpen"
                      (backdropClick)="column.isFilterOpen = false"
                    >
                      @if (subscribeColumnMembers(column) | async; as members) {
                        <z-card class="ngm-analytical-grid__filtering-card" [displayDensity]="appearance?.displayDensity">
                          <z-card-title class="p-2" [ngClass]="appearance?.displayDensity === 'cosy' ? 'text-base' : 'text-lg'">
                            <ngm-display-behaviour [option]="{ value: column.name, label: column.caption }"></ngm-display-behaviour>
                          </z-card-title>
                          <div class="flex flex-col justify-start items-stretch gap-1 px-2">
                            <div>{{ 'Ngm.AnalyticalGrid.SORT' | translate: { Default: 'SORT' } }}</div>
                            <div class="flex justify-between items-center">
                              <button [class]="sortDirection(column.name) === 'asc' ? 'text-text-accent hover:text-text-accent' : ''"
                                z-button
                                zType="ghost"
                                displayDensity="cosy"
                                (click)="setSort(column.name, 'asc')"
                              >
                                <z-icon zType="arrow_upward"></z-icon>
                                {{ 'Ngm.AnalyticalGrid.ASCENDING' | translate: { Default: 'ASCENDING' } }}
                              </button>
                              <button [class]="sortDirection(column.name) === 'desc' ? 'text-text-accent hover:text-text-accent' : ''"
                                z-button
                                zType="ghost"
                                displayDensity="cosy"
                                (click)="setSort(column.name, 'desc')"
                              >
                                <z-icon zType="arrow_downward"></z-icon>
                                {{ 'Ngm.AnalyticalGrid.DESCENDGING' | translate: { Default: 'DESCENDGING' } }}
                              </button>
                            </div>
                            <div>{{ 'Ngm.AnalyticalGrid.MOVE' | translate: { Default: 'MOVE' } }}</div>
                            <div class="flex justify-between items-center">
                              <button z-button zType="ghost" displayDensity="cosy" (click)="moveLeft(column.name)">
                                <z-icon zType="arrow_back"></z-icon>
                                {{ 'Ngm.AnalyticalGrid.MOVELEFT' | translate: { Default: 'MOVE LEFT' } }}
                              </button>
                              <button z-button zType="ghost" displayDensity="cosy" (click)="moveRight(column.name)">
                                {{ 'Ngm.AnalyticalGrid.MOVERIGHT' | translate: { Default: 'MOVE RIGHT' } }}<z-icon zType="arrow_forward"></z-icon>
                              </button>
                            </div>

                            <button
                              z-button
                              zType="ghost"
                              [class]="column.sticky ? 'w-full text-text-accent hover:text-text-accent' : 'w-full'"
                              displayDensity="cosy"
                              (click)="column.sticky = !column.sticky"
                            >
                              <z-icon zType="push_pin"></z-icon>{{ 'Ngm.AnalyticalGrid.Pin' | translate: { Default: 'Pin' } }}
                            </button>

                            <ngm-search class="shrink-0" [(ngModel)]="column.search" (ngModelChange)="onColumnMemberSearch(column, $event)"></ngm-search>
                          </div>
                          <div class="ngm-analytical-grid__filtering">
                            <z-divider zVariant="dashed"></z-divider>

                            <cdk-virtual-scroll-viewport
                              [itemSize]="virtualScrollItemSize"
                              minBufferPx="200"
                              maxBufferPx="400"
                              class="ngm-analytical-grid__viewport"
                            >
                              @if (subscribeColumnFilteredMembers(column) | async; as members) {
                                <ul
                                  class="ngm-cdk-listbox"
                                  cdkListbox
                                  [cdkListboxMultiple]="true"
                                  [cdkListboxValue]="column._selections ?? []"
                                  (cdkListboxValueChange)="column._selections = [...$event.value]"
                                >
                                  <li class="ngm-selection-list__select-all flex list-none">
                                    <z-checkbox
                                      class="flex-1"
                                      labelPosition="before"
                                      [ngModel]="allFiltering(column, members)"
                                      [indeterminate]="someFiltering(column, members)"
                                      (checkChange)="onFilterSelectAll($event, column, members)"
                                    >
                                      {{ 'Ngm.AnalyticalGrid.SelectAll' | translate: { Default: 'Select All' } }}
                                    </z-checkbox>
                                  </li>
                                  <li
                                    *cdkVirtualFor="let member of members"
                                    class="ngm-cdk-option rounded-lg"
                                    [cdkOption]="member.value"
                                  >
                                    <ngm-display-behaviour
                                      class="max-w-xs truncate"
                                      [option]="member"
                                      [displayBehaviour]="column.displayBehaviour"
                                    >
                                    </ngm-display-behaviour>
                                  </li>
                                </ul>
                              }
                            </cdk-virtual-scroll-viewport>
                          </div>
                          <z-divider zVariant="dashed"></z-divider>
                          <div class="ngm-analytical-grid__filtering-actions pt-2">
                            <div ngmButtonGroup displayDensity="cosy">
                              <button
                                z-button
                                zType="secondary"
                                displayDensity="cosy"
                                (click)="column.isFilterOpen = false; column._selections = column.selections"
                              >
                                {{ 'Ngm.Common.Cancel' | translate: { Default: 'Cancel' } }}
                              </button>
                              <button
                                z-button
                                zType="default"

                                displayDensity="cosy"
                                [zDisabled]="!column._selections?.length"
                                (click)="column.isFilterOpen = false; onFilterApply(column, members)"
                              >
                                {{ 'Ngm.Common.Apply' | translate: { Default: 'Apply' } }}
                              </button>
                            </div>
                          </div>
                        </z-card>
                      }
                    </ng-template>
                  </div>
                </th>
              }

              @if (pivotColumnRowCount > 1 && tableConfig.columnAxes?.[0]) {
                <th
                  z-table-head
                  [style.position]="options()?.sticky ? 'sticky' : null"
                  [style.top]="headerStickyTop(0)"
                >
                  @if (tableConfig.columnAxes[0].displayHierarchy) {
                    <button
                      z-button
                      zType="ghost"
                      zSize="icon"
                      zShape="circle"
                      [displayDensity]="appearance?.displayDensity"
                      (click)="toggleColumnUnfold($event)"
                    >
                      @if (!columnUnfold) {
                        <z-icon zType="unfold_more"></z-icon>
                      }
                      @if (columnUnfold) {
                        <z-icon zType="unfold_less"></z-icon>
                      }
                    </button>
                  }
                  {{ tableConfig.columnAxes[0].caption || tableConfig.columnAxes[0].dimension }}
                  @if (options()?.sortable && tableConfig.columnAxes[0].dimension !== C_MEASURES) {
                    @if (tableConfig.columnAxes[0].sortDirection) {
                      <button
                        z-button
                        zType="ghost"
                        zSize="icon"
                        zShape="circle"
                        displayDensity="compact"
                        (click)="toggleColumnOrder(0)"
                      >
                        @if (tableConfig.columnAxes[0].sortDirection === 'asc') {
                          <z-icon zType="arrow_left"></z-icon>
                        }
                        @if (tableConfig.columnAxes[0].sortDirection === 'desc') {
                          <z-icon zType="chevron-right"></z-icon>
                        }
                      </button>
                    } @else {
                      <button
                        z-button
                        zType="ghost"
                        zSize="icon"
                        zShape="circle"
                        displayDensity="compact"
                        class="ngm-analytical-grid__want-order"
                        (click)="toggleColumnOrder(0)"
                      >
                        <z-icon zType="arrow_left"></z-icon>
                      </button>
                    }
                  }
                </th>
              }

              @for (column of tableConfig.pivotColumns?.[0] ?? []; track column.name) {
                <th
                  z-table-head
                  [attr.colspan]="column.colspan"
                  [class.ngm-analytical-grid__measure]="pivotColumnRowCount === 1"
                  [class.selected-member]="selected.columnMembers?.[column.name]"
                  [class.selected]="selected.column?.name === column.name"
                  [style.position]="options()?.sticky ? 'sticky' : null"
                  [style.top]="headerStickyTop(0)"
                  (click)="onClickColumnHeader($event, column)"
                >
                  <div class="flex justify-start items-center" [style.marginTop.px]="column.treeLevel * treeNodePadding">
                    @if (column.expandable) {
                      <button
                        z-button
                        zType="ghost"
                        zSize="icon"
                        zShape="circle"
                        [displayDensity]="appearance?.displayDensity"
                        [style.visibility]="!column.expandable ? 'hidden' : ''"
                        (click)="toggleColumnTree(column)"
                      >
                        <z-icon
                          class="z-icon-rtl-mirror"
                          [zType]="columnTreeControl.isExpanded(column) ? 'expand_more' : 'chevron_right'"
                        ></z-icon>
                      </button>
                    }

                    @if (pivotColumnRowCount === 1 && options()?.sortable) {
                      <button
                        z-table-sort-header
                        class="min-w-0 flex-1"
                        [zDirection]="sortDirection(column.name)"
                        (click)="$event.stopPropagation()"
                        (zSortChange)="onSortChange(column.name, $event)"
                      >
                        {{ column.caption || column.name }}
                      </button>
                    } @else {
                      <div class="pivot-column-header-content">
                        {{ column.caption || column.name }}
                      </div>
                    }
                  </div>
                </th>
              }
            </tr>

            @if (pivotColumnRowCount > 1) {
              @for (columns of tableConfig.pivotColumns?.slice(1) ?? []; track $index; let i = $index; let last = $last) {
                <tr z-table-row [class.empty]="!columns?.length" [ngStyle]="styling?.bar">
                  @if (tableConfig.columnAxes?.[i + 1]) {
                    <th
                      z-table-head
                      [style.position]="options()?.sticky ? 'sticky' : null"
                      [style.top]="headerStickyTop(i + 1)"
                    >
                      @if (tableConfig.columnAxes[i + 1].displayHierarchy) {
                        <button
                          z-button
                          zType="ghost"
                          zSize="icon"
                          zShape="circle"
                          [displayDensity]="appearance?.displayDensity"
                          (click)="toggleColumnUnfold($event)"
                        >
                          @if (!columnUnfold) {
                            <z-icon zType="unfold_more"></z-icon>
                          }
                          @if (columnUnfold) {
                            <z-icon zType="unfold_less"></z-icon>
                          }
                        </button>
                      }
                      {{ tableConfig.columnAxes[i + 1].caption || tableConfig.columnAxes[i + 1].dimension }}
                      @if (options()?.sortable && tableConfig.columnAxes[i + 1].dimension !== C_MEASURES) {
                        @if (tableConfig.columnAxes[i + 1].sortDirection) {
                          <button
                            z-button
                            zType="ghost"
                            zSize="icon"
                            zShape="circle"
                            displayDensity="compact"
                            (click)="toggleColumnOrder(i + 1)"
                          >
                            @if (tableConfig.columnAxes[i + 1].sortDirection === 'asc') {
                              <z-icon zType="arrow_left"></z-icon>
                            }
                            @if (tableConfig.columnAxes[i + 1].sortDirection === 'desc') {
                              <z-icon zType="chevron-right"></z-icon>
                            }
                          </button>
                        } @else {
                          <button
                            z-button
                            zType="ghost"
                            zSize="icon"
                            zShape="circle"
                            displayDensity="compact"
                            class="ngm-analytical-grid__want-order"
                            (click)="toggleColumnOrder(i + 1)"
                          >
                            <z-icon zType="arrow_left"></z-icon>
                          </button>
                        }
                      }
                    </th>
                  }

                  @for (column of columns; track column.name) {
                    <th
                      z-table-head
                      [attr.colspan]="column.colspan"
                      [class.ngm-analytical-grid__measure]="last"
                      [class.selected-member]="selected.columnMembers?.[column.name]"
                      [class.selected]="selected.column?.name === column.name"
                      [style.position]="options()?.sticky ? 'sticky' : null"
                      [style.top]="headerStickyTop(i + 1)"
                      (click)="onClickColumnHeader($event, column)"
                    >
                      <div class="flex justify-start items-center" [style.marginTop.px]="column.treeLevel * treeNodePadding">
                        @if (column.expandable) {
                          <button
                            z-button
                            zType="ghost"
                            zSize="icon"
                            zShape="circle"
                            [displayDensity]="appearance?.displayDensity"
                            [style.visibility]="!column.expandable ? 'hidden' : ''"
                            (click)="toggleColumnTree(column)"
                          >
                            <z-icon
                              class="z-icon-rtl-mirror"
                              [zType]="columnTreeControl.isExpanded(column) ? 'expand_more' : 'chevron_right'"
                            ></z-icon>
                          </button>
                        }

                        @if (last && options()?.sortable) {
                          <button
                            z-table-sort-header
                            class="min-w-0 flex-1"
                            [zDirection]="sortDirection(column.name)"
                            (click)="$event.stopPropagation()"
                            (zSortChange)="onSortChange(column.name, $event)"
                          >
                            {{ column.caption || column.name }}
                          </button>
                        } @else {
                          <div class="pivot-column-header-content">
                            {{ column.caption || column.name }}
                          </div>
                        }
                      </div>
                    </th>
                  }
                </tr>
              }
            }
          </thead>

          <tbody z-table-body>
            @for (row of tableRows(); track row.key ?? $index; let i = $index) {
              <tr
                z-table-row
                [class.selected]="isRowSelected(row, i)"
                (click)="selectRow(i, row)"
              >
                @for (column of orderedRowAxes(tableConfig); track column.name + column.caption; let j = $index; let last = $last) {
                  <td
                    z-table-cell
                    class="ngm-analytical-grid__dimension"
                    [attr.colspan]="last && pivotColumnRowCount > 1 ? 2 : null"
                    [class.ngm-analytical-grid__measure]="column.property?.role === AggregationRole.measure"
                    [class.selected-member]="isRowCell(row, column, j)"
                    [class.selected]="column.name === selected.column?.name"
                    [zTableStickyStart]="column.sticky ? stickyStartOffset(tableConfig, column.name) : null"
                    [zTableStickyZIndex]="column.sticky ? 5 : 1"
                    (click)="selectCell(column)"
                  >
                    <div class="flex justify-start items-center">
                      @if (column.name === rowTreeProperty()) {
                        <button
                          z-button
                          zType="ghost"
                          zSize="icon"
                          zShape="circle"
                          [displayDensity]="appearance?.displayDensity"
                          [style.visibility]="!row.expandable ? 'hidden' : ''"
                          [style.marginLeft.px]="row.level * treeNodePadding"
                          (click)="toggleRowTree($event, row)"
                        >
                          <z-icon
                            class="z-icon-rtl-mirror"
                            [zType]="rowTreeControl.isExpanded(row) ? 'expand_more' : 'chevron_right'"
                          ></z-icon>
                        </button>
                      }

                      @if (column.name === C_MEASURES) {
                        <div>{{ row['[Measures].[MEMBER_CAPTION]'] || row['[Measures]'] }}</div>
                      } @else if (column.property?.role !== AggregationRole.measure) {
                        <ngm-display-behaviour
                          class="flex-1"
                          [option]="{
                            key: row[column.name],
                            value: row[column.name],
                            caption: row[column.memberCaption]
                          }"
                          [displayBehaviour]="column.displayBehaviour"
                        >
                        </ngm-display-behaviour>
                      }
                    </div>
                  </td>
                }

                @if (bodyLeadingColspan(tableConfig)) {
                  <td z-table-cell [attr.colspan]="bodyLeadingColspan(tableConfig)"></td>
                }

                @for (column of leafColumns(tableConfig); track column.name) {
                  <td
                    z-table-cell
                    class="ngm-analytical-grid__measure"
                    [class.selected-cell]="selected.column?.name === column.name"
                    [class.ngm-analytical-grid__cell-empty]="isNil(row[column.name]?.value)"
                    [ngStyle]="row[column.name]?.cellStyles"
                    [ngClass]="row[column.name]?.classes"
                    (mousedown)="selectCell(column)"
                  >
                    @if (column.bar) {
                      <div
                        [ngStyle]="row[column.name]?.barStyles"
                        [ngClass]="row[column.name]?.barClasses"
                        class="ngm-analytical-grid__cell-bar"
                      ></div>
                    }
                    @if (row[column.name]?.value === null || row[column.name]?.value === undefined) {
                      <span class="cell-value">-</span>
                    } @else if (column.formatting?.currencyCode || options()?.currencyCode) {
                      <span class="cell-value">
                        {{
                          row[column.name]?.value
                            | currency
                              : column.formatting?.currencyCode || options()?.currencyCode
                              : 'symbol'
                              : column.formatting?.digitsInfo || options()?.digitsInfo
                        }}
                      </span>
                    } @else {
                      <span class="cell-value">
                        @if ((column.formatting?.unit ?? options()?.unit) === '%') {
                          <span class="ngm-analytical-grid__measure-value">
                            {{
                              row[column.name].value * 100
                                | number: column.formatting?.digitsInfo || options()?.digitsInfo || '0.0-2'
                            }}
                          </span>
                        } @else {
                          <span class="ngm-analytical-grid__measure-value">
                            {{
                              row[column.name]?.value | number: column.formatting?.digitsInfo || options()?.digitsInfo || '0.0-2'
                            }}
                          </span>
                        }
                        @if (column.formatting?.unit || options()?.unit; as unit) {
                          <span class="ngm-analytical-grid__measure-unit">
                            {{ unit }}
                          </span>
                        }
                      </span>
                    }
                  </td>
                }
              </tr>
            } @empty {
              <tr z-table-row>
                <td
                  z-table-cell
                  class="py-8 text-center text-muted-foreground"
                  [attr.colspan]="orderedRowAxes(tableConfig).length + leafColumns(tableConfig).length + (pivotColumnRowCount > 1 ? 1 : 0)"
                >
                  {{ 'Ngm.Table.NoData' | translate: { Default: 'No data' } }}
                </td>
              </tr>
            }
          </tbody>
        </table>
        }
      </div>
    }

    @if (isLoading$ | async) {
      <div class="absolute top-0 left-0 w-full h-full flex justify-center items-center">
        <z-loader diameter="30" />
      </div>
    }
  </div>

  @if (options()?.paging) {
    <z-paginator
      class="px-2 py-1"
      [displayDensity]="appearance?.displayDensity"
      [hidePageSizeLabel]="true"
      [length]="resultsLength()"
      [pageIndex]="pageIndex()"
      [pageSize]="pageSize()"
      [pageSizeOptions]="[20, 50, 100]"
      showFirstLastButtons
      (page)="onPage($event)"
      />
  }

  <ng-template #filtersMenu let-trigger="trigger">
    <div class="relative p-4 rounded-2xl border-[0.5px] border-solid border-divider-deep shadow-md bg-components-card-bg">
      <div class="text-base font-semibold">{{ 'Ngm.Selection.Slicers' | translate: { Default: 'Slicers' } }}</div>
      <ngm-slicers
        class="overflow-hidden"
        inline
        editable
        [slicers]="slicers"
        [dataSettings]="dataSettings"
        [limit]="5"
        [capacities]="[eSlicersCapacity.CombinationSlicer, eSlicersCapacity.AdvancedSlicer, eSlicersCapacity.Variable]"
        (valueChange)="slicers = $event"
        (click)="$event.stopPropagation()"
        />

      <button
        type="button"
        class="btn-close btn btn-secondary absolute right-2 top-2 flex items-center justify-center w-6 h-6 cursor-pointer z-20"
        (click)="trigger.close()"
        >
        <i class="ri-close-line"></i>
      </button>
    </div>
  </ng-template>