<h4 class="gh-main-section-header small bn">Newsletters</h4>
<div class="gh-main-section-content grey {{unless this.suppressionData.suppressed 'gh-member-newsletter-section'}}">
    {{#unless this.suppressionData.suppressed}}
        <div class="gh-member-newsletters">
            {{#each this.newsletters as |newsletter|}}
                <div class="gh-member-newsletter-row" data-test-member-settings-switch>
                    <div>
                        <h4 class="gh-member-newsletter-title">{{newsletter.name}}</h4>
                    </div>
                    <div class="for-switch {{if this.suppressionData.suppressed 'disabled'}}">
                        <label class="switch" for={{newsletter.forId}}>
                            <Input
                                @checked={{newsletter.subscribed}}
                                @type="checkbox"
                                id={{newsletter.forId}}
                                name="subscribed"
                                data-test-checkbox="member-subscribed"
                                {{on "click" (fn this.updateNewsletterPreference newsletter)}}
                            />
                            <span class="input-toggle-component"></span>
                        </label>
                    </div>
                </div>
            {{/each}}
        </div>
    {{/unless}}

    {{#if this.suppressionData.suppressed}}
        <div class="gh-members-no-data gh-member-newsletter-no-data">
            {{#if (eq this.suppressionData.reason 'fail')}}
                {{svg-jar "suppression-notice-bounced" class="gh-member-newsletter-icon"}}
            {{/if}}

            {{#if (eq this.suppressionData.reason 'spam')}}
                {{svg-jar "suppression-notice-flagged" class="gh-member-newsletter-icon"}}
            {{/if}}

            <h4>Email disabled</h4>

            <p>
                {{#if (eq this.suppressionData.reason 'fail')}}
                    Bounced on {{this.suppressionData.date}}
                {{/if}}

                {{#if (eq this.suppressionData.reason 'spam')}}
                    Flagged as spam on {{this.suppressionData.date}}
                {{/if}}

                <a class="midgrey" href="https://ghost.org/help/disabled-emails" target="_blank" rel="noopener noreferrer">Learn more</a>
            </p>
        </div>
    {{else}}
        <div class="gh-member-newsletter-footer midgrey">
            If disabled, member will <em>not</em> receive newsletter emails
        </div>
    {{/if}}
</div>
