<KoenigCard
    @env={{@env}}
    @class={{concat (kg-style "container-card") " kg-toggle-card-container"}}
    @headerOffset={{@headerOffset}}
    @toolbar={{this.toolbar}}
    @payload={{@payload}}
    @isSelected={{@isSelected}}
    @isEditing={{@isEditing}}
    @selectCard={{@selectCard}}
    @deselectCard={{@deselectCard}}
    @editCard={{@editCard}}
    @hasEditMode={{true}}
    @saveCard={{@saveCard}}
    @saveAsSnippet={{@saveAsSnippet}}
    @onLeaveEdit={{this.leaveEditMode}}
    @addParagraphAfterCard={{@addParagraphAfterCard}}
    @moveCursorToPrevSection={{@moveCursorToPrevSection}}
    @moveCursorToNextSection={{@moveCursorToNextSection}}
    @editor={{@editor}}
    {{did-insert this.registerElement}}
    as |card|
>
    {{#if @isEditing}}

        {{!-- edit mode view --}}

        <div class="kg-toggle-card">
            <div class="kg-toggle-card-header">
                <KoenigBasicHtmlInput
                    @html={{@payload.heading}}
                    @placeholder="Toggle header"
                    @class="kg-toggle-card-heading"
                    @name="toggle-heading"
                    @defaultTag="h4"
                    @onChange={{action "setHeadingText"}}
                    @onFocus={{action (mut this.isFocused) true}}
                    @onBlur={{action (mut this.isFocused) false}}
                    @didCreateEditor={{this.registerHeadingEditor}}
                />
                <div class="kg-toggle-card-arrow-container">
                    <div class="kg-toggle-card-arrow">
                        {{svg-jar "koenig/kg-toggle-card-open-arrow"}}
                    </div>
                </div>
            </div>
                <KoenigBasicHtmlTextarea
                    @html={{@payload.content}}
                    @placeholder="Collapsible content"
                    @class="w-100 bn bg-transparent kg-toggle-card-content"
                    @onChange={{action "setContentText"}}
                    @onFocus={{action (mut this.isFocused) true}}
                    @onBlur={{action (mut this.isFocused) false}}
                    @didCreateEditor={{action "registerContentEditor"}}
                />
        </div>
    {{else}}

        {{!-- rendered (non-edit) mode view --}}

        <div class="kg-toggle-card">
            <div class="kg-toggle-card-header">
                <div class="kg-toggle-card-heading">
                    <h4>{{{this.formattedHeading}}}</h4>
                </div>
                <div class="kg-toggle-card-arrow-container">
                    <div class="kg-toggle-card-arrow">
                        {{svg-jar "koenig/kg-toggle-card-open-arrow"}}
                    </div>
                </div>
            </div>
            <div class="kg-toggle-card-content">
                {{{this.formattedContent}}}
            </div>

        </div>

    {{/if}}
</KoenigCard>
