{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: MPL-2.0
}}

<tr data-test-attributes-section>
  {{#if this.editing}}
    <td colspan="2">
      <MetadataEditor
        @kv={{hash key=this.prefixedKey value=this.value}}
        @onEdit={{this.onEdit}}
        @constantKey={{true}}
        @autofocusValue={{true}}
        >
        <button
          data-test-update-metadata
          disabled={{or (not @key) (not @value)}}
          type="submit"
          class="button is-primary"
          {{on "click" (queue
            (action @onKVSave (hash key=this.prefixedKey value=this.value))
            (action (mut this.editing) false)
          )}}
        >
          Update {{this.prefixedKey}}
        </button>
        <button
          data-test-delete-metadata
          type="button"
          class="button is-danger"
          {{on "click" (queue
            (action @onKVSave (hash key=this.prefixedKey value=null))
            (action (mut this.editing) false)
          )}}
        >
          Delete Property
        </button>
        <button
          data-test-cancel-metadata
          type="button"
          class="button"
          {{on "click" 
            (queue
              (action (mut this.editing) false)
              (action (mut this.value) @value)
            )
          }}
        >
          Cancel
        </button>
      </MetadataEditor>
    </td>
  {{else}}
    <td data-test-key>
      {{#if @prefix}}<span class="is-faded" data-test-prefix>{{@prefix}}.</span>{{/if}}
      {{~@key}}
    </td>
    <td title="{{@value}}">
      <CopyButton
        @inset={{true}}
        @compact={{true}}
        @clipboardText={{@value}}
      />
      <span data-test-value>{{@value}}</span>
      {{#if @editable}}
      <button class="button is-light is-compact edit-existing-metadata-button" type="button"
        {{on "click" (action (mut this.editing) true)}}
        
      >Edit</button>
      {{/if}}
    </td>
  {{/if}}
</tr>