<div class="array-string-field">
  <label>
    {{ label }}
    @if (required) {
      <span style="color: red">*</span>
    }
  </label>
  <div [formGroup]="form">
    <div [formArrayName]="arrayName">
      @for (ctrl of array.controls; track ctrl) {
        <div class="array-item">
          <pa-input
            [formControlName]="$index"
            type="text"
            [required]="required"></pa-input>
          <pa-button
            size="small"
            aspect="basic"
            icon="trash"
            (click)="removeField($index)"
            aria-label="Delete">
            {{ 'retrieval-agents.workflow.common-forms.rules.remove' | translate }}
          </pa-button>
        </div>
      }
    </div>
  </div>
  <pa-button
    size="small"
    aspect="basic"
    (click)="addField()">
    + Add
  </pa-button>
</div>
