<div class="modal-content" data-test-modal="editor/confirm-publish">
    {{#unless this.errorMessage}}
        <header class="modal-header" data-test-state="confirm-publish">
            <h1>Ready to go? Here’s what happens next</h1>
        </header>
        <button class="close" title="Close" type="button" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>

        <div class="modal-body" {{did-insert this.countRecipientsTask.perform}}>
            {{#if (eq @data.post.displayName 'page')}}
                <p>
                    Your page will be published {{if @data.isScheduled "at the scheduled time" "immediately"}}. Sound good?
                </p>
            {{else if this.isPublishOnly}}
                <p>
                    Your post will be published {{if @data.isScheduled "at the scheduled time" "immediately"}}
                    and won't be sent as an email. Sound good?
                </p>
            {{else}}
                {{#if this.countRecipientsTask.isRunning}}
                    <div class="flex flex-column items-center">
                        <div class="gh-loading-spinner"></div>
                    </div>
                {{else}}
                    {{#if this.isEmailOnlyWithNoMembers}}
                        <p>
                            You're trying to {{if @data.isScheduled "schedule" "send"}} a post
                            as an email newsletter with <strong>0 members</strong> selected.
                            Choose a segment of your audience and try again!
                        </p>
                    {{else if (eq this.memberCount 0)}}
                        <p>
                            Your post will be published {{if @data.isScheduled "at the scheduled time" "immediately"}}
                            and won't be sent as an email. Sound good?
                        </p>
                    {{else}}
                        <p>
                            Your post will be delivered to <strong>{{this.memberCountString}}</strong>
                            {{#if @data.emailOnly}}
                                but it will <strong>not</strong>
                            {{else}}
                                and will
                            {{/if}}
                            be published on your site{{#if @data.isScheduled}} at the scheduled time{{/if}}. Sound good?
                        </p>
                    {{/if}}
                {{/if}}
            {{/if}}
        </div>

        <div class="modal-footer">
            {{#if this.isEmailOnlyWithNoMembers}}
                <button type="button" class="gh-btn" {{on "click" @close}} data-test-button="cancel-email-with-no-members">
                    <span>Close</span>
                </button>
            {{else}}
                <button class="gh-btn" data-test-button="cancel-publish-and-email" type="button" {{on "click" @close}}>
                    <span>Cancel</span>
                </button>
                {{#if @data.isScheduled}}
                    <GhTaskButton
                        @disabled={{this.countRecipientsTask.isRunning}}
                        @buttonText="Schedule"
                        @runningText="Scheduling..."
                        @task={{this.confirmAndCheckErrorTask}}
                        @class="gh-btn gh-btn-black gh-btn-icon"
                        data-test-button="confirm-schedule"
                    />
                {{else}}
                    <GhTaskButton
                        @disabled={{this.countRecipientsTask.isRunning}}
                        @buttonText={{this.publishAndSendButtonText}}
                        @runningText={{if @data.emailOnly "Sending..." "Publishing..."}}
                        @task={{this.confirmAndCheckErrorTask}}
                        @class="gh-btn gh-btn-black gh-btn-icon"
                        data-test-button="confirm-publish"
                    />
                {{/if}}
            {{/if}}
        </div>

    {{else}}
        <header class="modal-header" data-test-state="failed-send">
            <h1>Failed to send email</h1>
        </header>
        <button class="close" title="Close" type="button" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>

        <div class="modal-body">
            <p>Your post has been published but the email failed to send. Please verify your email settings if the error persists.</p>
            <p class="mb0">
                <button type="button" class="gh-btn gh-btn-text regular" {{on "click" this.toggleErrorDetails}} data-test-toggle-error>
                    {{#if this.errorDetailsOpen}}
                        {{svg-jar "arrow-down" class="nudge-top--2 w2 h2 fill-darkgrey mr1"}}
                    {{else}}
                        {{svg-jar "arrow-right" class="nudge-top--1 w2 h2 fill-darkgrey mr1"}}
                    {{/if}}
                    <span>Error details</span>
                </button>
            </p>

            {{#liquid-if this.errorDetailsOpen}}
                <p class="error gh-box gh-box-error mt3 mb3">
                    {{svg-jar "warning"}}
                    {{this.errorMessage}}
                </p>
            {{/liquid-if}}
        </div>

        <div class="modal-footer">
            <button class="gh-btn" data-test-button="cancel-publish-and-email" type="button" {{on "click" @close}}>
                <span>Close</span>
            </button>
            <GhTaskButton
                @buttonText="Retry email"
                @runningText="Sending..."
                @task={{this.retryEmailTask}}
                @class="gh-btn gh-btn-red gh-btn-icon"
                data-test-button="retry-email"
            />
        </div>
    {{/unless}}
</div>