@if (showHeader()) {
  <div class="ngm-card-header flex justify-between items-center z-10">
    <div class="ngm-card-header__title">{{ title }}</div>

    <div class="flex-1 flex justify-end items-center">
      <ng-content></ng-content>
    @if (chartSettings()?.chartTypes?.length) {
      <z-toggle-group displayDensity="compact" ngmAppearance="color" color="primary"
        [(ngModel)]="chartType"  
      >
        @if (_dataSettings()?.chartAnnotation?.chartType) {
          <z-toggle-group-item [value]="_dataSettings().chartAnnotation.chartType">
            {{ _dataSettings().chartAnnotation.chartType.name || _dataSettings().chartAnnotation.chartType.type }}
          </z-toggle-group-item>
        }
        @for (chartType of chartSettings().chartTypes; track $index) {
          <z-toggle-group-item [value]="chartType">
            {{ chartType?.name || chartType?.type }}
          </z-toggle-group-item>
        }
      </z-toggle-group>
    }
    </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.AnalyticalCard.DataDownload' | translate: { Default: 'Data Download' }"
          zPosition="top"
          (click)="downloadData()"
        >
          <i class="ri-download-2-line"></i>
        </button>
      }
      <!-- screenshot -->
      @if (!options()?.hideScreenshot) {
        <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.Screenshot' | translate: { Default: 'Screenshot' }"
          zPosition="top"
          (click)="screenshot()"
        >
          <i class="ri-screenshot-2-line"></i>
        </button>
      }

      @if (options()?.showSlicers) {
        <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 w-2 h-2 mr-1 rounded-[2.5px] shadow-md bg-emerald-500 flex 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>
}

@if (breadcrumbs$ | async; as breadcrumbs) {
  <ngm-breadcrumb-bar
    class="shrink-0"
    [displayDensity]="appearance?.displayDensity ?? DisplayDensity.compact"
    [steps]="breadcrumbs"
    (selectedChange)="reselectDrill($event)"
    (close)="clearDrill()"
  />
}

<div class="ngm-card-content relative">
  @if (error$ | async; as error) {
    <div class="ngm-card-error">
      <span class="title-icon text-2xl font-notoColorEmoji">🐞</span>
      <span>
        {{ error }}
      </span>
    </div>
  }

  @if (empty$ | async) {
    <div class="ngm-card-error">
      <span class="title-icon text-2xl font-notoColorEmoji">🛒</span>
      <span>
        {{ 'Ngm.AnalyticalCard.DataEmpty' | translate: { Default: 'Data Empty' } }}
      </span>
    </div>
  }

  @if (!((error$ | async) || (empty$ | async))) {
    <div
      echarts
      class="echarts-chart"
      [options]="options$ | async"
      [theme]="chartSettings()?.theme ?? 'default'"
      (chartInit)="onChartInit($event)"
      (optionsError)="onOptionsError($event)"
    ></div>
  }
</div>

<div
  style="visibility: hidden; position: absolute"
  #cmt="cdkMenuTriggerFor"
  [style.left]="contextMenuPosition.x"
  [style.top]="contextMenuPosition.y"
  [cdkMenuTriggerFor]="contextMenu"
></div>

<!-- [hasBackdrop]="false" -->
<ng-template #contextMenu let-slicers="slicers">
  <div cdkMenu class="cdk-menu__large">
    <button cdkMenuItem (click)="onLinkAnalysis(slicers)">
      <z-icon zSize="default" zType="add_link"></z-icon>
      {{ 'Ngm.AnalyticalCard.LinkAnalysis' | translate: { Default: 'Link Analysis' } }}
    </button>

    @if (canDrillLevels$ | async) {
      <div class="border-b border-solid border-divider-regular my-1"></div>
      <div class="p-2">
        {{ 'Ngm.AnalyticalCard.DrillLevel' | translate: { Default: 'Drill Level' } }}
      </div>

      @for (drill of drillLevels$ | async; track drill) {
        <button
          cdkMenuItem
          [cdkMenuTriggerFor]="drillLevelsMenu"
          [cdkMenuTriggerData]="{ slicer: drill.slicer, levels: drill.levels }"
        >
          <z-icon zSize="default" zType="format_list_numbered"></z-icon>
          <div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis">
            {{ drill.property.caption || drill.property.name }}:{{ drill.slicerCaption }}
          </div>
        </button>
      }
    }

    @if (canDrillDimensions$ | async) {
      <div class="border-b border-solid border-divider-regular my-1"></div>
      <div class="p-2">
        {{ 'Ngm.AnalyticalCard.DrillDimension' | translate: { Default: 'Drill Dimension' } }}
      </div>

      @for (item of dillSlicers$ | async; track item) {
        <button cdkMenuItem [cdkMenuTriggerFor]="drillDimensionsMenu" [cdkMenuTriggerData]="{ slicer: item.value }">
          <z-icon zSize="default" zType="tag"></z-icon>{{ item.label }}
        </button>
      }
    }

    @if (dilldown$ | async; as slicer) {
      <div class="border-b border-solid border-divider-regular my-1"></div>
      <button cdkMenuItem (click)="drillDown(slicer)">
        <z-icon zSize="default" zType="chevron-down"></z-icon>
        {{ 'Ngm.AnalyticalCard.DrillDown' | translate: { Default: 'Drill Down' } }}
      </button>
    }
  </div>
</ng-template>

<ng-template #drillLevelsMenu let-levels="levels" let-slicer="slicer">
  <div cdkMenu class="cdk-menu__medium">
    @for (item of levels; track item) {
      <button
        cdkMenuItem
        [class.text-text-secondary]="item.disabled"
        [disabled]="item.disabled"
        (click)="drillLevel({ property: item.property, slicer })"
      >
        <ngm-entity-property class="w-full" [property]="item.property"></ngm-entity-property>
      </button>
    }
  </div>
</ng-template>

<ng-template #drillDimensionsMenu let-slicer="slicer">
  <div cdkMenu class="cdk-menu__medium">
    @for (item of drillDimensions$ | async; track item) {
      <button
        cdkMenuItem
        [class.text-text-secondary]="item.disabled"
        [disabled]="item.disabled"
        (click)="drill({ parent: slicer.dimension, dimension: item.dimension, slicer })"
      >
        <ngm-entity-property class="w-full" [property]="item.property"></ngm-entity-property>
      </button>
    }
  </div>
</ng-template>

<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)="updateSlicers($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>