{{#if (feature "multipleNewsletters")}}
    <section class="gh-main-section">
        <div class="gh-expandable">
            <div class="gh-expandable-block">
                <div class="gh-expandable-header">
                    <div>
                        <h4 class="gh-expandable-title">Enable newsletter sending</h4>
                        <p class="gh-expandable-description">Newsletter features are active, posts can be sent by email</p>
                    </div>
                    <div class="for-switch">
                        <label class="switch" for="email-newsletter-enabled" {{on "click" (action "toggleEmailNewsletterEnabled")}}>
                            <input type="checkbox" checked={{this.emailNewsletterEnabled}} class="gh-input" {{on "click" (action "toggleEmailNewsletterEnabled")}} name="email-newsletter-enabled" data-test-checkbox="email-newsletter-enabled">
                            <span class="input-toggle-component mt1"></span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{#if this.emailNewsletterEnabled}}
        <div class="gh-main-section gh-newsletters">
            <h4 class="gh-main-section-header small bn">Newsletters</h4>
            <section class="gh-expandable">
                <div class="gh-expandable-block">
                    <div class="gh-main-content-card gh-newsletter-card">
                        {{svg-jar "grab" class="grab-newsletter"}}
                        <div class="gh-newsletter-card-block title-block">
                            <h3 class="gh-newsletter-card-name">
                                Daily roundup
                            </h3>
                            <p class="gh-newsletter-card-description">
                                Daily news delivered to your inbox every morning.
                            </p>
                        </div>
                        <div class="gh-newsletter-card-block stats-block">
                            <div>
                                <h3 class="gh-newsletter-card-name">19</h3>
                                <p class="gh-newsletter-card-description">Subscribers</p>  
                            </div>  
                            <div>
                                <h3 class="gh-newsletter-card-name">17</h3>
                                <p class="gh-newsletter-card-description">Posts sent</p> 
                            </div>                    
                        </div>
                        <div class="gh-newsletter-card-button-container">
                            <span class="dropdown">
                                <GhDropdownButton
                                    @dropdownName="newsletter-actions-menu-newsletter-1"
                                    @classNames="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline gh-product-card-actions-button icon-only"
                                >
                                    <span>
                                        {{svg-jar "dotdotdot"}}
                                        <span class="hidden">Actions</span>
                                    </span>
                                </GhDropdownButton>
                                    <GhDropdown
                                        @name="newsletter-actions-menu-newsletter-1"
                                        @tagName="ul"
                                        @classNames="gh-newsletter-actions-menu dropdown-menu dropdown-triangle-top-right"
                                    >
                                        <li>
                                            <button class="mr2" type="button">
                                                <span>Edit</span>
                                            </button>
                                        </li>
                                        <li>
                                            <button class="mr2" type="button">
                                                <span>Archive</span>
                                            </button>
                                        </li>
                                    </GhDropdown>
                            </span>
                        </div>
                    </div>

                    <div class="gh-main-content-card gh-newsletter-card">
                        {{svg-jar "grab" class="grab-newsletter"}}
                        <div class="gh-newsletter-card-block title-block">
                            <h3 class="gh-newsletter-card-name">
                                Weekly summary
                            </h3>
                            <p class="gh-newsletter-card-description">
                                Get the weekly highlights every Sunday.
                            </p>
                        </div>
                        <div class="gh-newsletter-card-block stats-block">
                            <div>
                                <h3 class="gh-newsletter-card-name">32</h3>
                                <p class="gh-newsletter-card-description">Subscribers</p>  
                            </div>  
                            <div>
                                <h3 class="gh-newsletter-card-name">2</h3>
                                <p class="gh-newsletter-card-description">Posts sent</p> 
                            </div>                    
                        </div>                       
                        <div class="gh-newsletter-card-button-container">
                            <span class="dropdown">
                                <GhDropdownButton
                                    @dropdownName="newsletter-actions-menu-newsletter-2"
                                    @classNames="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline gh-product-card-actions-button icon-only"
                                >
                                    <span>
                                        {{svg-jar "dotdotdot"}}
                                        <span class="hidden">Actions</span>
                                    </span>
                                </GhDropdownButton>
                                    <GhDropdown
                                        @name="newsletter-actions-menu-newsletter-2"
                                        @tagName="ul"
                                        @classNames="gh-newsletter-actions-menu dropdown-menu dropdown-triangle-top-right"
                                    >
                                        <li>
                                            <button class="mr2" type="button">
                                                <span>Edit</span>
                                            </button>
                                        </li>
                                        <li>
                                            <button class="mr2" type="button">
                                                <span>Archive</span>
                                            </button>
                                        </li>
                                    </GhDropdown>
                            </span>
                        </div>
                    </div>
                </div>
            </section>
            <button type="button" class="gh-add-newsletter" {{on "click" @toggleEmailDesignSettings}}>{{svg-jar "add-stroke"}}Add newsletter</button>
        </div>

        <section class="gh-main-section">
            <h4 class="gh-main-section-header small bn">General settings</h4>
            <div class="gh-expandable">
                <div class="gh-expandable-block">
                    <div class="gh-expandable-header">
                        <div>
                            <h4 class="gh-expandable-title">Default newsletter recipients</h4>
                            <p class="gh-expandable-description">When you publish new content, who do you usually want to send it to?</p>
                        </div>
                        <button type="button" class="gh-btn" {{action (toggle "defaultRecipientsOpen" this)}} data-test-toggle-membersemail>
                            <span>{{if this.defaultRecipientsOpen "Close" "Expand"}}</span>
                        </button>
                    </div>
                    <div class="gh-expandable-content">
                        {{#liquid-if this.defaultRecipientsOpen}}
                            <div class="gh-setting-richdd-container gh-setting-rich-dropdown">
                                <Settings::MembersEmail::DefaultRecipientsSelect
                                    @recipients={{this.recipientsSelectValue}}
                                    @segment={{this.settings.editorDefaultEmailRecipientsFilter}}
                                    @onRecipientsChange={{action "setDefaultEmailRecipients"}}
                                    @onSegmentChange={{action "setDefaultEmailRecipientsFilter"}}
                                />
                            </div>
                        {{/liquid-if}}
                    </div>
                </div>

                {{#unless this.config.mailgunIsConfigured}}
                    <div class="gh-expandable-block">
                        <div class="gh-expandable-header">
                            <div>
                                <h4 class="gh-expandable-title">Mailgun configuration</h4>
                                <p class="gh-expandable-description">The Mailgun API is used for bulk email newsletter delivery. <a href="https://ghost.org/docs/faq/mailgun-newsletters/" target="_blank" rel="noopener noreferrer">Why is this required?</a></p>
                            </div>
                            <button type="button" class="gh-btn" {{action (toggle "membersEmailOpen" this)}} data-test-toggle-membersemail>
                                <span>{{if this.membersEmailOpen "Close" "Expand"}}</span>
                            </button>
                        </div>
                        <div class="gh-expandable-content">
                            {{#liquid-if this.membersEmailOpen}}
                                <div class="flex flex-column flex">
                                    <GhFormGroup>
                                        <div class="flex items-center">
                                            <GhFormGroup @class="gh-mailgun-region no-margin">
                                                <label class="fw6 f8">Mailgun region</label>
                                                <div class="mt1">
                                                    <PowerSelect
                                                        @options={{this.mailgunRegions}}
                                                        @selected={{this.mailgunRegion}}
                                                        @onChange={{action "setMailgunRegion"}}
                                                        @class="gh-select"
                                                        @searchEnabled={{false}}
                                                        @triggerComponent="gh-power-select/trigger"
                                                        as |region|
                                                    >
                                                        {{region.flag}} {{region.name}}
                                                    </PowerSelect>
                                                </div>
                                            </GhFormGroup>
                                            <GhFormGroup @class="no-margin">
                                                <label class="fw6 f8">Mailgun domain</label>
                                                <GhTextInput
                                                    @value={{readonly this.mailgunSettings.domain}}
                                                    @input={{action "setMailgunDomain"}}
                                                    @class="mt1"
                                                    data-test-mailgun-domain-input={{true}}
                                                />
                                            </GhFormGroup>
                                        </div>
                                        <p>Find your Mailgun region and domain
                                            <a href="https://app.mailgun.com/app/sending/domains" target="_blank" class="fw5" rel="noopener noreferrer">here</a>
                                        </p>
                                    </GhFormGroup>
                                    <GhFormGroup>
                                        <label class="fw6 f8">Mailgun Private API key</label>
                                        <GhTextInput
                                            @type="password"
                                            @value={{readonly this.mailgunSettings.apiKey}}
                                            @input={{action "setMailgunApiKey"}}
                                            @class="mt1 password" @autocomplete="new-password"
                                            data-test-mailgun-api-key-input={{true}}
                                        />
                                        <p>Find your Mailgun API keys
                                            <a href="https://app.mailgun.com/app/account/security/api_keys" target="_blank" class="fw5" rel="noopener noreferrer">here</a>
                                        </p>
                                    </GhFormGroup>
                                </div>
                            {{/liquid-if}}
                        </div>
                    </div>
                {{/unless}}

                <div class="gh-expandable-block">
                    <div class="gh-expandable-header">
                        <div>
                            <h4 class="gh-expandable-title">Enable newsletter open-rate</h4>
                            <p class="gh-expandable-description">Track how many members are reading your emails</p>
                        </div>
                        <div class="for-switch">
                            <label class="switch" for="email-track-opens" {{on "click" (action "toggleEmailTrackOpens")}}>
                                <input type="checkbox" checked={{this.settings.emailTrackOpens}} class="gh-input" {{on "click" (action "toggleEmailTrackOpens")}} name="email-track-opens" data-test-checkbox="email-track-opens">
                                <span class="input-toggle-component mt1"></span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    {{/if}}
{{else}}
    <section class="gh-main-section gh-setting-email-section">
        <div class="gh-expandable">
            <div class="gh-expandable-block">
                <div class="gh-expandable-header">
                    <div>
                        <h4 class="gh-expandable-title">Enable newsletter sending</h4>
                        <p class="gh-expandable-description">Newsletter features are active, posts can be sent by email</p>
                    </div>
                    <div class="for-switch">
                        <label class="switch" for="email-newsletter-enabled" {{on "click" (action "toggleEmailNewsletterEnabled")}}>
                            <input type="checkbox" checked={{this.emailNewsletterEnabled}} class="gh-input" {{on "click" (action "toggleEmailNewsletterEnabled")}} name="email-newsletter-enabled" data-test-checkbox="email-newsletter-enabled">
                            <span class="input-toggle-component mt1"></span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{#if this.emailNewsletterEnabled}}

        <section class="gh-main-section gh-setting-email-section">
            <div class="gh-expandable">
                <div class="gh-expandable-block">
                    <div class="gh-expandable-header">
                        <div>
                            <h4 class="gh-expandable-title">Email design</h4>
                            <p class="gh-expandable-description">Customize the look and feel of your newsletters</p>
                        </div>
                        <button type="button" class="gh-btn gh-btn-green" {{on "click" @toggleEmailDesignSettings}} data-test-toggle-membersFrom><span> Customize design &rarr;</span></button>
                    </div>
                </div>
            </div>
        </section>

        <hr>

        <section class="gh-main-section gh-setting-email-section content-preview">
            <div>
                <div class="gh-expandable">
                    <div class="gh-setting-richdd-container gh-setting-rich-dropdown">
                        <div class="gh-expandable-header">
                            <div>
                                <h4 class="gh-expandable-title">Default newsletter recipients</h4>
                                <p class="gh-expandable-description">When you publish new content, who do you usually want to send it to?</p>
                            </div>
                        </div>
                        <Settings::MembersEmail::DefaultRecipientsSelect
                            @recipients={{this.recipientsSelectValue}}
                            @segment={{this.settings.editorDefaultEmailRecipientsFilter}}
                            @onRecipientsChange={{action "setDefaultEmailRecipients"}}
                            @onSegmentChange={{action "setDefaultEmailRecipientsFilter"}}
                        />
                    </div>
                </div>
                <div class="gh-expandable">
                    <div class="gh-expandable-block">
                        <div class="gh-expandable-header">
                            <div>
                                <h4 class="gh-expandable-title">Email addresses</h4>
                                <p class="gh-expandable-description">Contact information used for newsletters and member login emails</p>
                            </div>
                            <button type="button" class="gh-btn" {{action (toggle "membersFromOpen" this)}} data-test-toggle-membersFrom><span>{{if this.membersFromOpen "Close" "Expand"}}</span></button>
                        </div>
                        <div class="gh-expandable-content">
                            {{#liquid-if this.membersFromOpen}}
                                <div>
                                    <GhFormGroup>
                                        <label class="fw6 f8">Newsletter email address</label>
                                        <div class="flex items-center justify-center mt1">
                                            <GhTextInput
                                                @value={{readonly this.fromAddress}}
                                                @input={{action "setFromAddress" value="target.value"}}
                                                @class="gh-labs-members-emailinput"
                                            />
                                            <GhTaskButton
                                                @buttonText="Update newsletter address"
                                                @runningText="Sending..."
                                                @successText="Confirmation email sent"
                                                @disabled={{this.disableUpdateFromAddressButton}}
                                                @task={{this.updateFromAddress}}
                                                @class="gh-btn gh-btn-icon gh-btn-green gh-btn-textfield-group gh-labs-members-emaildropdown"
                                                data-test-button="update-from-address"
                                            />
                                        </div>
                                        <p>The address your newsletter posts are sent from</p>
                                    </GhFormGroup>
                                    {{#if this.showFromAddressConfirmation}}
                                    <div class="flex items-center green-d1 nt3 lh-1">
                                        {{svg-jar "check-circle" class="w4 h4 mr1 stroke-green-d1"}} <span class="nudge-left--2">Check your inbox and confirm before saving your settings</span>
                                    </div>
                                    {{/if}}
                                </div>
                                <GhFormGroup @class="for-select gh-members-defaultemaildd">
                                    <label class="fw6 f8" for="reply-address">Newsletter replies go to</label>
                                    <span class="gh-select mt1">
                                        {{one-way-select this.selectedReplyAddress
                                            id="reply-address"
                                            name="reply-address"
                                            options=(readonly this.replyAddresses)
                                            optionValuePath="value"
                                            optionLabelPath="label"
                                            update=(action "setReplyAddress")
                                        }}
                                        {{svg-jar "arrow-down-small"}}
                                    </span>
                                    <div class="flex justify-between">
                                        <p>Where you receive responses to newsletters</p>
                                        {{#if (eq this.settings.membersReplyAddress "support")}}
                                            <LinkTo @route="settings.membership" class="gh-update-support-address" type="button" @query={{hash showPortalSettings=true}}>Change support email address</LinkTo>
                                        {{/if}}
                                    </div>
                                </GhFormGroup>
                            {{/liquid-if}}
                        </div>
                    </div>
                </div>
                <div class="gh-expandable">
                    <div class="gh-expandable-block">
                        <div class="gh-expandable-header">
                            <div>
                                <h4 class="gh-expandable-title">Enable newsletter open-rate</h4>
                                <p class="gh-expandable-description">Track how many members are reading your emails</p>
                            </div>
                            <div class="for-switch">
                                <label class="switch" for="email-track-opens" {{on "click" (action "toggleEmailTrackOpens")}}>
                                    <input type="checkbox" checked={{this.settings.emailTrackOpens}} class="gh-input" {{on "click" (action "toggleEmailTrackOpens")}} name="email-track-opens" data-test-checkbox="email-track-opens">
                                    <span class="input-toggle-component mt1"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="gh-email-publishmenu-preview">
                <h4 class="gh-main-section-header small bn">Preview</h4>
                <div class="gh-publishmenu-dropdown-container">
                    <div class="gh-publishmenu-dropdown">
                        <header class="gh-publishmenu-heading">Ready to <span class="gh-publishmenu-heading-dropdown">{{#if this.emailPreviewVisible}} publish & send {{else}} publish {{/if}}{{svg-jar "arrow-down"}}</span> this post?</header>
                        <section class="gh-publishmenu-content">
                            <div class="gh-publishmenu-section {{if this.emailPreviewVisible "" "mb7"}}">
                                <div class="gh-publishmenu-radio active">
                                    <div class="gh-publishmenu-radio-button"></div>
                                    <div class="gh-publishmenu-radio-content">
                                        <div class="gh-publishmenu-radio-label">Set it live now</div>
                                    </div>
                                </div>
                                <div class="gh-publishmenu-radio">
                                    <div class="gh-publishmenu-radio-button"></div>
                                    <div class="gh-publishmenu-radio-content">
                                        <div class="gh-publishmenu-radio-label">Schedule it for later</div>
                                    </div>
                                </div>
                            </div>
                            {{#if this.emailPreviewVisible}}
                                <div class="gh-publishmenu-section">
                                    <div class="gh-publishmenu-email">
                                        <div class="gh-publishmenu-email-label">
                                            <label class="gh-publishmenu-radio-label mb3">Send by email to</label>
                                            <div class="form-group">
                                                <GhMembersRecipientSelect
                                                    @filter={{this.settings.editorDefaultEmailRecipientsFilter}}
                                                />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {{/if}}
                        </section>
                    </div>
                </div>
            </div>
        </section>

        {{#unless this.config.mailgunIsConfigured}}
            <hr>
            <section class="gh-main-section">
                <h4 class="gh-main-section-header small bn">Advanced</h4>
                <div class="gh-expandable">
                    <div class="gh-expandable-block">
                        <div class="gh-expandable-header">
                            <div>
                                <h4 class="gh-expandable-title">Mailgun configuration</h4>
                                <p class="gh-expandable-description">The Mailgun API is used for bulk email newsletter delivery. <a href="https://ghost.org/docs/faq/mailgun-newsletters/" target="_blank" rel="noopener noreferrer">Why is this required?</a></p>
                            </div>
                            <button type="button" class="gh-btn" {{action (toggle "membersEmailOpen" this)}} data-test-toggle-membersemail>
                                <span>{{if this.membersEmailOpen "Close" "Expand"}}</span>
                            </button>
                        </div>
                        <div class="gh-expandable-content">
                            {{#liquid-if this.membersEmailOpen}}
                                <div class="flex flex-column flex">
                                    <GhFormGroup>
                                        <div class="flex items-center">
                                            <GhFormGroup @class="gh-mailgun-region no-margin">
                                                <label class="fw6 f8">Mailgun region</label>
                                                <div class="mt1">
                                                    <PowerSelect
                                                        @options={{this.mailgunRegions}}
                                                        @selected={{this.mailgunRegion}}
                                                        @onChange={{action "setMailgunRegion"}}
                                                        @class="gh-select"
                                                        @searchEnabled={{false}}
                                                        @triggerComponent="gh-power-select/trigger"
                                                        as |region|
                                                    >
                                                        {{region.flag}} {{region.name}}
                                                    </PowerSelect>
                                                </div>
                                            </GhFormGroup>
                                            <GhFormGroup @class="no-margin">
                                                <label class="fw6 f8">Mailgun domain</label>
                                                <GhTextInput
                                                    @value={{readonly this.mailgunSettings.domain}}
                                                    @input={{action "setMailgunDomain"}}
                                                    @class="mt1"
                                                    data-test-mailgun-domain-input={{true}}
                                                />
                                            </GhFormGroup>
                                        </div>
                                        <p>Find your Mailgun region and domain
                                            <a href="https://app.mailgun.com/app/sending/domains" target="_blank" class="fw5" rel="noopener noreferrer">here</a>
                                        </p>
                                    </GhFormGroup>
                                    <GhFormGroup>
                                        <label class="fw6 f8">Mailgun Private API key</label>
                                        <GhTextInput
                                            @type="password"
                                            @value={{readonly this.mailgunSettings.apiKey}}
                                            @input={{action "setMailgunApiKey"}}
                                            @class="mt1 password" @autocomplete="new-password"
                                            data-test-mailgun-api-key-input={{true}}
                                        />
                                        <p>Find your Mailgun API keys
                                            <a href="https://app.mailgun.com/app/account/security/api_keys" target="_blank" class="fw5" rel="noopener noreferrer">here</a>
                                        </p>
                                    </GhFormGroup>
                                </div>
                            {{/liquid-if}}
                        </div>
                    </div>
                </div>
            </section>
        {{/unless}}

    {{/if}}
{{/if}}