{{!
  Copyright IBM Corp. 2016, 2025
  SPDX-License-Identifier: BUSL-1.1
}}

<div class="field" ...attributes {{did-insert this.createKvData @value}}>
  <FormFieldLabel
    @label={{@label}}
    @helpText={{@helpText}}
    @subText={{@subText}}
    class={{@labelClass}}
    data-test-kv-label={{true}}
  />
  {{#if @validationError}}
    <div>
      <AlertInline @type="danger" @message={{@validationError}} class="has-top-padding-s" />
    </div>
  {{/if}}
  {{#if this.kvData}}
    {{#each this.kvData as |row index|}}
      <div class="columns is-variable" data-test-kv-row>
        <div class="column is-one-quarter">
          <Input
            data-test-kv-key={{index}}
            @value={{row.name}}
            placeholder={{this.placeholders.key}}
            {{on "change" (fn this.updateRow row index)}}
            class="input"
          />
        </div>
        <div class="column">
          {{#if (has-block)}}
            {{yield row this.kvData}}
          {{else if @isMasked}}
            <MaskedInput
              data-test-kv-value={{index}}
              @name={{row.name}}
              @onChange={{fn this.updateRow row index}}
              @value={{row.value}}
            />
          {{else}}
            <Textarea
              data-test-kv-value={{index}}
              name={{row.name}}
              class="input {{if @validationError 'has-error-border'}}"
              @value={{row.value}}
              wrap="off"
              placeholder={{this.placeholders.value}}
              rows={{1}}
              {{on "change" (fn this.updateRow row index)}}
              {{on "keyup" this.handleKeyUp}}
            />
          {{/if}}
        </div>
        {{#unless @isSingleRow}}
          <div class="column is-1">
            {{#if (eq this.kvData.length (inc index))}}
              <Hds::Button @text="Add" {{on "click" this.addRow}} data-test-kv-add-row={{index}} @isFullWidth={{true}} />
            {{else}}
              <Hds::Button
                @text="Delete row"
                @color="secondary"
                {{on "click" (fn this.deleteRow row index)}}
                @icon="trash"
                @isIconOnly={{true}}
                @isFullWidth={{true}}
                data-test-kv-delete-row={{index}}
              />
            {{/if}}
          </div>
        {{/unless}}
      </div>
      {{#if (this.showWhitespaceWarning row.name)}}
        <div class="has-bottom-margin-s">
          <AlertInline @type="warning" @message={{this.whitespaceWarning}} data-test-kv-whitespace-warning={{index}} />
        </div>
      {{/if}}
      {{#if (this.showNonStringWarning row.value)}}
        <div class="has-bottom-margin-s">
          <AlertInline @type="warning" @message={{this.nonStringWarning}} data-test-kv-object-warning={{index}} />
        </div>
      {{/if}}
    {{/each}}
    {{#if this.hasDuplicateKeys}}
      <Hds::Alert data-test-duplicate-keys-warning @type="inline" @color="warning" as |A|>
        <A.Title>Warning</A.Title>
        <A.Description>
          More than one key shares the same name. Please be sure to have unique key names or some data may be lost when
          saving.
        </A.Description>
      </Hds::Alert>
    {{/if}}
  {{/if}}
</div>