<div class="p-b-16">
  <ng-container *ngIf="hasPermissionToReadAnyMeasurements; else hasNoRoleToReadAnyMeasurements">
    <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-t-24 p-r-16 p-l-16 gap-8 p-b-16 flex-wrap"
      [ngClass]="{ 'separator-bottom': isFullTypeOfExport }"
    >
      <div class="row">
        <div class="col-md-4">
          <c8y-datapoints-export-selector-time-range
            *ngIf="this.hasPermissionToReadAnyMeasurements"
            [formGroup]="formGroup"
            (onDateFromChange)="onDateFromChange($event)"
            (onDateToChange)="onDateToChange($event)"
          ></c8y-datapoints-export-selector-time-range>
        </div>
        <div class="col-md-4">
          <c8y-datapoints-export-selector-data-scope
            *ngIf="this.hasPermissionToReadAnyMeasurements"
            [disabledAggregationOptions]="disabledAggregationOptions"
            [formGroup]="formGroup"
            (onAggregationChange)="onAggregationChange($event)"
            (onExportTypeChange)="onExportTypeChange($event)"
          ></c8y-datapoints-export-selector-data-scope>
        </div>
        <div class="col-md-4">
          <c8y-datapoints-export-selector-file-types
            *ngIf="this.hasPermissionToReadAnyMeasurements"
            [dynamicFilesTypeMetadata]="dynamicFilesTypeMetadata"
            [formGroup]="formGroup"
          ></c8y-datapoints-export-selector-file-types>
        </div>
      </div>
    </div>
    <ng-container
      *ngIf="!isFullTypeOfExport && !hasFetchedDataAnyValuesToExport && !isPreviewLoading"
    >
      <div class="p-t-24 p-r-16 p-l-16 p-b-16 separator-bottom d-flex">
        <div
          class="alert alert-warning center-block"
          role="alert"
          data-cy="file-exporter--no-data-available"
          translate
        >
          No data available.
        </div>
      </div>
    </ng-container>
    <ng-container *ngIf="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"
          [innerHTML]="limitExceededMessage"
        ></div>
      </div>
    </ng-container>
    <ng-container *ngIf="isFullTypeOfExport">
      <c8y-datapoints-export-selector-preview
        *ngIf="this.hasPermissionToReadAnyMeasurements"
        [hasFetchedDataAnyValuesToExport]="hasFetchedDataAnyValuesToExport"
        [isPreviewLoading]="isPreviewLoading"
        [previewTableData]="previewTableData"
      ></c8y-datapoints-export-selector-preview>
    </ng-container>
  </ng-container>
  <ng-template #hasNoRoleToReadAnyMeasurements>
    <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>
  </ng-template>
</div>