@if (showToolbar()) {
  <div class="flex justify-between items-center">
    <span class="title"></span>

    <div class="flex items-center gap-1">
      <button mat-icon-button displayDensity="cosy" class="ngm-menu-trigger opacity-20 group-hover:opacity-100 duration-200"
        [color]="(hasSlicers$ | async) ? 'accent':''"
        [matMenuTriggerFor]="filtersMenu"
        #mt="matMenuTrigger"
        [class.active]="mt.menuOpen"
        [matTooltip]="'Story.Common.Slicers' | translate: {Default: 'Slicers'}"
        matTooltipPosition="above"
        >
        <mat-icon fontSet="material-icons-outlined">filter_alt</mat-icon>
      </button>
    </div>
  </div>
}
@if (error()) {
  <div class="pac-kpi-card__error ngm-card-error relative left-0 top-0 w-full h-full overflow-auto
    flex flex-col justify-center items-center"
  >
    <span class="text-2xl font-notoColorEmoji">🐞</span>
    <div class="whitespace-pre-wrap max-w-full text-red-500">
      {{ error() }}
    </div>
  </div>
} @else {
  <div class="w-full h-full flex flex-col justify-between items-stretch">
    <div class="ngm-kpi--kpi flex-1 flex justify-center items-center">
      @if (options?.icon) {
        <mat-icon>{{options.icon}}</mat-icon>
      }
      
      <ng-content select=".ngm-kpi--icon"></ng-content>

      @if (kpiValue$ | async; as kpiValue) {
        <div class="ngm-kpi--content"
          [class.ngm-kpi__intent]="intent()?.semanticObject"
          (click)="onIntentClick()"
        >
          <ng-container *ngTemplateOutlet="kpi; context: {kpiValue: kpiValue, options: optionsSignal()}"></ng-container>
        </div>
      }
      
      @if (trend$ | async; as trend) {
        <div class="ngm-kpi--trend flex justify-around items-end">
          <div class="ngm-kpi--reference">
            <div class="ngm-kpi--title" [ngStyle]="titleStyles$()">
              {{options?.targetText}}
            </div>
            <ngm-object-number
              [number]="trend.referenceValue"
              [unit]="trend.referenceValueUnit"
              [digitsInfo]="options?.digitsInfo"
              [shortNumber]="options?.shortNumber"
              [locale]="locale"
            />
          </div>

          @if (options?.showDeviation) {
            <div class="ngm-kpi--reference ngm-kpi--deviation">
              <div class="ngm-kpi--title">
                {{options?.deviationText || ('NX.SMART_KPI.DEVIATION_TEXT' | translate)}}
              </div>
              <ngm-object-number
                [number]="trend.deviation"
                unit="%"
                [digitsInfo]="options?.digitsInfo"
                [shortNumber]="false"
                [locale]="locale"
              />
            </div>
          }
          <ng-content select=".ngm-kpi--refs"></ng-content>
        </div>
      }

      @if (isLoading()) {
        <mat-spinner class="ngm-kpi--loading"
          [diameter]="18"
          [strokeWidth]="1"
        ></mat-spinner>
      }
      
    </div>

    @if (additionalDataPoints$ | async; as additionals) {
      <div class="ngm-kpi--additional">
        @for (kpiValue of additionals; track $index) {
          <ng-container *ngTemplateOutlet="kpi; context: {kpiValue: kpiValue, options: optionsSignal()?.additionalDataPoint || optionsSignal()}"></ng-container>
        }
      </div>
    }
  </div>
}

<ng-template #kpi let-kpiValue="kpiValue" let-options="options">
  <div class="ngm-kpi--data-point" [ngClass]="{
    'trend-strong-up': kpiValue.arrow === TrendType.StrongUp,
    'trend-up': kpiValue.arrow === TrendType.Up,
    'trend-sideways': kpiValue.arrow === TrendType.Sideways,
    'trend-down': kpiValue.arrow === TrendType.Down,
    'trend-strong-down': kpiValue.arrow === TrendType.StrongDown
  }">
    <span class="ngm-kpi--title" [ngStyle]="titleStyles$()">{{kpiValue?.Title || options?.valueText}}</span>
    <div class="ngm-kpi--indicator flex">
      @if (kpiValue.arrow) {
        <div class="ngm-kpi--arrow flex justify-center items-end">
          @switch (kpiValue.arrow) {
            @case (TrendType.StrongUp) {
              <mat-icon>north</mat-icon>
            }
            @case (TrendType.Up) {
              <mat-icon>north_east</mat-icon>
            }
            @case (TrendType.Down) {
              <mat-icon>south_east</mat-icon>
            }
            @case (TrendType.StrongDown) {
              <mat-icon>south</mat-icon>
            }
            @default {
              <mat-icon>remove</mat-icon>
            }
          }
        </div>
      }

      <div class="flex flex-col justify-start items-stretch">
        @if (options?.showDeviation) {
          <div class="ngm-kpi--reference ngm-kpi--deviation">
            @if (options?.deviationText) {
              <div class="ngm-kpi--title">
                {{options?.deviationText}}
              </div>
            }
            <ngm-object-number
              [number]="kpiValue.deviation" unit="%"
              [digitsInfo]="options?.digitsInfo"
              [shortNumber]="false"
              [locale]="locale"
            />
          </div>
        }

        <ngm-object-number class="ngm-kpi--value" [ngStyle]="valueStyles()"
          [number]="kpiValue.value"
          [unit]="options?.unit || kpiValue.unit"
          [digitsInfo]="options?.digitsInfo"
          [shortNumber]="options?.shortNumber"
          [unitSemantics]="options?.unitSemantics || kpiValue.unitSemantics"
          [nanPlaceholder]="options?.nanPlaceholder"
          [locale]="locale"
          (click)="onClick($event)"
        />

      </div>

    </div>
    
  </div>
</ng-template>

@if (editableSignal() && showPlaceholder()) {
  <div class="ngm-story-widget__placeholder absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center">
    <pac-kpi-placeholder class="cursor-pointer" (click)="openDesigner()" />
    <span class="ngm-story-widget__placeholder-title">{{ 'Story.Widgets.KPI.Title' | translate: {Default: 'KPI'} }}</span>
  </div>
}



<mat-menu #filtersMenu="matMenu" class="pac-widget__slicer-menu">
  <div class="text-base font-semibold">{{ 'Ngm.Selection.Slicers' | translate: {Default: "Slicers"} }}</div>

  <ngm-slicers class="overflow-hidden" inline editable [slicers]="selectOptions$ | async"
    [dataSettings]="dataSettings$ | async"
    [limit]="5"
    [capacities]="[SlicersCapacity.CombinationSlicer, SlicersCapacity.AdvancedSlicer, SlicersCapacity.Variable]"
    (valueChange)="setSelectOptions($event)"
    (click)="$event.stopPropagation()"
  />
</mat-menu>