{{#koenig-card
    icon="koenig/card-indicator-markdown"
    class=(concat (kg-style "container-card") " koenig-card-markdown-rendered")
    headerOffset=headerOffset
    toolbar=toolbar
    payload=payload
    isSelected=isSelected
    isEditing=isEditing
    onEnterEdit=(action "enterEditMode")
    onLeaveEdit=(action "leaveEditMode")
    selectCard=(action selectCard)
    deselectCard=(action deselectCard)
    editCard=(action editCard)
    saveCard=(action saveCard)
    editor=editor
}}
    {{#if isEditing}}
        {{#gh-editor as |editor|}}
            {{gh-scroll-trigger
                triggerOffset=(hash bottom=bottomOffset)
                enter=(action "topEntered")
                exit=(action "topExited")
                registerElement=(action "registerTop")
            }}

            {{#gh-markdown-editor
                markdown=(readonly payload.markdown)
                onChange=(action "updateMarkdown")
                autofocus=true
                enableSideBySide=false
                enablePreview=false
                enableHemingway=false
                options=(hash status=false)
                uploadedImageUrls=editor.uploadedImageUrls
                onImageFilesSelected=(action editor.uploadImages)
                imageMimeTypes=editor.imageMimeTypes
                as |markdown|
            }}
                {{markdown.editor}}
            {{/gh-markdown-editor}}

            {{gh-scroll-trigger
                enter=(action "bottomEntered")
                exit=(action "bottomExited")
                registerElement=(action "registerBottom")
            }}

            {{!-- files are dragged over editor pane --}}
            {{#if editor.isDraggedOver}}
                <div class="drop-target gh-editor-drop-target">
                    <div class="drop-target-message">
                        <h3>Drop image(s) here to upload</h3>
                    </div>
                </div>
            {{/if}}

            {{!-- files have been dropped ready to be uploaded --}}
            {{#if editor.droppedFiles}}
                {{#gh-uploader
                    files=editor.droppedFiles
                    accept=editor.imageMimeTypes
                    extensions=editor.imageExtensions
                    onComplete=(action editor.uploadComplete)
                    onCancel=(action editor.uploadCancelled)
                    as |upload|
                }}
                    <div class="gh-editor-image-upload {{if upload.errors "-error"}}">
                        <div class="gh-editor-image-upload-content">
                            {{#if upload.errors}}
                                <h3>Upload failed</h3>

                                {{#each upload.errors as |error|}}
                                    <div class="failed">{{error.fileName}} - {{error.message}}</div>
                                {{/each}}

                                <button class="gh-btn gh-btn-grey gh-btn-icon" {{action upload.cancel}}>
                                    <span>{{svg-jar "close"}} Close</span>
                                </button>
                            {{else}}

                                <h3>Uploading {{pluralize upload.files.length "image"}}...</h3>
                                {{upload.progressBar}}
                            {{/if}}
                        </div>
                    </div>
                {{/gh-uploader}}
            {{/if}}
        {{/gh-editor}}

        {{#if preventClick}}
            <div class="absolute absolute--fill z-max"></div>
        {{/if}}
    {{else}}
        {{renderedMarkdown}}
        <div class="absolute absolute--fill z-999"></div>
    {{/if}}
{{/koenig-card}}