<form [formGroup]="formGroup">
  <fieldset class="c8y-fieldset">
    <legend>{{ 'Layout' | translate }}</legend>
    <div class="d-flex a-i-center gap-8">
      <div class="form-group form-group-sm m-b-24">
        <label translate>Icon</label>
        <c8y-icon-selector-wrapper
          [iconSize]="16"
          name="icon"
          formControlName="icon"
        ></c8y-icon-selector-wrapper>
      </div>
      <c8y-form-group class="form-group-sm m-b-24 flex-grow">
        <label
          [title]="'Font size of measurement value (px)' | translate"
          translate
        >
          Font size of measurement value (px)
        </label>
        <input
          class="form-control"
          name="fontSize"
          type="number"
          formControlName="fontSize"
          [placeholder]="'e.g. {{ example }}' | translate: { example: 36 }"
        />
        <c8y-messages [show]="formGroup.controls?.fontSize?.errors"></c8y-messages>
      </c8y-form-group>
    </div>
  </fieldset>

  <fieldset class="c8y-fieldset">
    <legend>{{ 'Display' | translate }}</legend>
    <div class="d-flex gap-16 flex-wrap p-t-4 p-b-8 m-b-4">
      <c8y-form-group class="m-b-0">
        <label
          class="c8y-checkbox"
          [title]="'Show timestamp' | translate"
        >
          <input
            name="showTimestamp"
            type="checkbox"
            formControlName="showTimestamp"
          />
          <span></span>
          <span translate>Show timestamp</span>
        </label>
      </c8y-form-group>

      <c8y-form-group class="m-b-0">
        <label
          class="c8y-checkbox"
          [title]="'Show icon' | translate"
        >
          <input
            name="showIcon"
            type="checkbox"
            formControlName="showIcon"
          />
          <span></span>
          <span translate>Show icon</span>
        </label>
      </c8y-form-group>

      <c8y-form-group class="m-b-0">
        <label
          class="c8y-checkbox"
          [title]="'Show trend icon' | translate"
        >
          <input
            name="showTrend"
            type="checkbox"
            formControlName="showTrend"
          />
          <span></span>
          <span translate>Show trend icon</span>
          <button
            class="btn-help btn-help--sm"
            [attr.aria-label]="'Help' | translate"
            popover="{{
              'Indicates the trend between the last two measurement values.' | translate
            }}"
            placement="top"
            triggers="focus"
            container="body"
            type="button"
          ></button>
        </label>
      </c8y-form-group>
    </div>
  </fieldset>

  <fieldset class="c8y-fieldset">
    <legend translate>Number of decimal places</legend>
    <c8y-form-group class="form-group-sm p-t-4">
      <input
        class="form-control"
        name="numberOfDecimalPlaces"
        type="number"
        formControlName="numberOfDecimalPlaces"
        [placeholder]="'e.g. {{ example }}' | translate: { example: 1 }"
      />
      <c8y-messages [show]="formGroup.controls?.numberOfDecimalPlaces?.errors"></c8y-messages>
    </c8y-form-group>
  </fieldset>
</form>

<ng-template #kpiPreview>
  @if (formGroup && formGroup.value) {
    @if (formGroup.value.datapoints?.length > 0 && previewActiveDatapoint) {
      <div style="height: 300px">
        <c8y-kpi-widget-view [config]="previewConfig"></c8y-kpi-widget-view>
      </div>
    } @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>