@if (indicator(); as indicator) {
<div class="pac-item-meta flex-1 flex flex-col overflow-hidden"
  [class.text-gray-500]="loading$ | async"
>
  <div class="pac-item-meta-title text-lg flex justify-start items-center overflow-hidden">
    <span class="flex-1 font-semibold whitespace-nowrap text-ellipsis overflow-hidden">{{ indicator.code }}</span>
    <mat-icon *ngIf="indicator.favour" class="shrink-0" color="accent" displayDensity="compact">star</mat-icon>
  </div>
  <div class="pac-item-meta-description text-base">
    <span>{{ indicator.name }}</span>
  </div>
</div>

@if (!indicator.error) {
  <div class="w-28 h-12 px-2" pacSparkLine [indicator]="indicator" [statisticalType]="statisticalType"></div>
} @else {
  <div class="text-xs w-28 h-12 px-2 whitespace-normal overflow-hidden" [title]="indicator.error">
    {{indicator.error}}
  </div>
}

<div class="w-16 flex flex-col justify-around items-end z-10">
  <div>
    @if (indicator.unit === '%') {
      <span>
        {{ indicator.data?.CURRENT * 100 | number:'0.0-2' | replaceNullWithText:'-' }}
      </span>
    } @else {
      <span>
        {{ indicator.data?.CURRENT | number:'0.0-2' | replaceNullWithText:'-' }}
      </span>
    }
  </div>

  <div (click)="toggleTag($event)" class="pac-indicator__tag bg-gray-500 bg-opacity-25"
    [ngClass]="{'Trend-Up': indicator?.trend === TREND.Up, 'Trend-Down': indicator?.trend === TREND.Down}"
  >
    @switch (tag()) {
      @case(TagEnum.UNIT) {
        <span>
          {{ indicator.unit }}
        </span>
      }
      @case(TagEnum.MOM) {
        <span>
          {{ indicator.data?.MOM | percent:'0.2-2' }}
        </span>
      }
      @case(TagEnum.YOY) {
        <span>
          {{ indicator.data?.YOY | percent:'0.2-2' }}
        </span>
      }
    }
  </div>

</div>
}