<form [formGroup]="formGroup">
  <fieldset class="c8y-fieldset">
    <legend>{{ 'Formatting' | translate }}</legend>
    <c8y-form-group class="form-group-sm">
      <label
        [title]="'Number of decimal places' | translate"
        translate
      >
        Number of decimal places
      </label>
      <input
        class="form-control"
        name="numberOfDecimalPlaces"
        type="number"
        formControlName="numberOfDecimalPlaces"
        [placeholder]="'e.g. {{ example }}' | translate: { example: 1 }"
      />
      <c8y-messages
        [show]="
          formGroup.controls?.numberOfDecimalPlaces?.touched &&
          formGroup?.controls?.numberOfDecimalPlaces?.errors
        "
      ></c8y-messages>
    </c8y-form-group>
    <c8y-form-group class="form-group-sm">
      <label>
        {{ 'Data point legend display' | translate }}
      </label>
      <div
        class="c8y-select-wrapper"
        [formGroup]="formGroup"
      >
        <select
          class="form-control"
          [title]="'Data point legend display' | translate"
          id="dataPointLegendDisplay"
          formControlName="dataPointLegendDisplay"
        >
          @for (option of legendDisplayOptions; track option) {
            <option [ngValue]="option.value">
              {{ option.label | translate }}
            </option>
          }
        </select>
      </div>
    </c8y-form-group>
  </fieldset>

  <fieldset class="c8y-fieldset">
    <legend>{{ 'Display options' | translate }}</legend>
    <fieldset class="c8y-fieldset">
      <legend>{{ 'Axis' | translate }}</legend>
      <c8y-form-group class="m-b-8 form-group-sm">
        <label
          class="c8y-checkbox"
          [title]="'Y-axis helper lines' | translate"
        >
          <input
            name="yAxisSplitLines"
            type="checkbox"
            formControlName="yAxisSplitLines"
          />
          <span></span>
          <span translate>Y-axis helper lines</span>
        </label>
        <label
          class="c8y-checkbox"
          [title]="'X-axis helper lines' | translate"
        >
          <input
            name="xAxisSplitLines"
            type="checkbox"
            formControlName="xAxisSplitLines"
          />
          <span></span>
          <span translate>X-axis helper lines</span>
        </label>
        <label
          class="c8y-checkbox"
          [title]="'Merge matching data points into single axis' | translate"
        >
          <input
            name="mergeMatchingDatapoints"
            type="checkbox"
            formControlName="mergeMatchingDatapoints"
          />
          <span></span>
          <span translate>Merge matching data points into single axis</span>
          <button
            class="btn-help"
            [attr.aria-label]="
              'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'
                | translate
            "
            [popover]="
              'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'
                | translate
            "
            triggers="focus"
            container="body"
            type="button"
            (click)="$event.stopPropagation()"
            [adaptivePosition]="false"
          ></button>
        </label>
        <label
          class="c8y-checkbox"
          [title]="'Force merge all data points into single axis' | translate"
        >
          <input
            name="forceMergeDatapoints"
            type="checkbox"
            formControlName="forceMergeDatapoints"
          />
          <span></span>
          <span translate>Force merge all data points into a single axis</span>
          <button
            class="btn-help"
            [attr.aria-label]="
              'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\'s recommended to use this option for data points with similar values.'
                | translate
            "
            [popover]="
              'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\'s recommended to use this option for data points with similar values.'
                | translate
            "
            triggers="focus"
            container="body"
            type="button"
            (click)="$event.stopPropagation()"
            [adaptivePosition]="false"
          ></button>
        </label>
        <label
          class="c8y-checkbox"
          [title]="'Set Y-axis start to 0' | translate"
        >
          <input
            name="setYaxisStartToZero"
            type="checkbox"
            formControlName="setYaxisStartToZero"
          />
          <span></span>
          <span translate>Set Y-axis start to 0</span>
          <button
            class="btn-help"
            [attr.aria-label]="
              'Sets the Y-axis minimum to 0 for all data points with positive values. If any data point includes negative values, the axis may still extend below 0. Explicitly configured minimum and maximum values take precedence over this option.'
                | translate
            "
            [popover]="
              'Sets the Y-axis minimum to 0 for all data points with positive values. If any data point includes negative values, the axis may still extend below 0. Explicitly configured minimum and maximum values take precedence over this option.'
                | translate
            "
            triggers="focus"
            container="body"
            type="button"
            (click)="$event.stopPropagation()"
            [adaptivePosition]="false"
          ></button>
        </label>
      </c8y-form-group>
    </fieldset>
    <fieldset class="c8y-fieldset">
      <legend>{{ 'Alarms & events' | translate }}</legend>
      <c8y-form-group class="m-b-8 form-group-sm">
        <label
          class="c8y-checkbox"
          [title]="'Show vertical line on every occurrence' | translate"
        >
          <input
            name="displayMarkedLine"
            type="checkbox"
            formControlName="displayMarkedLine"
          />
          <span></span>
          <span translate>Show vertical line on every occurrence</span>
        </label>
        <label
          class="c8y-checkbox"
          [title]="'Show icon when triggered' | translate"
        >
          <input
            name="displayMarkedPoint"
            type="checkbox"
            formControlName="displayMarkedPoint"
          />
          <span></span>
          <span translate>Show icon when triggered</span>
          @if (alarmsOrEventsHaveNoMatchingDps) {
            <button
              class="btn-clean m-l-8"
              [attr.aria-label]="
                'Some alarms or events have no matching data points. No icons will be shown for them.'
                  | translate
              "
              [tooltip]="
                'Some alarms or events have no matching data points. No icons will be shown for them.'
                  | translate
              "
              container="body"
              type="button"
              (click)="$event.stopPropagation()"
              [adaptivePosition]="false"
            >
              <i
                class="text-warning"
                c8yIcon="exclamation-triangle"
              ></i>
            </button>
          }
        </label>
      </c8y-form-group>
    </fieldset>
    <fieldset class="c8y-fieldset">
      <legend>{{ 'Chart' | translate }}</legend>
      <c8y-form-group class="m-b-8 form-group-sm">
        <label
          class="c8y-checkbox"
          [title]="'Show labels and units' | translate"
        >
          <input
            name="showLabelAndUnit"
            type="checkbox"
            formControlName="showLabelAndUnit"
          />
          <span></span>
          <span translate>Display labels and units on Y-axis</span>
        </label>
        <label
          class="c8y-checkbox"
          [title]="'Show slider' | translate"
        >
          <input
            name="showSlider"
            type="checkbox"
            formControlName="showSlider"
          />
          <span></span>
          <span translate>Show slider</span>
        </label>
        <label
          class="c8y-checkbox"
          [title]="'Show smooth lines' | translate"
        >
          <input
            name="smoothLines"
            type="checkbox"
            formControlName="smoothLines"
          />
          <span></span>
          <span translate>Show smooth lines</span>
        </label>
      </c8y-form-group>
    </fieldset>
  </fieldset>
</form>

<ng-template #dataPointsGraphPreview>
  @if (config?.displayMode && config.displayMode !== 'dashboard') {
    <c8y-local-controls
      [controls]="widgetControls"
      [displayMode]="config.displayMode"
      [config]="previewContextConfig()"
      [disabled]="true"
    ></c8y-local-controls>
  }

  @if (activeDatapointsExists) {
    <c8y-charts
      class="d-block p-relative"
      [config]="config"
      [alerts]="alerts"
      [chartViewContext]="chartViewContext"
      (timeRangeChangeOnRealtime)="updateTimeRangeOnRealtime($event)"
      (configChangeOnZoomOut)="updateDashboardTimeContext($event)"
      (updateAggregatedSliderDatapoint)="updateAggregatedSliderDatapoint($event)"
    ></c8y-charts>
  }

  @if (!activeDatapointsExists) {
    <c8y-ui-empty-state
      class="d-block m-t-24"
      [icon]="'search'"
      [title]="'No data points selected' | translate"
      [subtitle]="'Select data point to render content' | translate"
      data-cy="datapoints-graph-list--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/#data-point-graph">
            user documentation</a
          >.
        </small>
      </p>
    </c8y-ui-empty-state>
  }
</ng-template>