<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}}
    @saveAsSnippet={{if this.payload.metadata this.saveAsSnippet}}
    @toolbar={{this.toolbar}}
    @hasEditMode={{false}}
    @showSelectedOutline={{this.payload.metadata}}
    @addParagraphAfterCard={{this.addParagraphAfterCard}}
    @moveCursorToPrevSection={{this.moveCursorToPrevSection}}
    @moveCursorToNextSection={{this.moveCursorToNextSection}}
    @editor={{this.editor}}
    as |card|
>
    {{#if this.payload.metadata}}
        <div class="ba b--transparent relative kg-card 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> --}}
                <figure class="kg-card kg-bookmark-card also-new-tag">
                    <a href={{this.payload.url}} class="kg-bookmark-container">
                        <div class="kg-bookmark-content">
                            <div class="kg-bookmark-title">{{this.payload.metadata.title}}</div>
                            <div class="kg-bookmark-description">{{this.payload.metadata.description}}</div>
                            <div class="kg-bookmark-metadata">
                                {{#if this.payload.metadata.icon}}
                                    <img src={{this.payload.metadata.icon}} class="kg-bookmark-icon">
                                {{/if}}
                                {{#if this.payload.metadata.publisher}}
                                    <span class="kg-bookmark-publisher">{{this.payload.metadata.publisher}}</span>
                                {{/if}}
                                {{#if this.payload.metadata.author}}
                                    <span class="kg-bookmark-author">{{this.payload.metadata.author}}</span>
                                {{/if}}
                            </div>
                        </div>
                        {{#if this.payload.metadata.thumbnail}}
                            <div class="kg-bookmark-thumbnail">
                                <img src={{this.payload.metadata.thumbnail}} >
                            </div>
                        {{/if}}
                    </a>
                </figure>
                <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 bookmark (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">{{or this.errorMessage "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 bookmark 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>
