<div class="modal-header separator">
  <h4 id="modal-title" class="text-medium">{{ title | translate }}</h4>
</div>
<div class="modal-inner-scroll modal-inner-scroll--fixed" id="modal-body">
  <c8y-datapoint-selector
    [contextAsset]="contextAsset"
    [guessDatapointUnit]="guessDatapointUnit"
    [allowDatapointsFromMultipleAssets]="allowDatapointsFromMultipleAssets"
    [allowChangingContext]="allowChangingContext"
    [defaultActiveState]="defaultActiveState"
    [allowSearch]="allowSearch"
    [hideSelection]="finishWithFirstSelection"
    [ignoreDatapointTemplates]="ignoreDatapointTemplates"
    [datapointTemplatesOnly]="datapointTemplatesOnly"
    [itemsEditable]="itemsEditable"
    [ngModel]="selectedDatapoints"
    (ngModelChange)="selectionChange($event)"
  ></c8y-datapoint-selector>
</div>
<div class="modal-footer">
  <button
    type="button"
    [title]="'Cancel' | translate"
    class="btn btn-default"
    (click)="close()"
    translate
  >
    Cancel
  </button>
  <button
    [title]="saveButtonLabel | translate"
    class="btn btn-primary"
    [disabled]="!selectedDatapoints?.length"
    (click)="saveChanges()"
    *ngIf="!finishWithFirstSelection"
  >
    {{ saveButtonLabel | translate }}
  </button>
</div>