<fieldset [formGroup]="form" [attr.aria-labelledby]="ariaLabelledBy">
  <div class="aca-rule-options__option" *ngIf="!readOnly || isAsynchronousChecked">
    <mat-checkbox
      formControlName="isAsynchronous"
      (change)="toggleErrorScriptDropdown($event)"
      class="aca-rule-options__checkbox"
      data-automation-id="rule-option-checkbox-asynchronous">
      {{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.IS_ASYNCHRONOUS' | translate }}
    </mat-checkbox>

    <mat-form-field
      data-automation-id="rule-option-form-field-errorScript"
      class="aca-rule-options__error-script-dropdown"
      [ngClass]="{ 'aca-hide-error-script-dropdown': hideErrorScriptDropdown }">
      <mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.ERROR_SCRIPT' | translate }}</mat-label>
      <mat-select
        formControlName="errorScript"
        data-automation-id="rule-option-select-errorScript">

        <mat-option class="aca-rule-options__error-script-option" value="">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.NO_SCRIPT' | translate }}</mat-option>
          <mat-option *ngFor="let option of errorScriptOptions"
            class="aca-rule-options__error-script-option"
            [value]="option.value">
            {{ option.label }}
          </mat-option>
      </mat-select>
    </mat-form-field>
  </div>


  <div class="aca-rule-options__option" *ngIf="!readOnly || isInheritableChecked">
    <mat-checkbox
      formControlName="isInheritable"
      class="aca-rule-options__checkbox"
      data-automation-id="rule-option-checkbox-inheritable">
      {{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.IS_INHERITABLE' | translate }}
    </mat-checkbox>
  </div>

  <div class="aca-rule-options__option" *ngIf="!readOnly">
    <mat-checkbox
      formControlName="isDisabled"
      class="aca-rule-options__checkbox"
      data-automation-id="rule-option-checkbox-disabled">
      {{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.DISABLE_RULE' | translate }}
    </mat-checkbox>
  </div>
</fieldset>
