@if (configForm(); as form) {
  <form
    class="no-card-context"
    [formGroup]="form"
  >
    <fieldset class="c8y-fieldset">
      <legend>{{ 'Columns (drag to reorder)' | translate }}</legend>
      <c8y-list-group
        formArrayName="columns"
        cdkDropList
        (cdkDropListDropped)="onColumnDrop($event)"
      >
        @if (columnsFormArray().errors?.atLeastOneColumnMustBeVisible) {
          <div
            class="alert alert-warning m-t-8"
            role="alert"
          >
            {{ 'At least 1 column must be visible.' | translate }}
          </div>
        }

        @for (column of columnsFormArray().controls; track column.value.id; let i = $index) {
          <c8y-li
            class="c8y-list__item__collapse--container-small"
            [formGroupName]="i"
            cdkDrag
          >
            <c8y-li-drag-handle
              [title]="'Click and drag to reorder' | translate"
              cdkDragHandle
            >
              <i c8yIcon="drag-reorder"></i>
            </c8y-li-drag-handle>
            <c8y-li-checkbox
              class="a-s-center p-r-0"
              [displayAsSwitch]="true"
              formControlName="visible"
              (click)="$event.stopPropagation()"
            ></c8y-li-checkbox>
            <c8y-li-body>
              <div class="d-flex a-i-center">
                <span class="text-truncate">{{ column.value.label | translate }}</span>
                @switch (column.value.label) {
                  @case ('Target') {
                    <button
                      class="btn-help"
                      [attr.aria-label]="'Help content' | translate"
                      [popover]="
                        'The Target column shows the value set on the target field of the data point'
                          | translate
                      "
                      placement="right"
                      triggers="focus"
                      container="body"
                      type="button"
                    ></button>
                  }
                  @case ('Diff') {
                    <button
                      class="btn-help"
                      [attr.aria-label]="'Help content' | translate"
                      [popover]="
                        'The Diff column shows the difference between the current value and the target value of the data point'
                          | translate
                      "
                      placement="right"
                      triggers="focus"
                      container="body"
                      type="button"
                    ></button>
                  }
                }
              </div>
            </c8y-li-body>
          </c8y-li>
        }
      </c8y-list-group>
    </fieldset>

    <!-- decimal input -->
    <fieldset class="c8y-fieldset">
      <legend>
        {{ 'Decimal places' | translate }}
      </legend>
      <c8y-form-group class="p-t-8">
        <input
          class="form-control"
          name="decimalPlaces"
          type="number"
          formControlName="decimalPlaces"
          step="1"
          [min]="minDecimalPlaces"
          [max]="maxDecimalPlaces"
        />
      </c8y-form-group>
    </fieldset>
  </form>
}

<ng-template #dataPointsListPreview>
  @let previewConfig = previewConfig$ | async;
  @if (previewConfig && previewConfig.displayMode !== 'dashboard') {
    <c8y-local-controls
      [controls]="controls"
      [displayMode]="previewConfig.displayMode!"
      [config]="previewConfig"
      [disabled]="true"
    ></c8y-local-controls>
  }

  @if (previewConfig) {
    <c8y-datapoints-list
      [config]="previewConfig"
      [isInPreviewMode]="true"
      data-cy="c8y-datapoints-list-widget-config--preview-datapoints-list"
    ></c8y-datapoints-list>
  }
</ng-template>