{{#if this.post}}
    <div class="flex flex-row">
        <GhEditor
            @tagName="section"
            @class="gh-editor gh-view relative"
            as |editor|
        >
            <header class="gh-editor-header br2 pe-none">
                <div class="flex items-center pe-auto">
                    {{#if this.ui.isFullScreen}}
                        <div class="ml3 mobile flex items-center">
                            <LinkTo @route={{pluralize this.post.displayName }} @classNames="gh-editor-back-button" data-test-link={{pluralize this.post.displayName}}>
                                <span>
                                    {{svg-jar "arrow-left"}}
                                    {{capitalize (pluralize this.post.displayName)}}
                                </span>
                            </LinkTo>
                        </div>
                    {{/if}}
                    <div class="gh-editor-post-status">
                        <span>
                            <GhEditorPostStatus
                                @post={{this.post}}
                                @hasDirtyAttributes={{this.hasDirtyAttributes}}
                                @isSaving={{or this.autosaveTask.isRunning this.saveTasks.isRunning}}
                            />
                        </span>
                    </div>
                </div>

                <section class="flex" style="pointer-events: auto">
                    {{#unless this.post.isNew}}
                        {{#if this.post.isDraft}}
                            <div>
                                <button type="button" class="gh-btn gh-editor-preview-trigger" {{on "click" (action "openPostPreviewModal")}}>
                                    <span>Preview</span>
                                </button>
                            </div>
                        {{/if}}

                        {{#if this.session.user.isContributor}}
                            <GhTaskButton @buttonText="Save"
                                @task={{this.save}}
                                @runningText="Saving"
                                @class="gh-btn gh-btn-blue gh-btn-icon contributor-save-button"
                                data-test-contributor-save=true />
                        {{else}}
                            <GhPublishmenu
                                @post={{this.post}}
                                @postStatus={{this.post.status}}
                                @saveTask={{this.saveTask}}
                                @setSaveType={{action "setSaveType"}}
                                @onOpen={{action "cancelAutosave"}} />
                        {{/if}}

                        {{#unless this.showSettingsMenu}}
                            <div class="settings-menu-toggle-spacer"></div>
                        {{/unless}}
                    {{/unless}}
                </section>
            </header>

            {{!--
                gh-koenig-editor acts as a wrapper around the title input and
                koenig editor canvas to support Ghost-specific editor behaviour
            --}}
            <GhKoenigEditor
                @title={{readonly this.post.titleScratch}}
                @titleAutofocus={{this.shouldFocusTitle}}
                @titlePlaceholder={{concat (capitalize this.post.displayName) " title"}}
                @onTitleChange={{action "updateTitleScratch"}}
                @onTitleBlur={{action (perform this.saveTitleTask)}}
                @body={{readonly this.post.scratch}}
                @bodyPlaceholder={{concat "Begin writing your " this.post.displayName "..."}}
                @onBodyChange={{action "updateScratch"}}
                @headerOffset={{editor.headerHeight}}
                @scrollContainerSelector=".gh-koenig-editor"
                @scrollOffsetBottomSelector=".gh-mobile-nav-bar"
                @onEditorCreated={{action "setKoenigEditor"}}
                @onWordCountChange={{action "updateWordCount"}}
                @snippets={{this.snippets}}
                @saveSnippet={{if this.canManageSnippets this.saveSnippet}}
                @updateSnippet={{if this.canManageSnippets this.toggleUpdateSnippetModal}}
                @deleteSnippet={{if this.canManageSnippets this.toggleDeleteSnippetModal}}
                @featureImage={{this.post.featureImage}}
                @featureImageAlt={{this.post.featureImageAlt}}
                @featureImageCaption={{this.post.featureImageCaption}}
                @setFeatureImage={{action "setFeatureImage"}}
                @setFeatureImageAlt={{action "setFeatureImageAlt"}}
                @setFeatureImageCaption={{action "setFeatureImageCaption"}}
                @clearFeatureImage={{action "clearFeatureImage"}}
                @cardOptions={{hash
                    post=this.post
                }}
                @postType={{this.post.displayName}}
            />

            <div class="gh-editor-wordcount-container">
                <div class="gh-editor-wordcount">
                    {{gh-pluralize this.wordCount.wordCount "word"}}
                </div>
                <a href="https://ghost.org/help/using-the-editor/" class="flex" target="_blank">{{svg-jar "help"}}</a>
            </div>

        </GhEditor>

        {{#if this.showSettingsMenu}}
            <GhPostSettingsMenu
                @post={{this.post}}
                @toggleEmailPreviewModal={{action "toggleEmailPreviewModal"}}
                @deletePost={{action "openDeletePostModal"}}
                @updateSlugTask={{this.updateSlugTask}}
                @savePostTask={{this.savePostTask}}
            />
        {{/if}}
    </div>

    <button type="button" class="settings-menu-toggle gh-btn gh-btn-editor gh-btn-icon icon-only gh-btn-action-icon" title="Settings" {{on "click" this.toggleSettingsMenu}} data-test-psm-trigger>
        {{#if this.showSettingsMenu}}
            <span class="settings-menu-open">{{svg-jar "sidemenu-open"}}</span>
        {{else}}
            <span>{{svg-jar "sidemenu"}}</span>
        {{/if}}
    </button>

    {{#if this.showLeaveEditorModal}}
        <GhFullscreenModal @modal="leave-editor"
            @confirm={{action "leaveEditor"}}
            @close={{action "toggleLeaveEditorModal"}}
            @modifier="action wide" />
    {{/if}}

    {{#if this.showReAuthenticateModal}}
        <GhFullscreenModal @modal="re-authenticate"
            @close={{action "toggleReAuthenticateModal"}}
            @modifier="action wide" />
    {{/if}}

    {{#if this.showEmailPreviewModal}}
        <GhFullscreenModal @modal="post-email-preview"
            @model={{this.post}}
            @close={{action "toggleEmailPreviewModal"}}
            @modifier="full-overlay email-preview" />
    {{/if}}

    {{#if this.showUpgradeModal}}
        <GhFullscreenModal
            @modal="upgrade-host-limit"
            @model={{hash
                message=hostLimitError.context
                details=hostLimitError.details
            }}
            @close={{action "closeUpgradeModal"}}
            @modifier="action wide"
        />
    {{/if}}

    {{#if this.snippetToUpdate}}
        <GhFullscreenModal
            @modal="update-snippet"
            @model={{this.snippetToUpdate}}
            @confirm={{this.updateSnippet}}
            @close={{this.toggleUpdateSnippetModal}}
            @modifier="action wide"
        />
    {{/if}}

    {{#if this.snippetToDelete}}
        <GhFullscreenModal
            @modal="delete-snippet"
            @model={{this.snippetToDelete}}
            @confirm={{this.deleteSnippet}}
            @close={{this.toggleDeleteSnippetModal}}
            @modifier="action wide"
        />
    {{/if}}
{{/if}}

{{outlet}}