Ghost/ghost/admin/app/components/members/modals/bulk-unsubscribe.hbs

<div class="modal-content">
    <header class="modal-header" data-test-modal="unsubscribe-members">
        <h1>Unsubscribe members from email?</h1>
    </header>
    <button type="button" class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>

    {{#if this.hasRun}}
        <div class="gh-content-box pa" data-test-state="unsubscribe-complete">
            {{#if this.error}}
                <div class="flex items-center">
                    {{svg-jar "warning" class="w4 h4 fill-red mr2 nudge-top--3"}}
                    <div>
                        <p class="ma0 pa0">
                            <span class="fw5" data-test-text="unsubscribe-error">{{this.error}}</span>
                        </p>
                    </div>
                </div>
            {{else}}
                <div class="flex items-center">
                    {{svg-jar "check-circle" class="w4 h4 stroke-green mr2"}}
                    <p class="ma0 pa0">
                        <span class="fw6" data-test-text="unsubscribe-count">{{gh-pluralize this.response.stats.successful "member"}}</span>
                        successfully unsubscribed
                    </p>
                </div>
                {{#if this.response.stats.unsuccessful}}
                    <div class="flex items-start mt2" data-test-bulk-delete-errors>
                        {{svg-jar "warning" class="w4 h4 fill-red mr2 nudge-top--3"}}
                        <div>
                            <p class="ma0 pa0">
                                <span class="fw5" data-test-text="invalid-count">{{gh-pluralize this.response.stats.unsuccessful "member"}}</span>
                                failed to unsubscribe
                            </p>
                        </div>
                    </div>
                {{/if}}
            {{/if}}
        </div>
    {{else}}
        <div class="modal-body" data-test-state="unsubscribe-unconfirmed">
            {{#if @data.query}}
                {{#let (members-count-fetcher query=@data.query) as |countFetcher|}}
                    {{#if countFetcher.isLoading}}
                        <GhLoadingSpinner />
                    {{else}}
                        {{#if this.hasMultipleNewsletters }}
                         <p>
                            Which newsletter should these
                            <strong data-test-text="unsubscribe-count">{{gh-pluralize countFetcher.count "member"}}</strong> be unsubscribed from?
                        </p>
                        <OneWaySelect
                            @value={{this.selectedNewsletterId}}
                            @options={{this.newsletterList}}
                            @optionLabelPath="name"
                            @optionValuePath="value"
                            @optionTargetPath="value"
                            @update={{this.setSelectedNewsletter}}
                            data-test-select="members-single-newsletter-unsubscribe"
                        />
                        {{else}}
                        <p>
                            You're about to unsubscribe
                            <strong data-test-text="unsubscribe-count">{{gh-pluralize countFetcher.count "member"}}</strong> from email newsletters.
                            Are you sure?
                        </p>
                        {{/if}}

                    {{/if}}
                {{/let}}
            {{else}}
                <p>No members are selected.</p>
            {{/if}}
        </div>
    {{/if}}

    <div class="modal-footer">
        {{#if this.hasRun}}
            <button class="gh-btn gh-btn-black" data-test-button="close-modal" type="button" {{on "click" @close}}>
                <span>Close</span>
            </button>
        {{else}}
            {{#if this.hasMultipleNewsletters}}
            <button class="gh-btn" data-test-button="cancel" type="button" {{on "click" @close}}>
                <span>Cancel</span>
            </button>

            <GhTaskButton
                @disabled={{this.isDisabled}}
                @buttonText="Unsubscribe members"
                @successText="Unsubscribed"
                @task={{this.bulkUnsubscribeTask}}
                @class="gh-btn gh-btn-red gh-btn-icon"
                data-test-button="confirm"
            />

            {{else}}
            <button class="gh-btn" data-test-button="cancel" type="button" {{on "click" @close}}>
                <span>Cancel</span>
            </button>

            <GhTaskButton
                @disabled={{this.isDisabled}}
                @buttonText="Unsubscribe members"
                @successText="Unsubscribed"
                @task={{this.bulkUnsubscribeTask}}
                @class="gh-btn gh-btn-red gh-btn-icon"
                data-test-button="confirm"
            />
            {{/if}}
        {{/if}}
    </div>

</div>