<div class="form-entry">
  <div class="label-and-button">
    <label>
      {{ label }}
      @if (required) {
        <span style="color: red">*</span>
      }
    </label>
    <pa-button
      size="small"
      aspect="basic"
      (click)="addKeyValue()">
      Add {{ label || 'Property' }}
    </pa-button>
  </div>
  @for (group of keyValueGroup.controls | keyvalue; track group.key) {
    <div
      class="key-value-pair"
      [formGroup]="getFormGroupFromControl(group.value)">
      <pa-input
        formControlName="key"
        placeholder="Property name">
        Key
      </pa-input>
      <pa-input
        formControlName="value"
        [type]="getValueInputType()"
        [placeholder]="valuePlaceholder">
        Value
      </pa-input>
      <pa-button
        icon="trash"
        aspect="basic"
        size="small"
        (click)="removeKeyValue(group.key)">
        Remove
      </pa-button>
    </div>
  }
</div>
