{{#if this.icon}}
    <div class="sticky" style="top: {{this.iconTop}}px; margin-bottom: {{this.iconTop}}px">
        <span data-tooltip={{@iconTooltip}}>{{svg-jar this.icon class=this.iconClass}}</span>
    </div>
    <div style="margin-top: -{{this.iconTop}}px"></div>
{{/if}}

{{yield (hash
    CaptionInput=(component "koenig-caption-input"
        captureInput=this.isSelected
        addParagraphAfterCard=this.addParagraphAfterCard
        moveCursorToPrevSection=this.moveCursorToPrevSection
        moveCursorToNextSection=this.moveCursorToNextSection
    )
    AltInput=(component "koenig-alt-input"
        addParagraphAfterCard=this.addParagraphAfterCard
        moveCursorToPrevSection=this.moveCursorToPrevSection
        moveCursorToNextSection=this.moveCursorToNextSection
    )
)}}

{{#let (and this.saveAsSnippet (not this.isEditing)) as |showSnippetIcon|}}
    {{#if (or this.toolbar showSnippetIcon)}}
        <KgActionBar @class="absolute" @style={{this.toolbarStyle}} @isVisible={{this.shouldShowToolbar}} @instantClose={{this.koenigUi.inputHasFocus}}>
            {{#each this.toolbar.items as |item|}}
                {{#if item.divider}}
                    <li class="ma0 ml1 mr1 kg-action-bar-divider bg-darkgrey-l2 h5" role="separator"></li>
                {{else}}
                    <li class="ma0 lh-solid">
                        <button
                            type="button"
                            title={{item.title}}
                            class="dib dim-lite link h9 w9 nudge-top--1 justify-center {{item.buttonClass}}"
                            {{on "mousedown" (action item.action)}}
                        >
                            {{#if item.icon}}{{svg-jar item.icon class=(concat item.iconClass (if item.text " mr2") " w4 h4")}} {{/if}}{{item.text}}
                        </button>
                    </li>
                {{/if}}
            {{/each}}

            {{#if showSnippetIcon}}
                {{#if this.toolbar.items}}
                    <li class="ma0 ml1 mr1 lh-solid kg-action-bar-divider bg-darkgrey-l2 h5" role="separator"></li>
                {{/if}}
                <li class="ma0 lh-solid">
                    <button
                        type="button"
                        title="Create snippet"
                        class="dib dim-lite link h9 w9 nudge-top--1"
                        {{on "click" this.saveAsSnippet}}
                    >
                        {{svg-jar "koenig/kg-snippet" class="w4 h4"}}
                    </button>
                </li>
            {{/if}}
        </KgActionBar>
    {{/if}}
{{/let}}