@if (icon) {
  <div 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-template>
  @if (value || value === 0 || value === null) {
    <div
      class="align-items-center d-flex"
      [ngClass]="position === 'end' ? 'justify-content-end' : ''"
    >
      @if (isNumber || value === null) {
        @if (colorizeSign && !useAbsoluteValue) {
          @if (+value > 0) {
            <div class="mr-1 text-success">+</div>
          }
          @if (+value < 0) {
            <div class="mr-1 text-danger">-</div>
          }
        }
        @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) {
          @if (size === 'medium') {
            <small class="ml-1">
              {{ unit }}
            </small>
          } @else {
            <div class="ml-1">
              {{ unit }}
            </div>
          }
        }
      }
      @if (isString) {
        <div
          class="mb-0 text-truncate value"
          [ngClass]="{
            'font-weight-bold h2': size === 'large',
            h4: size === 'medium'
          }"
        >
          {{ formattedValue }}
        </div>
      }
    </div>
  }

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

  @if (size === 'large') {
    <div class="text-truncate">
      <span class="h6"><ng-container *ngTemplateOutlet="label" /></span>
      @if (subLabel) {
        <span class="text-muted"> {{ subLabel }}</span>
      }
    </div>
  } @else {
    <small class="d-block text-truncate">
      <ng-container *ngTemplateOutlet="label" />
    </small>
  }
</div>
