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="ember-power-select-inline"
                        @dropdownClass="gh-contentfilter-menu-dropdown"
                        @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}}
                <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 (eq newsletter.status "active") "gh-newsletter-card-draggable"}} {{unless this.displayingDefault "multiple"}}"
                            @content={{newsletter}}
                            @dragHandle=".grab-newsletter"
                            @isSortable={{true}}
                        >
                            {{svg-jar "grab" class="grab-newsletter"}}

                            <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>
                            <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}}
                                    <span class="dropdown">
                                        <GhDropdownButton
                                            @dropdownName="newsletter-actions-menu-newsletter-{{newsletter.id}}"
                                            @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-{{newsletter.id}}"
                                            @tagName="ul"
                                            @classNames="gh-newsletter-actions-menu dropdown-menu dropdown-triangle-top-right"
                                        >
                                            <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" (perform this.archiveNewsletterTask 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>Un-archive</span>
                                                    </button>
                                                </li>
                                            {{/if}}
                                        </GhDropdown>
                                    </span>
                                {{/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>