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

<DataForm
  @dc={{@dc}}
  @nspace={{@nspace}}
  @partition={{@partition}}
  @type='kv'
  @label='key'
  @autofill={{@autofill}}
  @item={{@item}}
  @src={{@src}}
  @onchange={{action 'change'}}
  @onsubmit={{action (or @onsubmit this.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) '/'))}}
            <Hds::Layout::Flex @direction='column' as |LF|>

              <LF.Item style='align-self: flex-end;'>
                <Hds::Form::Toggle::Field
                  name='json'
                  checked={{if this.json 'checked'}}
                  {{on 'change' api.change}}
                  as |F|
                >
                  <F.Label>Code</F.Label>
                </Hds::Form::Toggle::Field>
              </LF.Item>
              <label for='' class='type-text{{if api.data.error.Value " has-error"}}'>
                {{#if this.json}}
                  {{#if (or disabld api.disabled)}}
                    <Hds::CodeBlock
                      @language='bash'
                      @value={{atob api.data.Value}}
                      @isStandalone={{false}}
                      @ariaLabel='value'
                      as |CB|
                    >
                      <CB.Title @tag='h2'>Value</CB.Title>
                    </Hds::CodeBlock>
                  {{else}}
                    <Hds::CodeEditor
                      @name='Value'
                      @readonly={{or disabld api.disabled}}
                      @value={{atob api.data.Value}}
                      @onInput={{action api.change 'value'}}
                      @language='yaml'
                      @ariaLabel='value'
                      @hasCopyButton={{true}}
                      @isStandalone={{false}}
                      as |CE|
                    >
                      <CE.Title @tag='h2'>Value</CE.Title>
                    </Hds::CodeEditor>
                  {{/if}}
                {{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>
            </Hds::Layout::Flex>
          {{/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 this.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 this.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)}}
                  />
                </BlockSlot>
                <BlockSlot @name='dialog' as |execute cancel message|>
                  <DeleteConfirmation
                    @message={{message}}
                    @execute={{queue execute api.delete}}
                    @cancel={{cancel}}
                  />
                </BlockSlot>
              </ConfirmationDialog>
            {{/if}}
          {{/if}}
        </Hds::ButtonSet>
      </form>
    {{/let}}
  </BlockSlot>
</DataForm>