@if (formGroup) {
  <div [formGroup]="formGroup">
    <fieldset class="c8y-fieldset">
      <legend>{{ 'Pie chart options' | translate }}</legend>
      <div
        class="d-flex flex-column gap-8 form-group-sm p-b-8"
        formGroupName="pieChartOptions"
      >
        <label class="c8y-checkbox">
          <input
            type="checkbox"
            formControlName="showLabels"
          />
          <span></span>
          <span>
            {{ 'Show labels' | translate }}
          </span>
        </label>
        <label class="c8y-checkbox">
          <input
            type="checkbox"
            formControlName="showLegend"
          />
          <span></span>
          <span>
            {{ 'Show legend' | translate }}
          </span>
        </label>
        <label class="c8y-checkbox">
          <input
            type="checkbox"
            formControlName="showTooltips"
          />
          <span></span>
          <span>
            {{ 'Show tooltips' | translate }}
          </span>
        </label>
      </div>
    </fieldset>
  </div>

  <ng-template #pieChartPreview>
    @if (config.datapoints?.length > 0) {
      <c8y-pie-chart
        class="w-100 h-100"
        [config]="{
          datapoints: config.datapoints,
          pieChartOptions: {
            showLabels: formGroup.value.pieChartOptions.showLabels,
            showLegend: formGroup.value.pieChartOptions.showLegend,
            showTooltips: formGroup.value.pieChartOptions.showTooltips
          }
        }"
      ></c8y-pie-chart>
    } @else {
      <div class="col-md-6 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="kpi-widget--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/#kpi">user documentation</a>.
            </small>
          </p>
        </c8y-ui-empty-state>
      </div>
    }
  </ng-template>
}