<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>
    <div class="d-flex-md fit-h">
      <div class="col-md-6 inner-scroll p-0 bg-component">
        <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>
      </div>
      <div
        class="col-md-6"
        *ngIf="
          this.formGroup.value.datapointsGauge.length > 0 && activeDatapointGauge;
          else emptyState
        "
      >
        <!-- Radial Gauge -->
        <c8y-radial-gauge
          class="c8y-radial-gauge--square"
          *ngIf="activeDatapointGauge | infoGaugeCurrentMeasurement | async as measurement"
          [activeDatapointGauge]="activeDatapointGauge"
          [measurement]="measurement"
          [fractionSize]="formGroup.value.fractionSize"
          [gaugeOptions]="gaugeOptions"
          [selectedPresetId]="formGroup.value.gaugePresetId"
        ></c8y-radial-gauge>
      </div>
    </div>
  </ng-template>
</form>

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