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