<div class="gh-main-section">
    <div class="gh-main-section-content bordered columns-2">
        <div>
            <div class="gh-tag-settings-multiprop">
                <GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="name" class="mr2 flex-auto">
                    <label for="tag-name">Name</label>
                    <input
                        type="text"
                        class="gh-input-x"
                        id="tag-name"
                        name="name"
                        value={{@tag.name}}
                        {{on "input" (pick "target.value" (fn this.setTagProperty "name"))}}
                        {{on "blur" (fn this.validateTagProperty "name")}}
                        data-test-input="tag-name"
                    />
                    <span class="error">
                        <GhErrorMessage @errors={{@tag.errors}} @property="name" />
                        <GhErrorMessage @errors={{@tag.errors}} @property="accentColor" data-test-error="accentColor" />
                    </span>
                    <p class="description">
                        Start with # to create internal tags.
                        <a href="https://ghost.org/help/organising-content/#private-tags" target="_blank" rel="noopener noreferrer">Learn more</a>
                    </p>
                </GhFormGroup>

                <GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="accentColor" class="gh-tag-settings-colorcontainer">
                    <label for="accent-color">Color</label>
                    <div class="input-color">
                        <input
                            type="text"
                            placeholder="15171A"
                            name="accent-color"
                            autocorrect="off"
                            maxlength="6"
                            value={{this.accentColor}}
                            class="gh-input-x"
                            {{on "input" (perform this.debounceUpdateAccentColorTask)}}
                            {{on "blur" this.updateAccentColor}}
                            aria-label="Accent color hex value"
                            data-test-input="accentColor"
                        />
                        <div
                            class="color-box-container"
                            style={{this.accentColorBgStyle}}
                        >
                            <input
                                type="color"
                                name="accent-color"
                                class="color-picker"
                                value={{this.accentColorPickerValue}}
                                {{on "input" (perform this.debounceUpdateAccentColorTask)}}
                                aria-label="Accent color picker"
                            >
                        </div>
                    </div>
                </GhFormGroup>
            </div>

            <GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="slug">
                <label for="tag-slug">Slug</label>
                <input
                    type="text"
                    value={{@tag.slug}}
                    id="tag-slug"
                    name="slug"
                    class="gh-input-x"
                    {{on "input" (pick "target.value" (fn this.setTagProperty "slug"))}}
                    {{on "blur" (fn this.validateTagProperty "slug")}}
                    data-test-input="tag-slug"
                />
                <GhUrlPreview @prefix="tag" @slug={{@tag.slug}} @tagName="p" @classNames="description" />
                <GhErrorMessage @errors={{@tag.errors}} @property="slug" />
            </GhFormGroup>

            <GhFormGroup class="no-margin" @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="description">
                <label for="tag-description">Description</label>
                <textarea
                    id="tag-description"
                    name="description"
                    class="gh-input-x gh-tag-details-textarea"
                    {{on "input" (pick "target.value" (fn this.setTagProperty "description"))}}
                    {{on "blur" (fn this.validateTagProperty "description")}}
                    data-test-input="tag-description"
                >{{@tag.description}}</textarea>

                <GhErrorMessage @errors={{@tag.errors}} @property="description" />
                <p>Maximum: <b>500</b> characters. You’ve used {{gh-count-down-characters @tag.description 500}}</p>
            </GhFormGroup>
        </div>
        <GhFormGroup class="gh-tag-image-uploader no-margin" @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="featureImage">
            <label for="tag-image">Tag image</label>
            <GhImageUploaderWithPreview
                @image={{@tag.featureImage}}
                @text="Upload tag image"
                @allowUnsplash={{true}}
                @update={{fn this.setTagProperty "featureImage"}}
                @remove={{fn this.setTagProperty "featureImage" ""}}
            />
        </GhFormGroup>
    </div>
</div>

<section class="gh-expandable">
    <div class="gh-expandable-block">
        <div class="gh-expandable-header">
            <div>
                <h4 class="gh-expandable-title">Meta data</h4>
                <p class="gh-expandable-description">Extra content for search engines.</p>
            </div>
            <button type="button" class="gh-btn gh-btn-expand" {{on "click" (toggle "metadataOpen" this)}}><span>{{if this.metadataOpen "Close" "Expand"}}</span></button>
        </div>

        <div class="gh-expandable-content">
            {{#liquid-if this.metadataOpen}}
            <div class="gh-setting-content-extended">
                <div class="gh-seo-settings">
                    <div class="gh-seo-settings-left flex-basis-1-2-m flex-basis-2-3-l">
                        <GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="metaTitle">
                            <label for="meta-title">Meta title</label>
                            <input
                                id="meta-title"
                                name="metaTitle"
                                class="gh-input-x"
                                placeholder={{@tag.name}}
                                value={{@tag.metaTitle}}
                                {{on "input" (pick "target.value" (fn this.setTagProperty "metaTitle"))}}
                                {{on "blur" (fn this.validateTagProperty "metaTitle")}}
                            />
                            <GhErrorMessage @errors={{@tag.errors}} @property="metaTitle" />
                            <p>Recommended: <b>70</b> characters. You’ve used {{gh-count-down-characters @tag.metaTitle 70}}</p>
                        </GhFormGroup>

                        <GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="metaDescription">
                            <label for="meta-description">Meta description</label>
                            <textarea
                                id="meta-description"
                                name="metaDescription"
                                class="gh-input-x gh-tag-details-textarea"
                                placeholder={{@tag.description}}
                                {{on "input" (pick "target.value" (fn this.setTagProperty "metaDescription"))}}
                                {{on "blur" (fn this.validateTagProperty "metaDescription")}}
                            >{{@tag.metaDescription}}</textarea>
                            <GhErrorMessage @errors={{@tag.errors}} @property="metaDescription" />
                            <p>Recommended: <b>156</b> characters. You’ve used {{gh-count-down-characters @tag.metaDescription 156}}</p>
                        </GhFormGroup>

                        <GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="canonicalUrl">
                            <label for="canonical-url">Canonical URL</label>
                            <input
                                id="canonical-url"
                                name="canonicalUrl"
                                class="gh-input-x"
                                value={{@tag.canonicalUrl}}
                                {{on "input" (pick "target.value" (fn this.setTagProperty "canonicalUrl"))}}
                                {{on "blur" this.validateCanonicalUrl}}
                            />
                            <GhErrorMessage @errors={{@tag.errors}} @property="canonicalUrl" />
                        </GhFormGroup>
                    </div>

                    <div class="flex-basis-1-2-m flex-basis-1-3-l">
                        <label>Search Engine Result Preview</label>
                        <div class="gh-seo-container">
                            <div class="gh-seo-preview">
                                <div class="flex mb7">
                                    {{svg-jar "google"}}
                                    <div class="gh-seo-search-bar">{{svg-jar "google-search"}}</div>
                                </div>
                                <div class="gh-seo-preview-link">{{this.seoURL}}</div>
                                <div class="gh-seo-preview-title">{{this.seoTitle}}</div>
                                <div class="gh-seo-preview-desc">{{#if this.seoDescription}}{{truncate this.seoDescription 149}}{{else}}Search engines will automatically show a custom preview of content related to the search term here if no custom meta description is set.{{/if}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{/liquid-if}}
        </div>
    </div>

    <div class="gh-expandable-block">
        <div class="gh-expandable-header">
            <div>
                <h4 class="gh-expandable-title">X card</h4>
                <p class="gh-expandable-description">Customized structured data for X.</p>
            </div>
            <button type="button" class="gh-btn gh-btn-expand" {{on "click" (toggle "twitterMetadataOpen" this)}}><span>{{if this.twitterMetadataOpen "Close" "Expand"}}</span></button>
        </div>

        <div class="gh-expandable-content">
            {{#liquid-if this.twitterMetadataOpen}}
            <div class="gh-setting-content-extended">
                <div class="gh-twitter-settings">
                    <div class="gh-twitter-settings-left flex-basis-1-2-m flex-basis-2-3-l">
                        <GhFormGroup class="gh-tag-image-uploader" @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="twitterImage">
                            <label for="twitter-image">X image</label>
                            <GhImageUploaderWithPreview
                                @image={{@tag.twitterImage}}
                                @text="Add X image"
                                @allowUnsplash={{true}}
                                @update={{fn this.setTagProperty "twitterImage"}}
                                @remove={{fn this.setTagProperty "twitterImage" ""}}
                            />
                        </GhFormGroup>

                        <GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="twitterTitle">
                            <label for="twitter-title">X title</label>
                            <input
                                type="text"
                                id="twitter-title"
                                name="twitterTitle"
                                class="gh-input-x"
                                placeholder={{@tag.name}}
                                value={{@tag.twitterTitle}}
                                {{on "input" (pick "target.value" (fn this.setTagProperty "twitterTitle"))}}
                                {{on "blur" (fn this.validateTagProperty "twitterTitle")}}
                            />
                            <GhErrorMessage @errors={{@tag.errors}} @property="twitterTitle" />
                            <p>Recommended: <b>70</b> characters. You’ve used {{gh-count-down-characters @tag.twitterTitle 70}}</p>
                        </GhFormGroup>

                        <GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="twitterDesctiption">
                            <label for="twitter-description">X description</label>
                            <textarea
                                id="twitter-description"
                                name="twitterDescription"
                                class="gh-input-x gh-tag-details-textarea"
                                placeholder={{@tag.description}}
                                {{on "input" (pick "target.value" (fn this.setTagProperty "twitterDescription"))}}
                                {{on "blur" (fn this.validateTagProperty "twitterDescription")}}
                            >{{@tag.twitterDescription}}</textarea>
                            <GhErrorMessage @errors={{@tag.errors}} @property="twitterDescription" />
                            <p>Recommended: <b>125</b> characters. You’ve used {{gh-count-down-characters @tag.twitterDescription 125}}</p>
                        </GhFormGroup>
                    </div>

                    <div class="flex-basis-1-2-m flex-basis-1-3-l">
                        <label>X preview</label>
                        <div class="gh-twitter-container">
                            <div class="flex ma4">
                                <span>{{svg-jar "social-x" class="social-icon"}}</span>
                                <div class="w-100">
                                    <span class="gh-social-og-title">{{or this.settings.metaTitle this.settings.title}}</span>
                                    <span class="gh-social-og-time">12 hrs</span>
                                    <div class="flex flex-column mt2 mb3">
                                        <span class="gh-social-og-desc w-100 mb2" />
                                        <span class="gh-social-og-desc w-60" />
                                    </div>
                                    <div class="gh-social-twitter-post-preview">
                                        {{#if this.twitterImage}}
                                            <div class="gh-social-twitter-preview-image" style={{background-image-style this.twitterImage}}></div>
                                        {{/if}}
                                        <div class="gh-social-twitter-preview-content">
                                            <div class="gh-social-twitter-preview-title">{{this.twitterTitle}}</div>
                                            <div class="gh-social-twitter-preview-desc">{{truncate this.twitterDescription}}</div>
                                            <div class="gh-social-twitter-preview-meta">
                                                {{svg-jar "twitter-link"}}
                                                {{this.config.blogDomain}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="gh-social-twitter-reactions">
                                        <div class="flex items-center">{{svg-jar "twitter-comment"}}2</div>
                                        <div class="flex items-center">{{svg-jar "twitter-retweet"}}11</div>
                                        <div class="flex items-center">{{svg-jar "twitter-like"}}32</div>
                                        <div class="flex items-center">{{svg-jar "twitter-share"}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{/liquid-if}}
        </div>
    </div>

    <div class="gh-expandable-block">
        <div class="gh-expandable-header">
            <div>
                <h4 class="gh-expandable-title">Facebook card</h4>
                <p class="gh-expandable-description">Customize Open Graph data.</p>
            </div>
            <button type="button" class="gh-btn gh-btn-expand" {{on "click" (toggle "facebookMetadataOpen" this)}}><span>{{if this.facebookMetadataOpen "Close" "Expand"}}</span></button>
        </div>

        <div class="gh-expandable-content">
            {{#liquid-if this.facebookMetadataOpen}}
            <div class="gh-setting-content-extended">
                <div class="gh-og-settings">
                    <div class="gh-og-settings-left flex-basis-1-2-m flex-basis-2-3-l">
                        <GhFormGroup class="gh-tag-image-uploader" @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="ogImage">
                            <label for="og-image">Facebook image</label>
                            <GhImageUploaderWithPreview
                                @image={{@tag.ogImage}}
                                @text="Add Facebook image"
                                @allowUnsplash={{true}}
                                @update={{fn this.setTagProperty "ogImage"}}
                                @remove={{fn this.setTagProperty "ogImage" ""}}
                            />
                        </GhFormGroup>

                        <GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="metaTitle">
                            <label for="og-title">Facebook title</label>
                            <input
                                type="text"
                                id="og-title"
                                name="ogTitle"
                                class="gh-input-x"
                                placeholder={{@tag.name}}
                                value={{@tag.ogTitle}}
                                {{on "input" (pick "target.value" (fn this.setTagProperty "ogTitle"))}}
                                {{on "blur" (fn this.validateTagProperty "ogTitle")}}
                            />
                            <GhErrorMessage @errors={{@tag.errors}} @property="ogTitle" />
                            <p>Recommended: <b>100</b> characters. You’ve used {{gh-count-down-characters @tag.ogTitle 100}}</p>
                        </GhFormGroup>

                        <GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="ogDescription">
                            <label for="og-description">Facebook description</label>
                            <textarea
                                id="og-description"
                                name="ogDescription"
                                class="gh-input-x gh-tag-details-textarea"
                                placeholder={{@tag.description}}
                                {{on "input" (pick "target.value" (fn this.setTagProperty "ogDescription"))}}
                                {{on "blur" (fn this.validateTagProperty "ogDescription")}}
                            >{{@tag.ogDescription}}</textarea>
                            <GhErrorMessage @errors={{@tag.errors}} @property="ogDescription" />
                            <p>Recommended: <b>65</b> characters. You’ve used {{gh-count-down-characters @tag.ogDescription 65}}</p>
                        </GhFormGroup>
                    </div>

                    <div class="flex-basis-1-2-m flex-basis-1-3-l">
                        <label>Facebook preview</label>
                        <div class="gh-og-container">
                            <div class="flex ma3 mb2">
                                <span>{{svg-jar "social-facebook" class="social-icon"}}</span>
                                <div>
                                    <div class="gh-social-og-title">{{or this.settings.metaTitle this.settings.title}}</div>
                                    <div class="gh-social-og-time">12 hrs</div>
                                </div>
                            </div>
                            <div class="flex flex-column ma3 mt2">
                                <span class="gh-social-og-desc w-100 mb2" />
                                <span class="gh-social-og-desc w-60" />
                            </div>
                            <div class="gh-social-og-preview">
                                {{#if this.facebookImage}}
                                    <div class="gh-social-og-preview-image" style={{background-image-style this.facebookImage}}></div>
                                {{/if}}
                                <div class="gh-social-og-preview-bookmark">
                                    {{!-- Ensures description is hidden if title exceeds one line --}}
                                    <div class="gh-social-og-preview-content">
                                        <div class="gh-social-og-preview-meta">
                                            {{this.config.blogDomain}}
                                        </div>
                                        <div class="gh-social-og-preview-title">{{truncate this.facebookTitle}}</div>
                                        <div class="gh-social-og-preview-desc">{{truncate this.facebookDescription}}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="gh-social-og-reactions">
                                <span class="gh-social-og-likes">{{svg-jar "facebook-like" class="z-999"}}{{svg-jar "facebook-heart" class="nl1"}}182</span>
                                <span class="gh-social-og-comments">7 comments</span>
                                <span class="gh-social-og-comments ml2">2 shares</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{/liquid-if}}
        </div>
    </div>

    <div class="gh-expandable-block">
        <div class="gh-expandable-header">
            <div>
                <h4 class="gh-expandable-title">Code injection</h4>
                <p class="gh-expandable-description">Add styles/scripts to the header and footer.</p>
            </div>
            <button type="button" class="gh-btn gh-btn-expand" {{on "click" (toggle "codeInjectionOpen" this)}}><span>{{if this.codeInjectionOpen "Close" "Expand"}}</span></button>
        </div>

        <div class="gh-expandable-content">
            {{#liquid-if this.codeInjectionOpen}}
            <div class="gh-main-section">
                <GhFormGroup class="gh-main-section-block settings-code" @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="codeinjectionHead">
                    <label for="codeinjection-head" class="gh-tag-setting-codeheader">Tag header <code class="fw4 ml1">\{{ghost_head}}</code></label>
                    <GhCmEditor
                        @value={{@tag.codeinjectionHead}}
                        @id="tag-setting-codeinjection-head"
                        @class="gh-tag-setting-codeinjection"
                        @name="tag-setting-codeinjection-head"
                        @stopEnterKeyDownPropagation="true"
                        @update={{fn this.setTagProperty "codeinjectionHead"}}
                        @focus-out={{fn this.validateTagProperty "codeinjectionFoot"}}
                    />
                    <GhErrorMessage @errors={{@tag.errors}} @property="codeinjectionHead"/>
                </GhFormGroup>

                <GhFormGroup class="gh-main-section-block settings-code" @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="codeinjectionFoot">
                    <label for="codeinjection-foot"class="gh-tag-setting-codeheader">Tag footer <code class="fw4 ml1">\{{ghost_foot}}</code></label>
                    <GhCmEditor @value={{@tag.codeinjectionFoot}}
                        @id="tag-setting-codeinjection-foot"
                        @class="gh-tag-setting-codeinjection"
                        @name="tag-setting-codeinjection-foot"
                        @stopEnterKeyDownPropagation="true"
                        @update={{fn this.setTagProperty "codeinjectionFoot"}}
                        @focus-out={{fn this.validateTagProperty "codeinjectionFoot"}}
                    />
                    <GhErrorMessage @errors={{@tag.errors}} @property="codeinjectionFoot"/>
                </GhFormGroup>
            </div>
            {{/liquid-if}}
        </div>
    </div>
</section>