Ghost/ghost/admin/app/components/settings/members-email-labs/newsletter-management.hbs

<div class="gh-main-section gh-newsletters">
    <div class="flex justify-between items-center">
        <h4 class="gh-main-section-header small bn">Newsletters</h4>
        {{#if this.archivedNewsletters}}
            <div>
                <div>
                    <PowerSelect
                        @selected={{this.statusFilter}}
                        @options={{this.statusFilters}}
                        @searchEnabled={{false}}
                        @onChange={{this.changeStatusFilter}}
                        @triggerComponent="gh-power-select/trigger"
                        @triggerClass="gh-dropdown-archived ember-power-select-inline"
                        @dropdownClass="gh-contentfilter-menu-dropdown"
                        @horizontalPosition="right"
                        @matchTriggerWidth={{false}}
                        as |status|
                    >
                        {{titleize status}}
                    </PowerSelect>
                </div>
            </div>
        {{/if}}
    </div>
    <section class="gh-expandable">
        <div class="gh-expandable-block">
            {{#if this.loadNewslettersTask.isRunning}}
                <div class="gh-main-content">... loading</div>
            {{else}}
                {{#unless this.displayingDefault}}
                    {{#if (eq this.statusFilter "archived")}}
                    <h4 class="gh-expandable-title">Archived newsletters</h4>
                    <p class="gh-expandable-description">The newsletters below are no longer visible to members.</p>
                    {{else}}
                        <h4 class="gh-expandable-title">Active newsletters</h4>
                        <p class="gh-expandable-description">Drag to set the order viewed by members on your site.</p>
                    {{/if}}
                {{/unless}}
                <SortableObjects
                    @sortableObjectList={{this.filteredNewsletters}}
                    @useSwap={{false}}
                    @sortEndAction={{perform this.reorderNewslettersTask}}
                >
                    {{#each this.filteredNewsletters as |newsletter|}}
                        <DraggableObject
                            class="gh-main-content-card gh-newsletter-card {{if (and (eq newsletter.status "active") (not this.displayingDefault)) "gh-newsletter-card-draggable"}} {{unless this.displayingDefault "multiple"}}"
                            @content={{newsletter}}
                            @dragHandle=".grab-newsletter"
                            @isSortable={{true}}
                        >
                            {{svg-jar "grab" class="grab-newsletter"}}

                            {{#if this.displayingDefault}}
                                <div class="gh-newsletter-card-block title-block">
                                    <h3 class="gh-newsletter-card-name">
                                        {{newsletter.name}}
                                    </h3>
                                    <p class="gh-newsletter-card-description">
                                        {{newsletter.description}}
                                    </p>
                                </div>
                            {{else}}
                                <LinkTo @route="settings.members-email-labs.edit-newsletter" @model={{newsletter.id}} class="gh-newsletter-card-block title-block">
                                    <h3 class="gh-newsletter-card-name">
                                        {{newsletter.name}}
                                    </h3>
                                    <p class="gh-newsletter-card-description">
                                        {{newsletter.description}}
                                    </p>
                                </LinkTo>
                            {{/if}}
                            <div class="gh-newsletter-card-block stats-block {{unless this.displayingDefault "multiple"}}">
                                <div>
                                    <h3 class="gh-newsletter-card-name">{{newsletter.members.total}}</h3>
                                    <p class="gh-newsletter-card-description">Subscribers</p>
                                </div>
                                <div>
                                    <h3 class="gh-newsletter-card-name">{{newsletter.posts.total}}</h3>
                                    <p class="gh-newsletter-card-description">Posts sent</p>
                                </div>
                            </div>
                            <div class="gh-newsletter-card-block cta-block">
                                {{#if this.displayingDefault}}
                                    <LinkTo @route="settings.members-email-labs.edit-newsletter" @model={{newsletter.id}} class="gh-btn gh-btn-green"><span>Customize &rarr;</span></LinkTo>
                                {{else}}
                                    <GhBasicDropdown @verticalPosition="below" @horizontalPosition="right" @renderInPlace={{true}} as |dd|>
                                        <dd.Trigger class="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>
                                        </dd.Trigger>
                                        <dd.Content class="relative-dropdown-menu gh-newsletter-actions-menu">
                                            <ul class="dropdown-menu dropdown-triangle-top-right" role="listbox" {{css-transition "anim-fade-in-scale"}}>
                                                <li>
                                                    <LinkTo @route="settings.members-email-labs.edit-newsletter" @model={{newsletter.id}} class="mr2"><span>Edit</span></LinkTo>
                                                </li>
                                                {{#if (eq newsletter.status "active")}}
                                                    <li>
                                                        <button class="mr2" type="button" {{on "click" (fn this.archiveNewsletter newsletter)}}>
                                                            <span>Archive</span>
                                                        </button>
                                                    </li>
                                                {{/if}}
                                                {{#if (eq newsletter.status "archived")}}
                                                    <li>
                                                        <button class="mr2" type="button" {{on "click" (perform this.unarchiveNewsletterTask newsletter)}}>
                                                            <span>Reactivate</span>
                                                        </button>
                                                    </li>
                                                {{/if}}
                                            </ul>
                                        </dd.Content>
                                    </GhBasicDropdown>
                                {{/if}}
                            </div>
                        </DraggableObject>
                    {{else}}
                        <div class="gh-main-content">No newsletters found</div>
                    {{/each}}
                </SortableObjects>
            {{/if}}
        </div>
    </section>
    <LinkTo @route="settings.members-email-labs.new-newsletter" class="gh-add-newsletter">{{svg-jar "add-stroke"}}Add newsletter</LinkTo>
</div>