<form
  class="no-card-context"
  [formGroup]="formGroup"
>
  <c8y-datapoint-selection-list
    class="bg-inherit d-block"
    name="datapoints"
    [defaultFormOptions]="defaultFormOptions"
    [config]="datapointSelectionConfig"
    [minActiveCount]="1"
    [maxActiveCount]="1"
    formControlName="datapoints"
  ></c8y-datapoint-selection-list>
  <fieldset class="c8y-fieldset">
    <legend translate>Decimal places</legend>
    <c8y-form-group class="form-group-sm m-b-16">
      <input
        class="form-control"
        name="fractionSize"
        type="number"
        formControlName="fractionSize"
        step="1"
      />
      <c8y-messages [show]="formGroup.controls.fractionSize.errors"></c8y-messages>
    </c8y-form-group>
  </fieldset>
</form>

<ng-template #linearGaugePreview>
  <ng-container *ngIf="formGroup && formGroup.value">
    <div
      style="height: 300px"
      *ngIf="formGroup.value.datapoints?.length > 0 && previewActiveDatapoint; else emptyState"
    >
      <c8y-linear-gauge-widget-view
        *ngIf="previewConfig"
        [config]="previewConfig"
      ></c8y-linear-gauge-widget-view>
    </div>
    <ng-template #emptyState>
      <div class="col-md-6 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="linear-gauge--empty-state-no-data-point-selected"
        >
          <p c8y-guide-docs>
            <small translate>
              Find out more in the
              <a c8y-guide-href="/docs/cockpit/widgets-collection/#linear-gauge">
                user documentation
              </a>
              .
            </small>
          </p>
        </c8y-ui-empty-state>
      </div>
    </ng-template>
  </ng-container>
</ng-template>