{{> add_members_form hide_add_button=true}}

<div class="add-members-subtitle">
    {{#tr}}
        You can add members by name or email address.
        Enter a <z-user-roles-link>user role</z-user-roles-link>,
        <z-user-groups-link>user group</z-user-groups-link>,
        or <z-channel-link>#channel</z-channel-link> to add multiple users at once.
        {{#*inline "z-user-roles-link"}}<a href="/help/user-roles" target="_blank" rel="noopener noreferrer">{{> @partial-block}}</a>{{/inline}}
        {{#*inline "z-user-groups-link"}}<a href="/help/user-groups" target="_blank" rel="noopener noreferrer">{{> @partial-block}}</a>{{/inline}}
        {{#*inline "z-channel-link"}}<a href="/help/introduction-to-channels" target="_blank" rel="noopener noreferrer">{{> @partial-block}}</a>{{/inline}}
    {{/tr}}
</div>

<div class="settings_panel_list_header create_user_group_member_list_header">
    <h3 class="settings-table-title">{{t 'Members preview' }}</h3>
    <div class="user_filters">
        {{> ../settings/filter_text_input placeholder=(t 'Filter') aria_label=(t 'Filter members') }}
    </div>
</div>

<div class="add-group-member-loading-spinner"></div>

<div class="member-list-box">
    <div class="member_list_container" data-simplebar data-simplebar-tab-index="-1">
        <table class="member-list table table-striped">
            <thead class="table-sticky-headers">
                <tr>
                    <th class="panel_user_list" data-sort="alphabetic" data-sort-prop="full_name">{{t "Name" }}
                        <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
                    </th>
                    <th class="settings-email-column" data-sort="email">{{t "Email" }}
                        <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
                    </th>
                    <th class="action-column">{{t "Action" }}</th>
                </tr>
            </thead>
            <tbody id="create_user_group_members" class="member_table" data-empty="{{t 'This group has no members.' }}" data-search-results-empty="{{t 'No group members match your current filter.'}}"></tbody>
        </table>
    </div>
</div>