@let hasDifferentUnits = showDifferentUnitsAlert && differentUnits;

<c8y-datapoint-selection-list
  class="bg-inherit"
  [removeTitle]="removeTitle"
  [listTitle]="listTitle"
  [name]="controlName"
  [config]="config"
  [defaultFormOptions]="defaultFormOptions"
  [minActiveCount]="minActiveCount"
  [maxActiveCount]="maxActiveCount"
  [ngModel]="datapoints()"
  (ngModelChange)="onDatapointsChange($event)"
  #dpSelection
  #dpModel="ngModel"
>
  @if (hasDifferentUnits) {
    <div
      class="alert alert-warning m-t-8"
      role="alert"
    >
      {{ differentUnitsMessageError | translate }}
    </div>
  }
</c8y-datapoint-selection-list>

<c8y-widget-config-feedback>
  @let activeCount = activeDatapointsCount();
  @let hasError = dpModel?.errors?.minActiveCount || dpModel?.errors?.maxActiveCount;
  <span
    class="tag chip text-12"
    [class.tag--danger]="hasError"
    [class.tag--info]="!hasError"
  >
    @if (activeCount === 0) {
      {{ 'None selected`data point`' | translate }}
    } @else if (activeCount === 1) {
      {{ '1 data point' | translate }}
    } @else {
      {{ '{{ count }} data points' | translate: { count: activeCount } }}
    }
  </span>

  @let minActiveError = dpModel?.errors?.minActiveCount;
  @let maxActiveError = dpModel?.errors?.maxActiveCount;

  @if ((minActiveError || maxActiveError) && dpModel.touched) {
    <button
      class="btn-clean"
      [attr.aria-label]="
        minActiveError
          ? (dpSelection.minActiveErrorMessage | translate: { minActive: minActiveCount })
          : maxActiveError
            ? (dpSelection.maxActiveErrorMessage | translate: { maxActive: maxActiveCount })
            : null
      "
      [tooltip]="
        minActiveError
          ? (dpSelection.minActiveErrorMessage | translate: { minActive: minActiveCount })
          : maxActiveError
            ? (dpSelection.maxActiveErrorMessage | translate: { maxActive: maxActiveCount })
            : null
      "
      type="button"
      [delay]="500"
    >
      <i
        class="status major"
        [c8yIcon]="'warning'"
      ></i>
    </button>
  }

  @if (hasDifferentUnits) {
    <button
      class="btn-clean"
      [attr.aria-label]="differentUnitsMessageError | translate"
      [tooltip]="differentUnitsMessageError | translate"
      type="button"
      [delay]="500"
    >
      <i
        class="text-warning"
        [c8yIcon]="'warning'"
      ></i>
    </button>
  }
</c8y-widget-config-feedback>