<KoenigCard
    @class="flex flex-column"
    @isSelected={{this.isSelected}}
    @isEditing={{this.isEditing}}
    @selectCard={{action this.selectCard}}
    @deselectCard={{action this.deselectCard}}
    @onDeselect={{action "onDeselect"}}
    @editCard={{action this.editCard}}
    @toolbar={{this.toolbar}}
    @hasEditMode={{false}}
    @showSelectedOutline={{this.payload.html}}
    @addParagraphAfterCard={{this.addParagraphAfterCard}}
    @moveCursorToPrevSection={{this.moveCursorToPrevSection}}
    @moveCursorToNextSection={{this.moveCursorToNextSection}}
    @editor={{this.editor}}
    as |card|
>
    {{#if this.payload.html}}
        <div class="kg-card-hover">
            <div class="koenig-embed-{{this.payload.type}} flex justify-center relative" data-kg-embed>
                <iframe class="bn miw-100" scrolling="no"></iframe>
                <div class="koenig-card-click-overlay ba b--transparent" data-kg-overlay></div>
            </div>

            {{#if (or this.isSelected (clean-basic-html this.payload.caption))}}
                <card.CaptionInput
                    @caption={{this.payload.caption}}
                    @update={{action "updateCaption"}}
                    @placeholder="Type caption for embed (optional)"
                />
            {{/if}}
        </div>
    {{else}}
        {{#if this.convertUrl.isRunning}}
            <div class="miw-100 pa2 ba br2 b--lightgrey-d1 flex items-center justify-center bg-whitegrey-l2 f6 lh-title h10">
                &nbsp;<div class="ghost-spinner spinner-blue"></div>&nbsp;
            </div>
        {{else if this.hasError}}
            <div class="miw-100 flex flex-row pa2 pl3 ba br2 b--red-l3 red bg-error-red f7 fw4 lh-title h10 items-center">
                <span class="mr3">There was an error when parsing the URL.</span>
                <button type="button" class="red-d2 mr3 fw6 hover-red" {{action "retry"}}><span class="underline">Retry</span></button>
                <button type="button" class="red-d2 mr-auto fw6 underline hover-red" {{action "insertAsLink"}}><span class="underline">Paste URL as link</span></button>
                <button type="button" {{action this.deleteCard}} class="nudge-right--2">
                    {{svg-jar "close" class="w3 stroke-red-l3"}}
                </button>
            </div>
        {{else}}
            <input
                type="text"
                value={{this.payload.url}}
                name="url"
                placeholder="Paste URL to add embedded content..."
                class="miw-100 pa2 ba br2 b--lightgrey-d2 f7 form-text lh-title tracked-2 h10 nl2 nr2"
                oninput={{action "updateUrl"}}
                onkeydown={{action "urlKeydown"}}>
        {{/if}}
    {{/if}}
</KoenigCard>
