<div class="flex flex-column h-100 items-center overflow-auto" data-test-modal="publish-flow">
    <header class="gh-publish-header">
        <h2>Publish</h2>

        {{#unless this.isComplete}}
            <div class="gh-btn-group-right">
                <button
                    type="button"
                    class="gh-btn gh-btn-editor gh-editor-preview-trigger"
                    title="Close"
                    {{on "click" @close}}
                    data-test-button="publish-flow-publish"
                >
                    <span>Close</span>
                </button>
                {{#unless this.emailErrorMessage}}
                    <button
                        type="button"
                        class="gh-btn"
                        {{on "click" @data.togglePreviewPublish}}
                        data-test-button="publish-flow-preview"
                    >
                        <span>Preview</span>
                    </button>
                {{/unless}}
            </div>
        {{/unless}}
    </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}}
                @setCompleted={{this.setCompleted}}
                @cancel={{this.toggleConfirm}}
                @close={{@close}}
            />
        {{else}}
            <Editor::Modals::PublishFlow::Options
                @publishOptions={{@data.publishOptions}}
                @recipientType={{this.recipientType}}
                @confirm={{this.toggleConfirm}}
                @close={{@close}}
            />
        {{/if}}
    </div>
</div>
