<form
  class="fit-h"
  [formGroup]="formGroup"
>
  <div
    class="m-l-16 m-r-16"
    *ngIf="isInfoGauge; else radialGauge"
  >
    <div class="row">
      <div class="col-md-6">
        <c8y-form-group class="p-t-8">
          <label translate>Decimal places</label>
          <input
            class="form-control"
            name="fractionSize"
            type="number"
            formControlName="fractionSize"
            step="1"
          />
          <c8y-messages [show]="formGroup.controls.fractionSize.errors"></c8y-messages>
        </c8y-form-group>
      </div>
      <div class="col-md-6 p-t-8">
        <div
          class="alert alert-info"
          role="alert"
          *ngIf="formGroup.errors?.noActiveDatapoint"
          translate
        >
          At least one data point for the labels or the gauge needs to be selected.
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <c8y-datapoint-selection-list
          class="bg-inherit separator-top p-t-16 d-block"
          listTitle="{{ 'Multiple label and value pairs' | translate }}"
          name="datapoints"
          [defaultFormOptions]="defaultFormOptions"
          [config]="datapointSelectionConfig"
          [minActiveCount]="0"
          formControlName="datapointsLabels"
        ></c8y-datapoint-selection-list>
      </div>
      <div class="col-md-6">
        <c8y-datapoint-selection-list
          class="bg-inherit separator-top p-t-16 d-block"
          listTitle="{{ 'Gauge`display`' | translate }}"
          name="datapoints"
          [defaultFormOptions]="defaultFormOptions"
          [config]="datapointSelectionConfig"
          [minActiveCount]="0"
          [maxActiveCount]="1"
          formControlName="datapointsGauge"
        ></c8y-datapoint-selection-list>
      </div>
    </div>
  </div>

  <ng-template #radialGauge>
    <c8y-datapoint-selection-list
      class="bg-inherit d-block"
      listTitle="{{ 'Data points`display`' | translate }}"
      name="datapoints"
      [defaultFormOptions]="defaultFormOptions"
      [config]="datapointSelectionConfig"
      [minActiveCount]="0"
      [maxActiveCount]="1"
      formControlName="datapointsGauge"
    ></c8y-datapoint-selection-list>

    <c8y-form-group class="p-t-8 p-r-16 p-l-16">
      <label translate>Decimal places</label>
      <input
        class="form-control"
        name="fractionSize"
        type="number"
        formControlName="fractionSize"
        step="1"
      />
      <c8y-messages [show]="formGroup.controls.fractionSize.errors"></c8y-messages>
    </c8y-form-group>

    <div class="form-group p-r-16 p-l-16 m-b-0">
      <legend>
        {{ 'Presets' | translate }}
      </legend>
      <c8y-preset-preview
        formControlName="gaugePresetId"
        [ALL_GAUGE_PRESETS]="ALL_GAUGE_PRESETS"
        (onPresetChange)="onRadioPresetChange($event)"
      ></c8y-preset-preview>
    </div>

    <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>

    <ng-template #radialGaugePreview>
      <div
        *ngIf="
          this.formGroup.value.datapointsGauge.length > 0 && activeDatapointGauge;
          else emptyState
        "
      >
        <!-- Radial Gauge -->
        <c8y-radial-gauge
          class="c8y-radial-gauge"
          *ngIf="activeDatapointGauge | infoGaugeCurrentMeasurement | async as measurement"
          [activeDatapointGauge]="activeDatapointGauge"
          [measurement]="measurement"
          [fractionSize]="formGroup.value.fractionSize"
          [gaugeOptions]="gaugeOptions"
          [selectedPresetId]="formGroup.value.gaugePresetId"
        ></c8y-radial-gauge>
      </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]="'Please select a data point first.' | translate"
            [horizontal]="false"
          ></c8y-ui-empty-state>
        </div>
      </ng-template>
    </ng-template>
  </ng-template>
</form>