<KoenigCard
    @env={{@env}}
    @class={{concat (kg-style "container-card") " kg-button-card flex justify-center mih10 miw-100 relative"}}
    @headerOffset={{@headerOffset}}
    @toolbar={{this.toolbar}}
    @payload={{@payload}}
    @isSelected={{@isSelected}}
    @isEditing={{@isEditing}}
    @selectCard={{@selectCard}}
    @deselectCard={{@deselectCard}}
    @editCard={{@editCard}}
    @hasEditMode={{true}}
    @saveCard={{@saveCard}}
    @saveAsSnippet={{@saveAsSnippet}}
    @onLeaveEdit={{this.leaveEditMode}}
    @addParagraphAfterCard={{@addParagraphAfterCard}}
    @moveCursorToPrevSection={{@moveCursorToPrevSection}}
    @moveCursorToNextSection={{@moveCursorToNextSection}}
    @editor={{@editor}}
    {{on "dragover" this.dragOver}}
    {{on "dragleave" this.dragLeave}}
    {{on "drop" this.drop}}
    {{did-insert this.registerElement}}
    as |card|
>
    {{#if @isEditing}}
        <div class="kg-product-card">
            <GhUploader
                @files={{this.files}}
                @accept={{this.imageMimeTypes}}
                @extensions={{this.imageExtensions}}
                @onStart={{action "setPreviewSrc"}}
                @onComplete={{action "updateSrc"}}
                @onFailed={{action "resetSrcs"}}
                as |uploader|
            >
                <div class="relative kg-product-card-image-container hide-child{{unless (or this.previewSrc @payload.productImageSrc) " bg-whitegrey-l2"}}">
                    {{#if (or this.previewSrc @payload.productImageSrc)}}
                        <img src={{or this.previewSrc @payload.productImageSrc}} class="{{kg-style this.kgImgStyle sidebar=this.ui.hasSideNav}} kg-product-card-image">
                        {{#unless this.koenigDragDropHandler.isDragging}}
                            <div class="bg-image-overlay-top child pe-none {{this.image.overlayClasses}}">
                                <div class="flex flex-row-reverse">
                                    <button class="absolute bg-white-90 pl3 pr3 br3 pb2 pt2 pe-auto kg-product-card-trash-icon" style="top: 20px; right: 20px; font-size: 1.2rem;" type="button" {{action "resetSrcs"}}><span>{{svg-jar "koenig/kg-trash"}}</span></button>
                                </div>
                            </div>
                        {{/unless}}

                        {{#if this.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.productImageSrc))}}
                        <div class="relative miw-100 h-100 flex items-center {{if this.previewSrc "absolute absolute--fill bg-white-50" "kg-media-placeholder ba b--whitegrey"}}">
                            {{#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 this.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 this.previewSrc @payload.productImageSrc)}}
                                <button class="w-100 h-100 sans-serif fw4 f7 middarkgrey kg-image-button" onclick={{action "triggerFileDialog"}} type="button">
                                    <div class="flex flex-column items-center">
                                        {{svg-jar this.placeholder class="kg-placeholder-image"}}
                                        <span class="mt4 midgrey">Click to select an image</span>
                                    </div>
                                </button>
                            {{/if}}
                        </div>
                    {{/if}}
                </div>

                <div style="display:none">
                    <GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} />
                </div>
            </GhUploader>
            <div class="kg-product-card-text">
                <div class="kg-product-card-header">
                    <KoenigBasicHtmlInput
                        @html={{@payload.productTitle}}
                        @placeholder="Product title"
                        @class="w-100 fw4 bn bg-transparent kg-product-card-title"
                        @name="title"
                        @defaultTag="h4"
                        @onChange={{action "setProductTitle"}}
                        @didCreateEditor={{action "registerTitleEditor"}}
                    />
                    {{#if @payload.productRatingEnabled}}
                    <div class="kg-product-card-rating-edit icons" style="line-height: auto;">
                        <button class="{{if (gte @payload.productStarRating 1) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="1" onclick={{action "changeStars"}} onmouseover={{this.hoverStarOn}} onmouseout={{this.hoverStarOff}} type="button">
                            <span>{{svg-jar "koenig/kg-star"}}</span>
                        </button>
                        <button class="{{if (gte @payload.productStarRating 2) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="2" onclick={{action "changeStars"}} onmouseover={{this.hoverStarOn}} onmouseout={{this.hoverStarOff}} type="button">
                            <span>{{svg-jar "koenig/kg-star"}}</span>
                        </button>
                        <button class="{{if (gte @payload.productStarRating 3) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="3" onclick={{action "changeStars"}} onmouseover={{this.hoverStarOn}} onmouseout={{this.hoverStarOff}} type="button">
                            <span>{{svg-jar "koenig/kg-star"}}</span>
                        </button>
                        <button class="{{if (gte @payload.productStarRating 4) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="4" onclick={{action "changeStars"}} onmouseover={{this.hoverStarOn}} onmouseout={{this.hoverStarOff}} type="button">
                            <span>{{svg-jar "koenig/kg-star"}}</span>
                        </button>
                        <button class="{{if (gte @payload.productStarRating 5) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="5" onclick={{action "changeStars"}} onmouseover={{this.hoverStarOn}} onmouseout={{this.hoverStarOff}} type="button">
                            <span>{{svg-jar "koenig/kg-star"}}</span>
                        </button>
                    </div>
                    {{/if}}
                </div>
                <KoenigBasicHtmlTextarea
                    @html={{@payload.productDescription}}
                    @placeholder="Description"
                    @class="w-100 fw4 bg-transparent kg-product-card-description"
                    @name="description"
                    @onChange={{action "setProductDescription"}}
                    @didCreateEditor={{action "registerEditor"}}
                />
                {{#if @payload.productButtonEnabled}}
                    <a href="javascript:void(0)" class="gh-btn gh-btn-accent kg-product-card-button" disabled={{not @payload.productButton}}>
                        <span>
                            {{or @payload.productButton "Add button text"}}
                        </span>
                    </a>
                {{/if}}
            </div>

        </div>

        <KoenigSettingsPanel>
            <div class="kg-settings-panel-control kg-settings-panel-control-horizontal">
                <div class="kg-settings-panel-control-label">Rating</div>
                <div class="kg-settings-panel-control-input">
                    <div class="for-switch x-small">
                        <label class="switch" for="has-rating">
                            <input
                                type="checkbox"
                                checked={{@payload.productRatingEnabled}}
                                id="has-rating"
                                {{on "click" this.toggleProductRating}}
                            >
                            <span class="input-toggle-component mt1"></span>
                        </label>
                    </div>
                </div>
            </div>
            <hr class="kg-settings-panel-divider">
            <div class="kg-settings-panel-control kg-settings-panel-control-horizontal">
                <div class="kg-settings-panel-control-label">Button</div>
                <div class="kg-settings-panel-control-input">
                    <div class="for-switch x-small">
                        <label class="switch" for="has-button">
                            <input
                                type="checkbox"
                                checked={{@payload.productButtonEnabled}}
                                id="has-button"
                                {{on "click" this.toggleProductButton}}
                            >
                            <span class="input-toggle-component mt1"></span>
                        </label>
                    </div>
                </div>
            </div>
            {{#if @payload.productButtonEnabled}}
            <div class="kg-settings-panel-control">
                <label class="kg-settings-panel-control-label" for="product-button-input">Button text</label>
                <div class="kg-settings-panel-control-input">
                    <input
                        type="text"
                        class="gh-input"
                        id="product-button-input"
                        name="product-button"
                        value={{@payload.productButton}}
                        placeholder="Add button text"
                        {{on "input" this.setProductButton}}
                        {{on-key "Enter" (fn this.focusElement "#product-button-input")}}
                    >
                </div>
            </div>
            <div class="kg-settings-panel-control">
                <label class="kg-settings-panel-control-label" for="product-url-input">Button URL</label>
                <div class="kg-settings-panel-control-input">
                    <input
                        type="text"
                        class="gh-input"
                        id="product-url-input"
                        name="product-url"
                        value={{@payload.productUrl}}
                        placeholder="Add URL"
                        {{on "input" this.setProductUrl}}
                        {{on-key "Enter" (fn this.focusElement "#product-url-input")}}
                    >
                </div>
            </div>
            {{/if}}
        </KoenigSettingsPanel>

    {{else}}

        <div class="kg-product-card">
            {{#if @payload.productImageSrc}}
                <div class="kg-product-card-image-container">
                    <img src={{@payload.productImageSrc}} class="kg-product-card-image" />
                </div>
            {{/if}}
                <div class="kg-product-card-header">
                    <div class="kg-product-card-title-container">
                        <h4 class="kg-product-card-title">{{{@payload.productTitle}}}</h4>
                    </div>
                    {{#if @payload.productRatingEnabled}}
                        <div class="kg-product-card-rating-edit">
                            <span class="{{if (gte @payload.productStarRating 1) "kg-product-card-rating-active gh-btn-group-selected"}} kg-product-card-rating-star">{{svg-jar "koenig/kg-star" class="w4 h4"}}</span>
                            <span class="{{if (gte @payload.productStarRating 2) "kg-product-card-rating-active gh-btn-group-selected"}} kg-product-card-rating-star">{{svg-jar "koenig/kg-star" class="w4 h4"}}</span>
                            <span class="{{if (gte @payload.productStarRating 3) "kg-product-card-rating-active gh-btn-group-selected"}} kg-product-card-rating-star">{{svg-jar "koenig/kg-star" class="w4 h4"}}</span>
                            <span class="{{if (gte @payload.productStarRating 4) "kg-product-card-rating-active gh-btn-group-selected"}} kg-product-card-rating-star">{{svg-jar "koenig/kg-star" class="w4 h4"}}</span>
                            <span class="{{if (gte @payload.productStarRating 5) "kg-product-card-rating-active gh-btn-group-selected"}} kg-product-card-rating-star">{{svg-jar "koenig/kg-star" class="w4 h4"}}</span>
                        </div>
                    {{/if}}
                </div>
                <div class="kg-product-card-description">{{{@payload.productDescription}}}</div>
                {{#if @payload.productButtonEnabled}}
                    <a href="javascript:void(0)" class="gh-btn gh-btn-accent kg-product-card-button {{if this.isButtonIncomplete "o-50"}}" disabled={{not @payload.productButton}}>
                        <span>
                            {{or @payload.productButton "Add button text"}}
                        </span>
                    </a>
                {{/if}}
        </div>
    {{/if}}
</KoenigCard>