@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) {
      <mat-button-toggle-group displayDensity="compact" ngmAppearance="color" color="primary"
        [(ngModel)]="chartType"  
      >
        @if (_dataSettings()?.chartAnnotation?.chartType) {
          <mat-button-toggle [value]="_dataSettings().chartAnnotation.chartType">
            {{ _dataSettings().chartAnnotation.chartType.name || _dataSettings().chartAnnotation.chartType.type }}
          </mat-button-toggle>
        }
        @for (chartType of chartSettings().chartTypes; track $index) {
          <mat-button-toggle [value]="chartType">
            {{ chartType?.name || chartType?.type }}
          </mat-button-toggle>
        }
      </mat-button-toggle-group>
    }
    </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.AnalyticalCard.DataDownload' | translate: {Default: 'Data Download'} "
        (click)="downloadData()">
        <mat-icon fontSet="material-icons-outlined">file_download</mat-icon>
      </button>
    }
      <!-- screenshot -->
    @if (!options()?.hideScreenshot) {
      <button mat-icon-button displayDensity="cosy" [matTooltip]=" 'Ngm.AnalyticalCard.Screenshot' | translate: {Default: 'Screenshot'} "
        (click)="screenshot()">
        <mat-icon fontSet="material-icons-outlined">photo_camera</mat-icon>
      </button>
    }

      <!-- Refresh & Loading icon -->
      <button mat-icon-button class="ngm-analytical-card__refresh" displayDensity="cosy"
        [matTooltip]=" 'Ngm.AnalyticalCard.Refresh' | translate: {Default: 'Refresh'} "
        [style.visibility]="(isLoading$ | async) ? 'hidden' : 'visible'"
        (click)="refresh()">
        <mat-icon fontSet="material-icons-outlined">refresh</mat-icon>
      </button>
    @if (isLoading$ | async) {
      <mat-spinner class="ngm-analytical-card__loading"
        [diameter]="20"
        [strokeWidth]="1"
      />
    }
    </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()">
  </ngm-breadcrumb-bar>
}

<div class="ngm-card-content">
  <div *ngIf="error$ | async as error" class="ngm-card-error">
    <span class="title-icon text-2xl font-notoColorEmoji">🐞</span>
    <span>
      {{ error }}
    </span>
  </div>

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

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


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

<!-- [hasBackdrop]="false" -->
<mat-menu #contextMenu="matMenu" class="ngm-density__compact">
	<ng-template matMenuContent let-slicers="slicers">

    <button mat-menu-item (click)="onLinkAnalysis(slicers)">
      <mat-icon displayDensity="cosy">add_link</mat-icon>
      {{ 'Ngm.AnalyticalCard.LinkAnalysis' | translate: {Default: "Link Analysis"} }}
    </button>

    <ng-container *ngIf="canDrillLevels$ | async">
      <mat-divider></mat-divider>
      <button mat-menu-item disableRipple disabled>
        {{ 'Ngm.AnalyticalCard.DrillLevel' | translate: {Default: "Drill Level"} }}
      </button>
      <button mat-menu-item *ngFor="let drill of drillLevels$ | async"
        [matMenuTriggerFor]="drillLevelsMenu"
        [matMenuTriggerData]="{slicer: drill.slicer, levels: drill.levels}">
        <mat-icon displayDensity="cosy">format_list_numbered</mat-icon>
        <div class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis">
          {{drill.property.caption || drill.property.name}}:{{drill.slicerCaption}}
        </div>
      </button>
    </ng-container>

    <ng-container *ngIf="canDrillDimensions$ | async">
      <mat-divider></mat-divider>
      <button mat-menu-item disableRipple disabled>
        {{ 'Ngm.AnalyticalCard.DrillDimension' | translate: {Default: "Drill Dimension"} }}
      </button>

      <button mat-menu-item *ngFor="let item of dillSlicers$ | async"
        [matMenuTriggerFor]="drillDimensionsMenu"
        [matMenuTriggerData]="{slicer: item.value}">
        <mat-icon displayDensity="cosy">tag</mat-icon>{{ item.label }}
      </button>

    </ng-container>

    <ng-container *ngIf="dilldown$ | async as slicer">
      <mat-divider></mat-divider>
      <button mat-menu-item  (click)="drillDown(slicer)">
        <mat-icon displayDensity="cosy">arrow_drop_down</mat-icon>
        {{ 'Ngm.AnalyticalCard.DrillDown' | translate: {Default: "Drill Down"} }}
      </button>
    </ng-container>
		
	</ng-template>
</mat-menu>

<mat-menu #drillLevelsMenu="matMenu" class="ngm-density__compact">
  <ng-template matMenuContent let-levels="levels" let-slicer="slicer">
    <button mat-menu-item *ngFor="let item of levels" 
      [disabled]="item.disabled"
      (click)="drillLevel({property: item.property, slicer})">
      <ngm-entity-property [property]="item.property"></ngm-entity-property>
    </button>
  </ng-template>
</mat-menu>

<mat-menu #drillDimensionsMenu="matMenu" class="ngm-density__compact">
  <ng-template matMenuContent let-slicer="slicer">
    <button mat-menu-item *ngFor="let item of drillDimensions$ | async" 
      [disabled]="item.disabled"
      (click)="drill({parent: slicer.dimension, dimension: item.dimension, slicer})">
      <ngm-entity-property [property]="item.property"></ngm-entity-property>
    </button>
  </ng-template>
</mat-menu>