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

<div ...attributes>
  {{#if this.getShowToolbar}}
    <div data-test-component="json-editor-toolbar">
      <Toolbar>
        <label class="has-text-weight-bold" data-test-component="json-editor-title">
          {{@title}}
          {{#if @subTitle}}
            <span class="is-size-9 is-lowercase has-text-grey">({{@subTitle}})</span>
          {{/if}}
        </label>
        <ToolbarActions>
          {{yield}}
          {{#if @example}}
            <button
              type="button"
              class="toolbar-link"
              disabled={{not @value}}
              {{on "click" this.restoreExample}}
              data-test-restore-example
            >
              Restore example
              <Icon @name="reload" />
            </button>
          {{/if}}
          {{#if (and @allowObscure @readOnly)}}
            {{! For safety we only use obscured values in readonly mode }}
            <div>
              <Toggle
                @name="revealValues"
                @checked={{this.revealValues}}
                @size="small"
                @onChange={{fn (mut this.revealValues)}}
              >
                <span class="has-text-grey">Reveal values</span>
              </Toggle>
            </div>
          {{/if}}
          <div class="toolbar-separator"></div>
          <CopyButton
            class="button is-transparent"
            @clipboardText={{@value}}
            @buttonType="button"
            @success={{action (set-flash-message "Data copied!")}}
          >
            <Icon @name="clipboard-copy" aria-label="Copy" />
          </CopyButton>
        </ToolbarActions>
      </Toolbar>
    </div>
  {{/if}}
  <div
    {{code-mirror
      content=(if this.showObfuscatedData this.obfuscatedData (or @value @example))
      extraKeys=@extraKeys
      gutters=@gutters
      lineNumbers=(if @readOnly false true)
      mode=@mode
      readOnly=@readOnly
      theme=@theme
      viewportMarg=@viewportMargin
      onSetup=this.onSetup
      onUpdate=this.onUpdate
      onFocus=this.onFocus
    }}
    class={{if @readOnly "readonly-codemirror"}}
    data-test-component="code-mirror-modifier"
  ></div>

  {{#if @helpText}}
    <div class="box is-shadowless is-fullwidth has-short-padding">
      <p class="sub-text">{{@helpText}}</p>
    </div>
  {{/if}}
</div>