<c8y-modal
  [title]="'Generate export' | translate"
  [labels]="labels"
  [disabled]="!isDownloadEnabled"
  [headerClasses]="'dialog-header'"
  (onDismiss)="dismiss()"
  (onClose)="exportAndDownload()"
>
  <ng-container c8y-modal-title>
    <span [c8yIcon]="'data-export'"></span>
  </ng-container>
  <c8y-datapoints-export-selector-file-exporter
    [exportConfig]="exportConfig"
    (onDownloadButtonStateChange)="changeDownloadButtonState($event)"
    (previewAvailabilityChange)="changePreviewAvailability($event)"
    (previewLoadingChange)="changePreviewLoading($event)"
  ></c8y-datapoints-export-selector-file-exporter>
  @if (isPreviewAvailable) {
    <button
      class="btn btn-default"
      title="{{ 'Show preview' | translate }}"
      type="button"
      c8y-modal-footer
      [disabled]="isPreviewLoading || !isDownloadEnabled"
      (click)="openPreviewModal()"
    >
      <i [c8yIcon]="'eye'"></i>
      {{ 'Show preview' | translate }}
    </button>
  }
</c8y-modal>