<form [formGroup]="formGroup">
  <fieldset class="c8y-fieldset">
    <legend>{{ 'Decimal places' | translate }}</legend>
    <c8y-form-group>
      <input
        class="form-control"
        name="fractionSize"
        type="number"
        formControlName="fractionSize"
        step="1"
      />
    </c8y-form-group>
  </fieldset>
  @if (formGroup.errors?.noActiveDataPoint) {
    <div
      class="alert alert-info"
      role="alert"
      translate
    >
      At least one data point for the labels or the gauge needs to be selected.
    </div>
  }
</form>

<ng-template #gaugePreview>
  @if (
    (datapointsGauge?.length > 0 && activeDatapointGauge) ||
    (datapointsLabels?.length > 0 && activeDatapointLabel)
  ) {
    <div>
      <c8y-radial-gauge-widget-view [config]="previewConfig"></c8y-radial-gauge-widget-view>
    </div>
  } @else {
    <div class="d-col a-i-start j-c-center">
      <c8y-ui-empty-state
        [icon]="'c8y-data-points'"
        [title]="'No data points selected' | translate"
        [subtitle]="'Select data point to render content' | translate"
        [horizontal]="false"
        data-cy="info-gauge--empty-state-no-data-point-selected"
      >
        <p c8y-guide-docs>
          <small
            translate
            ngNonBindable
          >
            Find out more in the
            <a c8y-guide-href="/docs/cockpit/widgets-collection/#info-gauge">user documentation</a>.
          </small>
        </p>
      </c8y-ui-empty-state>
    </div>
  }
</ng-template>