<app-configuration-form
  [form]="form"
  [headerHeight]="headerHeight()"
  (cancel)="cancel.emit()"
  (triggerSubmit)="submit()">
  <ng-container [formGroup]="configForm">
    @for (rule of rules; track rule) {
      <div class="form-entry">
        <label [for]="'rule' + $index">{{ 'retrieval-agents.workflow.sidebar.rules.rule-label' | translate }}</label>
        <div class="entry-with-button">
          <nsi-expandable-textarea
            [id]="'rule' + $index"
            [formControl]="rule"
            rows="2"
            resizable=""
            externalLabel=""
            modalTitle="retrieval-agents.workflow.sidebar.rules.rule-label"></nsi-expandable-textarea>
          @if (rules.length > 1) {
            <pa-button
              icon="trash"
              size="small"
              aspect="basic"
              (click)="removeRule($index)">
              {{ 'retrieval-agents.workflow.sidebar.rules.delete-rule' | translate }}
            </pa-button>
          }
        </div>
      </div>
    }
    <pa-button
      aspect="basic"
      size="small"
      (click)="addRule()">
      {{ 'retrieval-agents.workflow.sidebar.rules.add-rule' | translate }}
    </pa-button>
  </ng-container>
</app-configuration-form>
