<div
  class="kpi-widget__container d-flex d-col fit-h fit-w a-i-center j-c-center"
  *ngIf="state$ | async as lastState; else noMeasurementFound"
>
  <div class="d-flex a-i-center j-c-center fit-w">
    <div
      class="m-r-16 flex-no-shrink text-muted"
      [ngClass]="lastState.colorClass"
      *ngIf="config.icon && config.showIcon"
    >
      <i class="icon-32" [c8yIcon]="config.icon"></i>
    </div>
    <div class="text-truncate">
      <span
        class="text-truncate text-medium"
        [ngClass]="lastState.colorClass"
        [ngStyle]="{ 'font-size': (config.fontSize || '36') + 'px' }"
        title="{{
          lastState.colorClass === 'text-danger'
            ? ('Within red range:' | translate)
            : lastState.colorClass === 'text-warning'
            ? ('Within yellow range:' | translate)
            : ''
        }} {{
          lastState.latestMeasurement.value
            | number
              : '1.' +
                  (config.numberOfDecimalPlaces || '0') +
                  '-' +
                  (config.numberOfDecimalPlaces || '0')
        }} {{ lastState.unit || '' }}"
      >
        {{
          lastState.latestMeasurement.value
            | number
              : '1.' +
                  (config.numberOfDecimalPlaces || '0') +
                  '-' +
                  (config.numberOfDecimalPlaces || '0')
        }}
        <small class="text-regular">{{ lastState.unit || '' }}</small>
      </span>
    </div>
    <div
      class="dot dot-info dot-30 m-l-16 flex-no-shrink"
      *ngIf="config?.showTrend && lastState.previousValue as previousValue"
    >
      <i
        class="icon-20"
        [title]="
          ('Previous value' | translate) +
          ': ' +
          (previousValue.value
            | number
              : '1.' +
                  (config.numberOfDecimalPlaces || '0') +
                  '-' +
                  (config.numberOfDecimalPlaces || '0')) +
          ' (' +
          (previousValue.date | date: 'medium') +
          ')'
        "
        c8yIcon="arrow-dotted-up"
        [ngStyle]="{ transform: 'rotate(' + lastState.trend + ')' }"
      ></i>
    </div>
  </div>
  <div class="d-flex j-c-center">
    <p *ngIf="config?.showTimestamp" class="icon-flex text-center text-muted small">
      <i c8yIcon="calendar"></i>
      {{ lastState.latestMeasurement.date | date: 'medium' }}
    </p>
  </div>
</div>

<ng-template #noMeasurementFound>
  <div class="d-flex fit-h fit-w j-c-center a-i-center">
    <c8y-ui-empty-state
      *ngIf="noDataInitiallyInDB"
      class="fit-w"
      [icon]="'line-chart'"
      [title]="'No measurement to display.' | translate"
      [subtitle]="'Waiting for measurements to be created.' | translate"
      [horizontal]="true"
    ></c8y-ui-empty-state>
    <c8y-loading *ngIf="!noDataInitiallyInDB"></c8y-loading>
  </div>
</ng-template>