<div class="gh-publish-title"><span>Ready, set, publish.</span> Share it with the world.</div>
<div class="gh-publish-settings">
    <div class="gh-publish-setting">
        <div class="gh-publish-setting-title">
            {{svg-jar "send-email"}}
            {{#if @publishOptions.emailUnavailable}}
                <span>Publish on site</span>
            {{else}}
                <button type="button" class="gh-publish-setting-trigger" {{on "click" (fn this.toggleSection "publishType")}}>
                    <span>{{@publishOptions.selectedPublishTypeOption.display}}</span>
                </button>
                {{svg-jar "arrow-down" class="icon-expand"}}
            {{/if}}
        </div>
        {{#liquid-if (eq this.openSection "publishType")}}
            <div class="gh-publish-setting-form">
                <EditorLabs::PublishOptions::PublishType
                    @publishOptions={{@publishOptions}}
                />
            </div>
        {{/liquid-if}}
    </div>

    <div class="gh-publish-setting">
        <div class="gh-publish-setting-title {{if (eq @publishOptions.publishType "publish") "disabled"}}">
            {{svg-jar "member"}}
            {{#if @publishOptions.willEmail}}
                <button type="button" class="gh-publish-setting-trigger" {{on "click" (fn this.toggleSection "emailRecipients")}}>
                    {{#let (members-count-fetcher query=(hash filter=@publishOptions.fullRecipientFilter)) as |countFetcher|}}
                        {{countFetcher.count}}
                    {{/let}}
                    {{#unless @publishOptions.onlyDefaultNewsletter}}
                        <span>{{@publishOptions.newsletter.name}}</span>
                    {{/unless}}
                    subscribers
                </button>
            {{else}}
                {{#if (eq @publishOptions.publishType "publish")}}
                    <div class="gh-publish-setting-trigger">
                        Not sent to any members
                    </div>
                {{else}}
                    <button type="button" class="gh-publish-setting-trigger" {{on "click" (fn this.toggleSection "emailRecipients")}}>
                        Not sent to any members
                    </button>
                {{/if}}
            {{/if}}
            {{svg-jar "arrow-down" class="icon-expand"}}
        </div>
        {{#liquid-if (eq this.openSection "emailRecipients")}}
            <div class="gh-publish-setting-form">
                <EditorLabs::PublishOptions::EmailRecipients
                    @publishOptions={{@publishOptions}}
                />
            </div>
        {{/liquid-if}}
    </div>

    <div class="gh-publish-setting last">
        <div class="gh-publish-setting-title">
            {{svg-jar "clock"}}
            <button type="button" class="gh-publish-setting-trigger" {{on "click" (fn this.toggleSection "publishAt")}}>
                <span>
                    {{#if @publishOptions.isScheduled}}
                        {{capitalize (gh-format-post-time @publishOptions.scheduledAtUTC draft=true)}}
                    {{else}}
                        Right now
                    {{/if}}
                </span>
            </button>
            {{svg-jar "arrow-down" class="icon-expand"}}
        </div>
        {{#liquid-if (eq this.openSection "publishAt")}}
            <div class="gh-publish-setting-form">
                <EditorLabs::PublishOptions::PublishAt
                    @publishOptions={{@publishOptions}}
                />
            </div>
        {{/liquid-if}}
    </div>

</div>

<div class="gh-publish-cta">
    <button type="button" class="gh-btn gh-btn-black gh-btn-large" {{on "click" @confirm}}><span>Looks good, next &rarr;</span></button>
    <div class="gh-publish-cta-secondary">
        Or 
        <button type="button" class="gh-btn gh-btn-link gh-btn-large" {{on "click" @close}}>continue editing</button>
    </div>
</div>