{{#koenig-card
    tagName="figure"
    class=(concat (kg-style "media-card") " " (kg-style "breakout" size=payload.cardWidth) " flex flex-column")
    isSelected=isSelected
    isEditing=isEditing
    selectCard=(action selectCard)
    deselectCard=(action deselectCard)
    editCard=(action editCard)
    toolbar=toolbar
    hasEditMode=false
    addParagraphAfterCard=addParagraphAfterCard
    moveCursorToPrevSection=moveCursorToPrevSection
    moveCursorToNextSection=moveCursorToNextSection
    editor=editor
    as |card|
}}
    {{#gh-uploader
        files=files
        accept=imageMimeTypes
        extensions=imageExtensions
        onStart=(action "setPreviewSrc")
        onComplete=(action "updateSrc")
        onFailed=(action "resetSrcs")
        as |uploader|
    }}
        <div class="relative{{unless (or previewSrc payload.src) " bg-whitegrey-l2"}}">
            {{#if (or previewSrc payload.src)}}
                <img src={{or previewSrc payload.src}} class="{{kg-style kgImgStyle sidebar=ui.hasSideNav}}" alt={{payload.alt}}>
                {{#if isDraggedOver}}
                    <div class="absolute absolute--fill flex items-center bg-black-60 pe-none">
                        <span class="db center sans-serif fw7 f7 white">
                            Drop to replace image
                        </span>
                    </div>
                {{/if}}
            {{/if}}

            {{#if (or uploader.errors uploader.isUploading (not payload.src))}}
                <div class="relative miw-100 flex items-center {{if (not previewSrc payload.src) "kg-media-placeholder ba b--whitegrey" "absolute absolute--fill bg-white-50"}}">
                    {{#if uploader.errors}}
                        <span class="db absolute top-0 right-0 left-0 pl2 pr2 bg-red white sans-serif f7">
                            {{uploader.errors.firstObject.message}}
                        </span>
                    {{/if}}

                    {{#if isDraggedOver}}
                        <span class="db center sans-serif fw7 f7 middarkgrey">
                            Drop it like it's hot 🔥
                        </span>
                    {{else if uploader.isUploading}}
                        {{uploader.progressBar}}
                    {{else if (not previewSrc payload.src)}}
                        <button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey pa16 pt14 pb14 kg-image-button" onclick={{action "triggerFileDialog"}}>
                            {{svg-jar this.placeholder class="kg-placeholder-image"}}
                            <span class="mt2 midgrey">Click to select an image</span>
                        </button>
                    {{/if}}
                </div>
            {{/if}}
        </div>

        <div style="display:none">
            {{gh-file-input multiple=false action=uploader.setFiles accept=imageMimeTypes}}
        </div>
    {{/gh-uploader}}

    {{#if (or isSelected (clean-basic-html payload.caption))}}
        {{card.captionInput
            caption=payload.caption
            update=(action "updateCaption")
            placeholder="Type caption for image (optional)"
        }}
    {{/if}}

    {{#if imageSelector}}
        {{component imageSelector
            searchTerm=payload.searchTerm
            select=(action "selectFromImageSelector")
            close=(action "closeImageSelector")}}
    {{/if}}
{{/koenig-card}}