<fieldset class="c8y-fieldset">
    <legend class="d-flex a-i-center">
      {{ 'Data scope' | translate }}
      <button
        class="btn-help"
        [attr.aria-label]="'Help' | translate"
        [popover]="popoverDataScopeTemplate"
        placement="right"
        triggers="focus"
        container="body"
        type="button"
        [adaptivePosition]="true"
      ></button>
      <ng-template #popoverDataScopeTemplate>
        <p
          class="m-b-8"
          translate
        >
          Choose type of an export to generate, the available options are:
        </p>
        <p><strong translate>Compact</strong></p>
        <ul class="p-l-16">
          <li translate>
            Up to 5,000 records per data point, or up to the data retention limit
          </li>
          <li translate>Creates a single merged file containing all the data</li>
          <li translate>Preview is not available</li>
          <li translate>Supports data aggregation (optional)</li>
        </ul>
        <p><strong translate>Full</strong></p>
        <ul class="p-l-16">
          <li translate>
            Up to 1,000,000 records per data point, or up to the data retention limit
          </li>
          <li translate>
            If the export exceeds 50,000 records, the data will be sent via email
          </li>
          <li translate>
            Creates a compressed ZIP file that contains separate data files for each of your
            selected points
          </li>
          <li translate>Preview is available</li>
          <li translate>No data aggregation</li>
        </ul>
      </ng-template>
    </legend>
    <c8y-form-group class="m-b-8">
      <label>
        {{ 'Export mode' | translate }}
      </label>
      <div
        class="c8y-select-wrapper"
        [formGroup]="formGroup"
      >
        <select
          class="form-control text-12"
          [title]="'Export mode' | translate"
          id="exportMode"
          formControlName="exportMode"
          (ngModelChange)="emitExportTypeChange($event)"
        >
          <option
            *ngFor="let exportModeValue of EXPORT_MODE_VALUES_ARR"
            [ngValue]="exportModeValue"
          >
            {{ EXPORT_MODE_LABELS[exportModeValue] | translate }}
          </option>
        </select>
      </div>
    </c8y-form-group>
    <c8y-form-group class="m-b-8">
      <label>
        {{ 'Aggregation' | translate }}
      </label>
      <div
        class="c8y-select-wrapper"
        [formGroup]="formGroup"
      >
        <select
          class="form-control text-12"
          [title]="'Aggregation' | translate"
          id="aggregation"
          formControlName="aggregation"
          (ngModelChange)="emitAggregationChange($event)"
        >
          <option
            *ngFor="let aggregationValue of AGGREGATION_VALUES_ARR"
            [ngValue]="aggregationValue"
            [disabled]="disabledAggregationOptions[aggregationValue]"
          >
            {{ AGGREGATION_LABELS[aggregationValue] | translate }}
          </option>
        </select>
      </div>
    </c8y-form-group>
  </fieldset>