<form
  class="no-card-context"
  [formGroup]="formGroup"
>
  <fieldset class="c8y-fieldset">
    <legend>{{ 'Decimal places' | translate }}</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>
  <fieldset class="c8y-fieldset">
    <legend translate>Orientation</legend>
    <c8y-form-group>
      <label
        class="c8y-radio radio-inline"
        title="Horizontal"
        aria-label="Horizontal"
      >
        <input
          aria-checked="false"
          name="orientation"
          type="radio"
          value="horizontal"
          formControlName="orientation"
        />
        <span></span>
        <span>Horizontal</span>
      </label>
      <label
        class="c8y-radio radio-inline"
        title="Vertical"
        aria-label="Vertical"
        ,
      >
        <input
          aria-checked="false"
          name="orientation"
          type="radio"
          value="vertical"
          ,
          formControlName="orientation"
        />
        <span></span>
        <span>Vertical</span>
      </label>
    </c8y-form-group>
  </fieldset>
</form>

<ng-template #linearGaugePreview>
  @if (formGroup && formGroup.value) {
    @if (formGroup.value.datapoints?.length > 0 && previewActiveDatapoint) {
      <div style="height: 300px">
        @if (previewConfig) {
          <c8y-linear-gauge-widget-view [config]="previewConfig"></c8y-linear-gauge-widget-view>
        }
      </div>
    } @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="linear-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/#linear-gauge">
                user documentation</a
              >.
            </small>
          </p>
        </c8y-ui-empty-state>
      </div>
    }
  }
</ng-template>