{{#if label}}
  <label class="title is-4" data-test-kv-label="true">
    {{label}}
    {{#if helpText}}
      <InfoTooltip>
        {{helpText}}
      </InfoTooltip>
    {{/if}}
  </label>
{{/if}}
{{#each kvData as |row index|}}
  <div class="columns is-variable is-1" data-test-kv-row>
    <div class="column is-one-quarter">
      <Input data-test-kv-key={{true}} @value={{row.name}} placeholder="key" @change={{action "updateRow" row index}} class="input" />
    </div>
    <div class="column">
      <Textarea data-test-kv-value={{true}} @name={{row.name}} @change={{action "updateRow" row index}} @value={{row.value}} @wrap="off" class="input" placeholder="value" @rows={{1}} />
    </div>
    <div class="column is-narrow">
      {{#if (eq kvData.length (inc index))}}
        <button type="button" {{action "addRow"}} class="button is-outlined is-primary" data-test-kv-add-row=true>
          Add
        </button>
      {{else}}
        <button
          class="button has-text-grey is-expanded is-icon"
          type="button"
          {{action "deleteRow" row index}}
          aria-label="Delete row"
          data-test-kv-delete-row
        >
        <Icon @glyph="trash" @size="l" />
        </button>
      {{/if}}
    </div>
  </div>
{{/each}}
{{#if kvHasDuplicateKeys}}
  <AlertBanner
    @type="warning"
    @message="More than one key shares the same name. Please be sure to have unique key names or some data may be lost when saving."
    @class="is-marginless"
    data-test-duplicate-error-warnings
  />
{{/if}}