<div
  [ngClass]="{
    'range-display--vertical': config.orientation === 'vertical',
    'range-display--compact': display === 'compact',
    'range-display--inline': display === 'inline'
  }"
  attr.data-label="{{ config.unit | datapointUnit }}"
>
  <div
    class="range-display"
    #rangeDisplay
  >
    <div class="range-display__range">
      <div class="range-display__range__unit">
        {{ config.unit | datapointUnit }}
      </div>
      @if (isYellowRangeDisplayed()) {
        <div class="range-display__range__min"></div>
      }
      @if (isRedRangeDisplayed()) {
        <div class="range-display__range__max"></div>
      }
      @if (checkTarget()) {
        <div
          class="range-display__range__target"
          title="{{ 'Target' | translate }}: {{ config.target }} {{ config.unit | datapointUnit }}"
          attr.data-label="{{ config.target }} {{ config.unit | datapointUnit }}"
        ></div>
      }
      <div
        class="range-display__range__current"
        [ngStyle]="{
          display:
            config.current != undefined &&
            config.current >= config.min &&
            config.current <= config.max
              ? 'block'
              : 'none'
        }"
        title="{{ 'Current' | translate }}: {{ config.current }} {{
          config.unit | datapointUnit
        }} | {{ config.time | c8yDate }}"
        #currentRangeElement
        attr.data-label="{{ config.current }} {{ config.unit | datapointUnit }} &#xa;{{
          config.time | c8yDate
        }}"
      ></div>
    </div>
    <div class="range-display__ruler">
      @for (x of [].constructor(10); track trackByIndex($index); let index = $index) {
        <div
          class="range-display__tick"
          attr.data-label="{{ rulerCalc(index) }}"
        ></div>
      }
      <div
        class="range-display__tick"
        attr.data-label="{{ config.max ?? 100 | number }}"
      ></div>
    </div>
  </div>
</div>