@if (!options?.hideHeader) {
  <div class="pac-widget__header ngm-card-header flex justify-start items-center">
    <span
      >{{ options?.name }}
      @if (options?.unit) {
        <span
          >{{ 'STORY.WIDGETS.AccountingStatement.Unit' | translate: { Default: 'Unit' } }}: {{ options.unit }}</span
          >
        }
      </span>
      <span style="flex: 1"></span>
      <div class="pac-widget__action-toolbar flex justify-between items-center">
        <button [class]="(hasSlicers$ | async) ? 'text-text-accent hover:text-text-accent' : ''"
          z-button
          zType="ghost"
          zSize="icon"
          zShape="circle"

          z-menu
          [zMenuTriggerFor]="filtersMenu"
          >
          <z-icon zType="filter_alt"></z-icon>
        </button>
        <!-- Internal Error -->
        @if (error$ | async; as error) {
          <button
            z-button
            zType="ghost"
            zSize="icon"
            zShape="circle"

            [zTooltip]="error"
            >
            <z-icon zType="warning"></z-icon>
          </button>
        }
        <!-- Loading spinner icon -->
        <z-loader
          class="ngm-analytical-card--loading"
          [style.opacity]="(isLoading$ | async) ? '1' : '0'"
          [style.visibility]="(isLoading$ | async) ? 'visible' : 'hidden'"
          [diameter]="18"
          />
      </div>
    </div>
  }

  <div class="flex-1 overflow-auto">
    @if (columnConfig$ | async; as columnConfig) {
      <table
        z-table
        class="w-full"
        [displayDensity]="styling?.appearance?.displayDensity"
      >
        <thead z-table-header>
          <tr z-table-row class="border-b bg-muted/30 hover:bg-muted/30">
            @if (columnConfig.hasGroup) {
              <th z-table-head></th>
            }
            <th z-table-head></th>
            @for (col of columnConfig.columns; track col.name) {
              <th z-table-head>{{ col.label }}</th>
            }
          </tr>
        </thead>

        <tbody z-table-body>
          @for (row of (tableData$ | async) ?? []; track row.name) {
            <tr
              z-table-row
              [ngClass]="{
                'pac-widget-accounting-statement__underline': row.isUnderline,
                'pac-widget-accounting-statement__italic': row.isItalic
              }"
            >
              @if (columnConfig.hasGroup) {
                <td z-table-cell>{{ row.groupName }}</td>
              }
              <td z-table-cell [class.text-right]="row.isItalic">{{ row.name }}</td>
              @for (col of columnConfig.columns; track col.name) {
                <td z-table-cell>
                  @if (col.isRatio) {
                    <span
                      [semanticColor]="
                        row.reverseSemanticColor || col.reverseSemanticColor ? -row.data[col.name] : row.data[col.name]
                      "
                    >{{ row.data[col.name] * 100 | number: col.digitsInfo }}%</span>
                  }
                  @if (!col.isRatio) {
                    @if (!IsNil(row.data?.[col.name])) {
                      <span>{{
                        row.data[col.name] / (options.denominator || 1) | number: col.digitsInfo || options?.digitsInfo
                      }}</span>
                    }
                    @if (IsNil(row.data?.[col.name])) {
                      <span class="empty">-</span>
                    }
                  }
                </td>
              }
            </tr>
          }
        </tbody>
      </table>
      }
    </div>

    @if (error$ | async; as error) {
      <div
        class="ngm-card-error absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center backdrop-blur-md bg-white/10"
        >
        <span class="text-2xl font-notoColorEmoji">🐞</span>
        <div class="overflow-auto whitespace-pre-wrap">
          {{ error }}
        </div>
      </div>
    }

    <ng-template #filtersMenu>
      <div z-menu-content class="pac-widget__slicer-menu">
        <ngm-slicers
          inline
          editable
          [slicers]="selectOptions$ | async"
          [dataSettings]="dataSettings$ | async"
          [limit]="5"
          (valueChange)="setSelectOptions($event)"
          (click)="$event.stopPropagation()"
        ></ngm-slicers>
      </div>
    </ng-template>

    @if (placeholder$ | async) {
      <div
        class="ngm-story-widget__placeholder absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center"
        >
        <pac-placeholder-add></pac-placeholder-add>
        <span class="ngm-story-widget__placeholder-title">{{
          'Story.Widgets.AccountingStatement.Title' | translate: { Default: 'Accounting Statement' }
        }}</span>
      </div>
    }