<div class="p-b-16">
  @if (isCheckingPermissions) {
    <div class="p-t-24 p-r-16 p-l-16 p-b-16 d-flex j-c-center">
      <c8y-loading></c8y-loading>
    </div>
  } @else if (hasPermissionToReadAnyMeasurements) {
    <div class="p-16 text-center separator-bottom sticky-top bg-component">
      <p class="text-medium text-16">
        {{ 'Configure export' | translate }}
      </p>
    </div>
    <div
      class="p-r-24 p-l-24 gap-8 p-b-16"
      [class.separator-bottom]="isFullTypeOfExport"
    >
      <c8y-datapoints-export-selector-time-range
        [formGroup]="formGroup"
        (onDateFromChange)="onDateFromChange($event)"
        (onDateToChange)="onDateToChange($event)"
      ></c8y-datapoints-export-selector-time-range>
      @if (isDataScopeVisible) {
        <c8y-datapoints-export-selector-data-scope
          [disabledAggregationOptions]="disabledAggregationOptions"
          [formGroup]="formGroup"
          [disabledExportModes]="disabledExportModes"
          (onAggregationChange)="onAggregationChange($event)"
          (onExportTypeChange)="onExportTypeChange($event)"
        ></c8y-datapoints-export-selector-data-scope>
      }
      <c8y-datapoints-export-selector-file-types
        [dynamicFilesTypeMetadata]="dynamicFilesTypeMetadata"
        [formGroup]="formGroup"
      ></c8y-datapoints-export-selector-file-types>
    </div>
    @if (
      !isFullTypeOfExport &&
      !hasFetchedDataAnyValuesToExport &&
      !isPreviewLoading &&
      !isListTypeOfExport
    ) {
      <div class="p-t-24 p-r-16 p-l-16 p-b-16 d-flex">
        <div
          class="alert alert-warning center-block"
          role="alert"
          data-cy="file-exporter--no-data-available"
          translate
        >
          No data available.
        </div>
      </div>
    }
    @if (datapointsExceedingBrowserDownloadLimit.length > 0) {
      <div class="p-t-24 p-r-16 p-l-16 p-b-16 separator-bottom d-flex">
        <div
          [class]="
            hasNoExportableData
              ? 'alert alert-warning center-block'
              : 'alert alert-info center-block'
          "
          role="alert"
          [attr.data-cy]="
            hasNoExportableData
              ? 'file-exporter--over-one-million-message'
              : 'file-exporter--over-50k-message'
          "
          [innerHTML]="limitExceededMessage"
        ></div>
      </div>
    }
  } @else {
    <div class="p-t-24 p-r-16 p-l-16 p-b-16 d-flex">
      <div
        class="alert alert-info center-block"
        role="alert"
        translate
      >
        <p>To export data, you must meet at least one of these criteria:</p>
        <ul>
          <li>
            Have
            <b>READ permission for "Measurements" permission type</b>
            (either as a global role or for the specific source)
          </li>
          <li>
            Be the
            <b>owner of the source</b>
            you want to export data from
          </li>
        </ul>
        <p>Don't meet these requirements? Contact your system administrator for assistance.</p>
      </div>
    </div>
  }
</div>