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

<DataForm
  @dc={{dc}}
  @nspace={{nspace}}
  @partition={{partition}}
  @type="kv"
  @label="key"
  @autofill={{autofill}}
  @item={{item}}
  @src={{src}}
  @onchange={{action "change"}}
  @onsubmit={{action onsubmit}}
  as |api|
>
  <BlockSlot @name="content">
{{#let (cannot 'write kv' item=api.data) as |disabld|}}
    <form onsubmit={{action api.submit}}>
      <fieldset
        {{disabled (or disabld api.disabled)}}
      >
{{#if api.isCreate}}
        <label data-test-kv-key class="type-text{{if api.data.error.Key ' has-error'}}">
            <span>Key or folder</span>
            <input autofocus="autofocus" type="text" value={{left-trim api.data.Key parent}} name="additional" oninput={{action api.change}} placeholder="Key or folder" />
            <em>To create a folder, end a key with <code>/</code></em>
        </label>
{{/if}}
{{#if (or (eq (left-trim api.data.Key parent) '') (not-eq (last api.data.Key) '/'))}}
        <div>
            <div class="type-toggle">
              <label>
                  <input
                    type="checkbox"
                    name="json"
                    {{disabled false}}
                    checked={{if json 'checked'}}
                    onchange={{action api.change}}
                  />
                  <span>Code</span>
              </label>
            </div>

            <label for="" class="type-text{{if api.data.error.Value ' has-error'}}">
{{#if json}}
                <CodeEditor
                  @name="value"
                  @readonly={{or disabld api.disabled}}
                  @value={{atob api.data.Value}}
                  @onkeyup={{action api.change "value"}}
                >
                  <:label>Value</:label>
                </CodeEditor>
{{else}}
                <span>Value</span>
                <textarea
                  {{disabled (or disabld api.disabled)}}
                  autofocus={{not api.isCreate}}
                  name="value"
                  oninput={{action api.change}}>{{atob api.data.Value}}</textarea>
{{/if}}
            </label>
        </div>
{{/if}}
      </fieldset>
      <Hds::ButtonSet>
        {{#if api.isCreate}}
          {{#if (not disabld)}}
            <Hds::Button
              @text='Save'
              type='submit'
              disabled={{or api.data.isPristine api.data.isInvalid api.disabled}}
            />
          {{/if}}

          <Hds::Button
            @text='Cancel'
            @color='secondary'
            type='reset'
            disabled={{api.disabled}}
            onclick={{action oncancel api.data}}
          />
        {{else}}
          {{#if (not disabld)}}
            <Hds::Button
              @text='Save'
              type='submit'
              disabled={{or api.data.isInvalid api.disabled}}
            />
          {{/if}}
          <Hds::Button
            @text='Cancel'
            @color='secondary'
            type='reset'
            disabled={{api.disabled}}
            onclick={{action oncancel api.data}}
          />
          {{#if (not disabld)}}
            <ConfirmationDialog @message="Are you sure you want to delete this key?">
              <BlockSlot @name="action" as |confirm|>
                <Hds::Button
                  @text='Delete'
                  @color='critical'
                  data-test-delete
                  disabled={{api.disabled}}
                  {{on 'click' (action confirm api.delete)}}
                />
              </BlockSlot>
              <BlockSlot @name="dialog" as |execute cancel message|>
                <DeleteConfirmation @message={{message}} @execute={{execute}} @cancel={{cancel}} />
              </BlockSlot>
            </ConfirmationDialog>
          {{/if}}
        {{/if}}
      </Hds::ButtonSet>
    </form>
{{/let}}
    </BlockSlot>
</DataForm>
