<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 export type from available options:
      </p>
      <p><strong translate>Compact</strong></p>
      <ul class="p-l-16">
        <li translate>Up to 5,000 records per data point or data retention limit</li>
        <li translate>Single merged file for all data</li>
        <li translate>No preview available</li>
        <li translate>Optional data aggregation supported</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 data retention limit</li>
        <li translate>Email delivery if exceeds 50,000 records</li>
        <li translate>Separate files for each data point in ZIP format</li>
        <li translate>Preview 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>