<div class="p-l-24 p-r-24">
  @if (formGroup) {
    <form [formGroup]="formGroup">
      <fieldset class="c8y-fieldset">
        <legend>
          {{ 'Decimal places' | translate }}
        </legend>
        <c8y-form-group class="p-t-8">
          <input
            class="form-control"
            name="decimalPlaces"
            type="number"
            formControlName="decimalPlaces"
            step="1"
          />
        </c8y-form-group>
      </fieldset>
    </form>
  }
</div>

<ng-template #datapointsTablePreview>
  @let previewConfig = previewConfig$ | async;

  @if (previewConfig?.datapoints?.length > 0) {
    @if (previewConfig?.displayMode !== 'dashboard') {
      <c8y-local-controls
        [controls]="widgetControls"
        [displayMode]="previewConfig?.displayMode"
        [config]="previewConfig"
        [disabled]="true"
      ></c8y-local-controls>
    }
    <c8y-datapoints-table-view
      [config]="previewConfig"
      [isInPreviewMode]="true"
    ></c8y-datapoints-table-view>
  } @else {
    <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="datapoints-table-list--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/#data-point-table">
              user documentation</a
            >.
          </small>
        </p>
      </c8y-ui-empty-state>
    </div>
  }
</ng-template>