<div class="responsive-grid-table-wrapper--450 fit-h">
  <div class="responsive-grid-table responsive-grid-table__body fit-h">
    @if (activeDatapointGauge | infoGaugeCurrentMeasurement | async; as measurement) {
      <div
        class="d-flex p-b-0 p-t-0 p-l-4 p-r-4"
        [class.col-7]="activeLabelDatapoints.length"
        [class.col-12]="!activeLabelDatapoints.length"
      >
        <c8y-radial-gauge
          [activeDatapointGauge]="activeDatapointGauge"
          [measurement]="measurement"
          [fractionSize]="config.fractionSize"
          [gaugeOptions]="config.gaugeOptions"
          [selectedPresetId]="config.selectedPresetId"
        ></c8y-radial-gauge>
        <span
          class="sr-only"
          data-cy="c8y-radial-gauge--value-text"
          >{{ activeDatapointGauge | datapointLabel }}:
          {{ measurement.value | number: fractionSize }}
          {{ activeDatapointGauge.unit || measurement.unit | datapointUnit }}</span
        >
      </div>
    }
    @if (activeLabelDatapoints.length) {
      <div
        class="c8y-radial-gauge--legend p-b-0 p-t-0"
        [class.col-5]="!!activeDatapointGauge"
        [class.col-12]="!activeDatapointGauge"
      >
        <div class="inner-scroll max-height-100 h-auto fit-w p-b-16">
          @for (dp of activeLabelDatapoints; track dp.fragment + dp.series) {
            @if (dp | infoGaugeCurrentMeasurement | async; as m) {
              <div class="d-flex m-b-8 col-xs-12">
                <div class="border-all fit-w d-flex">
                  <div class="p-8">
                    <i
                      class="icon-24 m-t-4 c8y-icon"
                      [c8yIcon]="labelIcons.get(dp.fragment + '-' + dp.series) || 'timeline'"
                      aria-hidden="true"
                    ></i>
                  </div>
                  <div class="p-t-8 p-b-8 p-r-8 flex-grow min-width-0">
                    <p
                      class="text-label-small m-b-4 text-truncate-wrap"
                      title="{{ dp | datapointLabel }}"
                    >
                      {{ dp | datapointLabel }}
                    </p>
                    @if (!m.notFound) {
                      <span class="text-bold text-16">
                        {{ m.value | number: fractionSize }}
                        {{ dp.unit || m.unit | datapointUnit }}
                      </span>
                      <br />
                      <small class="text-muted">
                        {{ m.date | c8yDate: 'mediumDate' }}
                        {{ m.date | c8yDate: 'mediumTime' }}
                      </small>
                    } @else {
                      <span>--</span>
                    }
                  </div>
                </div>
              </div>
            }
          }
        </div>
      </div>
    }
  </div>
</div>