<div class="flex flex-column h-100 items-center overflow-auto" data-test-modal="publish-flow">
    <header class="gh-publish-header">
        <button class="gh-btn-editor gh-publish-back-button" title="Close" type="button" {{on "click" @close}} data-test-button="close-publish-flow">
            <span>{{svg-jar "arrow-left"}} Editor</span>
        </button>

        {{#if (and (not this.emailErrorMessage) (not this.isComplete))}}
            <div class="flex items-center pe-auto h-100">
                <button
                    type="button"
                    class="gh-btn gh-btn-editor gh-editor-preview-trigger"
                    {{on "click" @data.togglePreviewPublish}}
                    data-test-button="publish-flow-preview"
                >
                    <span>Preview</span>
                </button>
                <button
                    type="button"
                    class="gh-btn gh-btn-editor darkgrey gh-publish-trigger active"
                    title="Close"
                    {{on "click" @close}}
                    data-test-button="publish-flow-publish"
                >
                    <span>Publish</span>
                </button>
                <div class="settings-menu-toggle-spacer"></div>
            </div>
        {{/if}}
    </header>

    <div class="gh-publish-settings-container {{unless @data.skipAnimation "fade-in"}}">
        {{#if this.emailErrorMessage}}
            <Editor::Modals::PublishFlow::CompleteWithEmailError
                @emailErrorMessage={{this.emailErrorMessage}}
                @publishOptions={{@data.publishOptions}}
                @setCompleted={{this.setCompleted}}
                @close={{@close}}
            />
        {{else if this.isConfirming}}
            <Editor::Modals::PublishFlow::Confirm
                @publishOptions={{@data.publishOptions}}
                @recipientType={{this.recipientType}}
                @saveTask={{this.saveTask}}
                @cancel={{this.toggleConfirm}}
                @close={{@close}}
            />
        {{else if this.isComplete}}
            <Editor::Modals::PublishFlow::Complete
                @publishOptions={{@data.publishOptions}}
                @recipientType={{this.recipientType}}
                @postCount={{this.postCount}}
                @close={{@close}}
            />
        {{else}}
            <Editor::Modals::PublishFlow::Options
                @publishOptions={{@data.publishOptions}}
                @recipientType={{this.recipientType}}
                @confirm={{this.toggleConfirm}}
                @close={{@close}}
            />
        {{/if}}
    </div>
</div>
