<p class="text-medium">
  <i
    c8yIcon="circle"
    [style.color]="datapoint.color"
  ></i>
  {{ datapoint.label }}
</p>
<p>{{ datapoint.description }}</p>

<ul class="list-unstyled small p-t-16">
  @for (attribute of attributes; track attribute; let i = $index) {
    @if (datapoint[attribute.key] !== undefined) {
      <li class="p-t-4 p-b-4 d-flex separator-bottom text-nowrap">
        <label class="small m-b-0 m-r-8">
          @if (attribute.labelColor) {
            <i
              c8yIcon="square"
              [style.color]="attribute.labelColor"
            ></i>
          }
          {{ attribute.label | translate }}
        </label>
        @switch (attribute.key) {
          @case ('min') {
            <span class="m-l-auto">{{ datapoint['min'] }} — {{ datapoint['max'] }}</span>
          }
          @case ('yellowRangeMin') {
            <span class="m-l-auto">
              {{ datapoint['yellowRangeMin'] }} — {{ datapoint['yellowRangeMax'] }}
            </span>
          }
          @case ('redRangeMin') {
            <span class="m-l-auto">
              {{ datapoint['redRangeMin'] }} — {{ datapoint['redRangeMax'] }}
            </span>
          }
          @default {
            <span class="m-l-auto">
              {{ datapoint[attribute.key] }}
            </span>
          }
        }
      </li>
    }
  }
</ul>