<form [formGroup]="formGroup">
  @if (isInfoGauge) {
    <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>
    }
  } @else {
    <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>

    <fieldset class="c8y-fieldset">
      <legend>{{ 'Presets' | translate }}</legend>
      <c8y-preset-preview
        formControlName="gaugePresetId"
        [ALL_GAUGE_PRESETS]="ALL_GAUGE_PRESETS"
        (onPresetChange)="onRadioPresetChange($event)"
      ></c8y-preset-preview>
    </fieldset>

    <div class="p-16">
      <button
        class="btn btn-default"
        aria-controls="advancedCollapse"
        [attr.aria-expanded]="showAdvancedOptions"
        type="button"
        (click)="showAdvancedOptions = !showAdvancedOptions"
      >
        {{ showAdvancedOptions ? hideAdvancedOptionsLabel : showAdvancedOptionsLabel }}
      </button>
    </div>

    <div
      class="collapse"
      id="advancedCollapse"
      [collapse]="!showAdvancedOptions"
      [isAnimated]="true"
    >
      <div
        class="fit-h"
        style="min-height: 400px"
      >
        <c8y-editor
          [ngModel]="gaugeOptionsString"
          (ngModelChange)="gaugeJSONChange($event)"
          (editorInit)="assignSchema()"
          [ngModelOptions]="{ standalone: true }"
          monacoEditorMarkerValidator
        ></c8y-editor>
      </div>
    </div>
  }
</form>

<ng-template #gaugePreview>
  @if (
    (datapointsGauge?.length > 0 && activeDatapointGauge) ||
    (datapointsLabels?.length > 0 && activeDatapointLabel)
  ) {
    <div>
      <c8y-info-gauge-widget-view [config]="previewConfig"></c8y-info-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>