<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"
      data-cy="data-scope--help"
      [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()"
      data-cy="data-scope--export-selector"
    >
      <select
        class="form-control text-12"
        [title]="'Export mode' | translate"
        id="exportMode"
        formControlName="exportMode"
        (ngModelChange)="emitExportTypeChange($event)"
      >
        @for (exportModeValue of EXPORT_MODE_VALUES_ARR; track exportModeValue) {
          <option
            [title]="
              disabledExportModes()[exportModeValue]
                ? ('Full export mode requires READ permission for the Measurements API.'
                  | translate)
                : ''
            "
            [ngValue]="exportModeValue"
            [disabled]="disabledExportModes()[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()"
      data-cy="data-scope--aggregation-selector"
    >
      <select
        class="form-control text-12"
        [title]="'Aggregation' | translate"
        id="aggregation"
        formControlName="aggregation"
        (ngModelChange)="emitAggregationChange($event)"
      >
        @for (aggregationValue of AGGREGATION_VALUES_ARR; track aggregationValue) {
          <option
            [ngValue]="aggregationValue"
            [disabled]="disabledAggregationOptions()[aggregationValue]"
          >
            {{ AGGREGATION_LABELS[aggregationValue] | translate }}
          </option>
        }
      </select>
    </div>
  </c8y-form-group>
</fieldset>