Ghost/ghost/admin/app/templates/members.hbs

<section class="gh-canvas">
    <GhCanvasHeader class="gh-canvas-header members-header">
        <h2 class="gh-canvas-title" data-test-screen-title>Members</h2>
        <section class="view-actions">
            <GhMembersFilter
                @selectedLabel={{this.selectedLabel}}
                @availableLabels={{this.availableLabels}}
                @onLabelChange={{this.changeLabel}}
                @onLabelAdd={{this.addLabel}}
                @onLabelEdit={{this.editLabel}}
                @selectedPaidParam={{this.selectedPaidParam}}
                @availablePaidParams={{this.paidParams}}
                @onPaidParamChange={{this.changePaidParam}}
            />
            <div class="relative gh-members-header-search">
                {{svg-jar "search" class="gh-input-search-icon"}}
                <GhTextInput
                    placeholder="Search members..."
                    @value={{this.searchText}}
                    @input={{this.search}}
                    class="gh-members-list-searchfield {{if this.searchText "active"}}" />
            </div>

            <span class="dropdown">
                <GhDropdownButton @dropdownName="members-actions-menu"
                    @classNames="gh-btn gh-btn-white gh-btn-icon only-has-icon gh-actions-cog" @title="Members Actions"
                    @data-test-user-actions="true">
                    <span>
                        {{svg-jar "settings"}}
                        <span class="hidden">Actions</span>
                    </span>
                </GhDropdownButton>
                <GhDropdown @name="members-actions-menu" @tagName="ul"
                    @classNames="gh-member-actions-menu dropdown-menu dropdown-triangle-top-right">
                    <li>
                        <LinkTo @route="members.import" class="mr2" data-test-link="import-csv">
                            <span>Import members</span>
                        </LinkTo>
                    </li>
                    <li>
                        <button class="mr2" {{on "click" this.exportData}}>
                            <span>Export all members</span>
                        </button>
                    </li>
                </GhDropdown>
            </span>
            <LinkTo @route="member.new" class="gh-btn gh-btn-green" data-test-new-member-button="true"><span>New member</span></LinkTo>
        </section>
    </GhCanvasHeader>

    {{#unless this.members.loading}}
        <section class="view-container">
            {{#if (and this.members this.showingAll)}}
                <section>
                    <GhMembersChart nightShift={{this.feature.nightShift}} />
                </section>
            {{/if}}

            <section class="content-list">
                {{!-- overlaid on header to keep table column sizing --}}
                {{#if this.isEditing}}
                    <div class="members-list-header-overlay" data-test-edit-overlay>
                        <div class="flex flex-row">
                            <div>
                                <input type="checkbox" id="select-all-members" name="select-all-members" {{on "input" this.toggleSelectAll}} data-test-checkbox="select-all">
                                <label for="select-all-members" data-test-label="selection">{{this.selectAllLabel}}</label>
                            </div>
                            <button class="gh-btn" {{on "click" this.toggleDeleteMembersModal}} disabled={{not this.selectedCount}} data-test-button="delete">
                                <span>Delete</span>
                            </button>
                        </div>

                        <button class="gh-btn" {{on "click" this.toggleEditMode}} data-test-button="done">
                            <span>Done</span>
                        </button>
                    </div>
                {{/if}}

                <ol class="members-list gh-list {{unless this.members "no-posts"}}">
                    {{#if this.members}}
                        <li class="gh-list-row header relative">
                            {{#if this.isEditing}}
                                {{!-- necessary because we add an extra column in the list items --}}
                                <div class="gh-list-header gh-members-list-checkbox"></div>
                            {{/if}}
                            <div class="gh-list-header" data-test-list-header>{{this.listHeader}}</div>
                            <div class="gh-list-header gh-members-list-geolocation gh-list-cellwidth-20 nowrap">Location</div>
                            <div class="gh-list-header gh-members-list-subscribed-at gh-list-cellwidth-20 nowrap">Created</div>
                            <div class="gh-list-header gh-members-list-chevron gh-list-cellwidth-chevron">
                                {{!-- TODO: 🍆🖌 --}}
                                {{#if this.config.enableDeveloperExperiments}}
                                    <button class="gh-btn" style="position: absolute; top: 2px; right: 3px" {{on "click" this.toggleEditMode}} data-test-button="edit">
                                        <span>Edit</span>
                                    </button>
                                {{/if}}
                            </div>
                        </li>
                        <VerticalCollection @items={{this.members}} @key="id" @containerSelector=".gh-main" @estimateHeight={{69}} @staticHeight={{true}} @bufferSize={{20}} as |member|>
                            <GhMembersListItem
                                @member={{member}}
                                @isEditing={{this.isEditing}}
                                @isSelected={{this.allSelected}}
                                @data-test-member={{member.id}}
                            />
                        </VerticalCollection>
                    {{else}}
                        <li class="no-posts-box" data-test-no-members>
                            <div class="no-posts">
                                {{svg-jar "members-placeholder" class="gh-members-placeholder"}}
                                {{#if this.showingAll}}
                                    <h3>No members yet</h3>
                                    <GhMembersNoMembers @afterCreate={{this.refreshData}} />
                                {{else}}
                                    <h3>No members match the current filter</h3>
                                {{/if}}
                            </div>
                        </li>
                    {{/if}}
                </ol>
            </section>
        </section>
    {{else}}
        <div class="gh-content">
            <GhLoadingSpinner />
        </div>
    {{/unless}}
</section>

{{outlet}}

{{#if this.showDeleteMembersModal}}
    <GhFullscreenModal
        @modal="delete-members"
        @model={{hash memberCount=this.selectedCount}}
        @confirm={{this.deleteMembers}}
        @close={{this.toggleDeleteMembersModal}}
        @modifier="action wide"
    />
{{/if}}

{{#if this.showLabelModal}}
    <GhFullscreenModal
        @modal="members-label-form"
        @model={{this.labelModalData}}
        @close={{this.toggleLabelModal}}
        @modifier="action wide"
    />
{{/if}}