{{#if showToolbar }}
    <div data-test-component="json-editor-toolbar">
        <Toolbar>
            <label class="is-label" 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}}
                <div class="toolbar-separator"></div>
                <CopyButton class="button is-transparent" @clipboardText={{value}}
                    @buttonType="button" @success={{action (set-flash-message 'Data copied!')}}>
                    <Icon @glyph="copy-action" aria-label="Copy" />
                </CopyButton>
            </ToolbarActions>
        </Toolbar>
    </div>
{{/if}}
{{ivy-codemirror
    data-test-component="json-editor" 
    value=value 
    options=options
    valueUpdated=(action "updateValue") 
    onFocusOut=(action "onFocus")    
}}
{{#if helpText }}
    <div class="box is-shadowless is-fullwidth has-short-padding">
        <p class="sub-text">{{ helpText }}</p>
    </div>
{{/if}}