<div *ngIf="icon" class="align-self-center mr-3">
  <ion-icon class="h3 m-0" [name]="icon" />
</div>
<div class="d-flex flex-column w-100">
  <ng-template #label><ng-content></ng-content></ng-template>
  <ng-container *ngIf="value || value === 0 || value === null">
    <div
      class="align-items-center d-flex"
      [ngClass]="position === 'end' ? 'justify-content-end' : ''"
    >
      <ng-container *ngIf="isNumber || value === null">
        <ng-container *ngIf="colorizeSign && !useAbsoluteValue">
          <div *ngIf="+value > 0" class="mr-1 text-success">+</div>
          <div *ngIf="+value < 0" class="mr-1 text-danger">-</div>
        </ng-container>
        @if (isPercent) {
          <div
            class="mb-0 value"
            [ngClass]="{
              'font-weight-bold h2': size === 'large',
              h4: size === 'medium'
            }"
          >
            @if (value === null) {
              <span class="text-monospace text-muted">*****</span>%
            } @else {
              {{ formattedValue }}%
            }
          </div>
        } @else {
          <div
            class="mb-0 value"
            [ngClass]="{
              'font-weight-bold h2': size === 'large',
              h4: size === 'medium'
            }"
          >
            @if (value === null) {
              <span class="text-monospace text-muted">*****</span>
            } @else {
              {{ formattedValue }}
            }
          </div>
        }
        @if (unit) {
          <small *ngIf="size === 'medium'" class="ml-1">
            {{ unit }}
          </small>
          <div *ngIf="size !== 'medium'" class="ml-1">
            {{ unit }}
          </div>
        }
      </ng-container>
      @if (isString) {
        <div
          class="mb-0 text-truncate value"
          [ngClass]="{
            'font-weight-bold h2': size === 'large',
            h4: size === 'medium'
          }"
        >
          {{ formattedValue }}
        </div>
      }
    </div>
  </ng-container>

  @if (value === undefined) {
    <ngx-skeleton-loader
      animation="pulse"
      [theme]="{
        height:
          size === 'large' ? '2rem' : size === 'medium' ? '1.8rem' : '1.5rem',
        width: '5rem'
      }"
    />
  }

  <ng-container>
    <div *ngIf="size === 'large'" class="text-truncate">
      <span class="h6"
        ><ng-container *ngTemplateOutlet="label"></ng-container
      ></span>
      <span *ngIf="subLabel" class="text-muted"> {{ subLabel }}</span>
    </div>
    <small *ngIf="size !== 'large'" class="d-block text-truncate">
      <ng-container *ngTemplateOutlet="label"></ng-container>
    </small>
  </ng-container>
</div>
