@if (showToolbar()) {
  <div class="ngm-card-header flex justify-between items-center" [ngStyle]="styling?.bar">
    <div>{{ 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 mat-icon-button displayDensity="cosy"
        [matTooltip]=" 'Ngm.AnalyticalGrid.DataDownload' | translate: {Default: 'Data Download'} "
        (click)="downloadData()">
        <mat-icon fontSet="material-icons-outlined">file_download</mat-icon>
      </button>
    }

      <!-- Refresh & Loading icon -->
      <button mat-icon-button class="ngm-analytical-grid__refresh" displayDensity="cosy"
        [style.opacity]="(isLoading$ | async) ? '0' : '1'"
        [style.visibility]="(isLoading$ | async) ? 'hidden' : 'visible'"
        (click)="refresh()">
        <mat-icon fontSet="material-icons-outlined">refresh</mat-icon>
      </button>
      
      <mat-spinner *ngIf="isLoading$ | async" displayDensity="cosy"
        [diameter]="20"
        [strokeWidth]="1"
      >
      </mat-spinner>
    </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 {
  <table mat-table [class.ngm-table-grid]="options()?.grid" [displayDensity]="appearance?.displayDensity"
    [dataSource]="dataSource"
    matSort [matSortDisabled]="!options()?.sortable"
    [matSortActive]="matSortActive"
    [matSortDirection]="matSortDirection"
    >
    <!-- rows -->
    @for (column of rowAxes; track column.name + column.caption; let j = $index; let last = $last) {
      <ng-container [matColumnDef]="column.name" [sticky]="column.sticky">
        <th mat-header-cell *matHeaderCellDef mat-sort-header [attr.rowspan]="pivotColumnRowCount"
          class="ngm-analytical-grid__dimension"
          [class.ngm-analytical-grid__measure]="column.property?.role === AggregationRole.measure"
        >
          <button *ngIf="column.name === rowTreeProperty()" mat-icon-button [displayDensity]="appearance?.displayDensity"
            (click)="toggleRowUnfold($event)">
            <mat-icon *ngIf="!rowUnfold">unfold_more</mat-icon>
            <mat-icon *ngIf="rowUnfold">unfold_less</mat-icon>
          </button>
  
          {{column.caption || column.name}}
  
          <button mat-icon-button displayDensity="compact" [color]="column.selections?.length ? 'accent' : ''"
            cdkOverlayOrigin #trigger="cdkOverlayOrigin"
            (click)="$event.stopPropagation();$event.preventDefault();column.isFilterOpen=!column.isFilterOpen">
            <mat-icon [color]="column.selections?.length ? 'accent' : ''">more_vert</mat-icon>
          </button>
          <ng-template
            cdkConnectedOverlay cdkConnectedOverlayHasBackdrop
            [cdkConnectedOverlayOrigin]="trigger"
            [cdkConnectedOverlayOpen]="column.isFilterOpen"
            (backdropClick)="column.isFilterOpen=false"
          >
            <mat-card *ngIf="subscribeColumnMembers(column) | async as members" class="ngm-analytical-grid__filtering-card"
              [displayDensity]="appearance?.displayDensity" >
              <mat-card-title class="text-lg p-2">
                <ngm-display-behaviour [option]="{value: column.name, label: column.caption}"></ngm-display-behaviour>
              </mat-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 mat-button displayDensity="cosy" [color]="matSortActive===column.name && matSortDirection==='asc' ? 'accent' : ''"
                    (click)="matSortActive===column.name && matSortDirection==='asc' ? ((matSortActive=null)&&matSortDirection=null) : ((matSortActive=column.name)&&matSortDirection='asc')">
                    <mat-icon>arrow_upward</mat-icon>
                    {{ 'Ngm.AnalyticalGrid.ASCENDING' | translate: {Default: 'ASCENDING'} }}
                  </button>
                  <button mat-button displayDensity="cosy" [color]="matSortActive===column.name && matSortDirection==='desc' ? 'accent' : ''"
                    (click)="matSortActive===column.name && matSortDirection==='desc' ? ((matSortActive=null)&&matSortDirection=null) : ((matSortActive=column.name)&&matSortDirection='desc')"
                    ><mat-icon>arrow_downward</mat-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 mat-button displayDensity="cosy" (click)="moveLeft(column.name)"><mat-icon>arrow_back</mat-icon>
                    {{ 'Ngm.AnalyticalGrid.MOVELEFT' | translate: {Default: 'MOVE LEFT'} }}
                  </button>
                  <button mat-button displayDensity="cosy" (click)="moveRight(column.name)">{{ 'Ngm.AnalyticalGrid.MOVERIGHT' | translate: {Default: 'MOVE RIGHT'} }}<mat-icon>arrow_forward</mat-icon></button>
                </div>

                <button mat-button class="w-full" displayDensity="cosy" [color]="column.sticky?'accent':''" (click)="column.sticky=!column.sticky">
                  <mat-icon>push_pin</mat-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">
                <mat-divider ngmAppearance="dashed"></mat-divider>
                
                <cdk-virtual-scroll-viewport [itemSize]="virtualScrollItemSize" minBufferPx="200" maxBufferPx="400" class="ngm-analytical-grid__viewport">
                  <mat-selection-list *ngIf="subscribeColumnFilteredMembers(column) | async as members" [displayDensity]="appearance?.displayDensity"
                    [(ngModel)]="column._selections">
                    <div matSubheader class="ngm-selection-list__select-all flex">
                      <mat-checkbox class="flex-1" labelPosition="before"
                        [checked]="allFiltering(column, members)"
                        [indeterminate]="someFiltering(column, members)"
                        (change)="onFilterSelectAll($event, column, members)"
                      >{{ 'Ngm.AnalyticalGrid.SelectAll' | translate: {Default: 'Select All'} }}</mat-checkbox>
                    </div>
                    <mat-list-option *cdkVirtualFor="let member of members" class="rounded-lg"
                      [value]="member.value"
                      >
                      <ngm-display-behaviour class="flex-1"
                        [option]="member"
                        [displayBehaviour]="column.displayBehaviour">
                      </ngm-display-behaviour>
                    </mat-list-option>
                  </mat-selection-list>
                </cdk-virtual-scroll-viewport>
              </div>
              <mat-divider ngmAppearance="dashed"></mat-divider>
              <div class="ngm-analytical-grid__filtering-actions pt-2">
                <div ngmButtonGroup displayDensity="cosy">
                  <button mat-flat-button displayDensity="cosy"
                    (click)="column.isFilterOpen=false;column._selections=column.selections">
                    {{ 'Ngm.Common.Cancel' | translate: {Default: 'Cancel'} }}
                  </button>
                  <button mat-raised-button color="accent" displayDensity="cosy" [disabled]="!column._selections?.length"
                    (click)="column.isFilterOpen=false;onFilterApply(column, members)">
                    {{ 'Ngm.Common.Apply' | translate: {Default: 'Apply'} }}
                  </button>
                </div>
              </div>
            </mat-card>
          </ng-template>
        </th>
        
        <td mat-cell *matCellDef="let element;" [attr.colspan]="last && pivotColumnRowCount > 1 ? 2 : 1"
          class="ngm-analytical-grid__dimension"
          [class.ngm-analytical-grid__measure]="column.property?.role === AggregationRole.measure"
          [class.selected-member]="isRowCell(element, column, j)"
          [class.selected]="column.name === selected.column?.name"
          (click)="selectCell(column)"
        >
          <div class="flex justify-start items-center">
            <ng-container *ngIf="column.name === rowTreeProperty()">
              <button mat-icon-button [displayDensity]="appearance?.displayDensity"
                  [style.visibility]="!element.expandable ? 'hidden' : ''"
                  [style.marginLeft.px]="element.level * treeNodePadding"
                  (click)="toggleRowTree($event, element)"
                  >
                  <mat-icon class="mat-icon-rtl-mirror">
                    {{rowTreeControl.isExpanded(element) ? 'expand_more' : 'chevron_right'}}
                  </mat-icon>
              </button>
            </ng-container>
      
            <ngm-display-behaviour *ngIf="column.property?.role !== AggregationRole.measure" class="flex-1"
              [option]="{key: element[column.name], value: element[column.name], caption: element[column.memberCaption]}"
              [displayBehaviour]="column.displayBehaviour">
            </ngm-display-behaviour>
          </div>
        </td>
      </ng-container>
    }
    
    <ng-container *ngIf="pivotColumnRowCount > 1">
      <ng-container *ngFor="let columnAxis of columnAxes; let i = index" [matColumnDef]="columnAxis.dimension">
        <th *matHeaderCellDef mat-header-cell>
          <button *ngIf="columnAxis.displayHierarchy" mat-icon-button [displayDensity]="appearance?.displayDensity"
            (click)="toggleColumnUnfold($event)">
            <mat-icon *ngIf="!columnUnfold">unfold_more</mat-icon>
            <mat-icon *ngIf="columnUnfold">unfold_less</mat-icon>
          </button>
          {{columnAxis.caption || columnAxis.dimension}}
          
          <ng-container *ngIf="options()?.sortable && columnAxis.dimension !== C_MEASURES">
            <button mat-icon-button *ngIf="columnAxis.sortDirection" displayDensity="compact"
              (click)="toggleColumnOrder(i)">
              <mat-icon *ngIf="columnAxis.sortDirection==='asc'">arrow_left</mat-icon>
              <mat-icon *ngIf="columnAxis.sortDirection==='desc'">arrow_right</mat-icon>
            </button>
            <button mat-icon-button *ngIf="!columnAxis.sortDirection" displayDensity="compact" class="ngm-analytical-grid__want-order"
              (click)="toggleColumnOrder(i)">
              <mat-icon>arrow_left</mat-icon>
            </button>
          </ng-container>
        </th>

        <td mat-cell *matCellDef="let element;">
        </td>
      </ng-container>
    </ng-container>

    <!-- columns -->
    <ng-container *ngFor="let columns of pivotColumns; let i = index; last as last">
      <ng-container [matColumnDef]="column.name" *ngFor="let column of columns; let j = index;">
        <th mat-header-cell *matHeaderCellDef 
          [attr.colspan]="column.colspan"
          [class.ngm-analytical-grid__measure]="last"
          [class.selected-member]="selected.columnMembers?.[column.name]"
          [class.selected]="selected.column?.name === column.name"
          (click)="onClickColumnHeader($event, column)"
          >
          <div class="flex justify-start items-center" [style.marginTop.px]="column.treeLevel * treeNodePadding">
            <button mat-icon-button *ngIf="column.expandable" [displayDensity]="appearance?.displayDensity"
              [style.visibility]="!column.expandable ? 'hidden' : ''"
              (click)="toggleColumnTree(column)"
              >
              <mat-icon class="mat-icon-rtl-mirror">
                {{columnTreeControl.isExpanded(column) ? 'expand_more' : 'chevron_right'}}
              </mat-icon>
            </button>

            <div class="pivot-column-header-content">
              {{column.caption || column.name}}
            </div>

            <div *ngIf="last" mat-sort-header [disabled]="!options()?.sortable"></div>
          </div>
        </th>

        <ng-container *ngIf="last">
          <td mat-cell *matCellDef="let element;" class="ngm-analytical-grid__measure"
            [class.selected-cell]="selected.column?.name === column.name"
            [class.ngm-analytical-grid__cell-empty]="isNil(element[column.name]?.value)"
            [ngStyle]="element[column.name]?.cellStyles"
            [ngClass]="element[column.name]?.classes"
            (mousedown)="selectCell(column)">
            <div *ngIf="column.bar" [ngStyle]="element[column.name]?.barStyles"
              [ngClass]="element[column.name]?.barClasses"
              class="ngm-analytical-grid__cell-bar"
            ></div>
            <span *ngIf="element[column.name]?.value === null || element[column.name]?.value === undefined; else cell" class="cell-value">-</span>
            <ng-template #cell>
              <span *ngIf="column.formatting?.currencyCode || options()?.currencyCode; else plain" class="cell-value">
                {{element[column.name]?.value | currency: column.formatting?.currencyCode || options()?.currencyCode:'symbol':column.formatting?.digitsInfo || options()?.digitsInfo}}
              </span>
            </ng-template>

            <ng-template #plain>
              <span class="cell-value">
                <span *ngIf="(column.formatting?.unit ?? options()?.unit) === '%'; else digits" class="ngm-analytical-grid__measure-value">
                  {{element[column.name].value * 100 | number: column.formatting?.digitsInfo || options()?.digitsInfo ?? '0.0-2'}}
                </span>
                
                <span *ngIf="column.formatting?.unit || options()?.unit" class="ngm-analytical-grid__measure-unit">
                  {{column.formatting?.unit || options()?.unit}}
                </span>
              </span>
            </ng-template>

            <ng-template #digits>
              <span class="ngm-analytical-grid__measure-value">
                {{element[column.name]?.value | number: column.formatting?.digitsInfo || options()?.digitsInfo || '0.0-2'}}
              </span>
            </ng-template>
          </td>
        </ng-container>
      </ng-container>
    </ng-container>
    
    <!-- 单独设置一行抬头是因为全部放在下面循环里创建的话没有被识别出来, 还未找到原因 -->
    <tr mat-header-row *matHeaderRowDef="matHeaders; sticky:options()?.sticky" [ngStyle]="styling?.bar"></tr>
    <tr mat-header-row *matHeaderRowDef="matRestHeaders[0]; sticky:options()?.sticky" [class.empty]="!matRestHeaders[0]" [ngStyle]="styling?.bar"></tr>
    <tr mat-header-row *matHeaderRowDef="matRestHeaders[1]; sticky:options()?.sticky;" [class.empty]="!matRestHeaders[1]" [ngStyle]="styling?.bar"></tr>

    <!-- 循环里的 mat-header-row 当变化时没有被识别出来, 所以固定写死几行 header row 用 empty class 的方式将空行其隐藏 -->
    <!-- <ng-container *ngFor="let columns of displayedColumns;">
      <tr mat-header-row *matHeaderRowDef="columns; sticky:options()?.sticky"></tr>
    </ng-container> -->

    <tr mat-row *matRowDef="let row; columns: matRowColumns; let i = index"
      [class.selected]="isRowSelected(row, i)"
      (click)="selectRow(i, row)"
      >
    </tr>
  </table>
}

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

<mat-paginator *ngIf="options()?.paging" [displayDensity]="appearance?.displayDensity"
  [pageSize]="options()?.pageSize" [pageSizeOptions]="[20, 50, 100]" showFirstLastButtons
/>