probuddy-master/src/client/app/tmpl/group-member-management.html

<h4><a href="#/home"><i class="fas fa-chevron-left"></i></a>&nbsp;<%= _lc( 'BTN_BACK_TO_HOME' ) %></h4>
<div class="row">
    <div class="col-sm-12">
        <div class="card">
            <div class="card-header">
                <div class="row" style="padding-bottom: 10px;">
                    <div class="col">
                        <label><%= _lc( 'GROUP' ) %></label>
                        <select class="form-control form-control-sm"
                                data-id="select-group-id">
                            <% for ( var gi = 0; gi < groups.length; gi++ ) {  %>
                            <option value="<%= groups[ gi ].getId() %>"
                                    <%= groups[ gi ].getId() == group.getId() ? 'selected="selected"' : '' %>
                            >
                                <%= groups[ gi ].getName() %>
                            </option>
                            <% }    %>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <label><%= _lc( 'GROUP_MANAGEMENT_MEMBERS_FILTER' ) %></label>
                        <input data-id="member-search-filter" type="text" class="form-control form-control-sm">
                    </div>
                </div>
            </div>
            <div class="card-header" data-id="member-header">
                <!-- tab bar -->
                <ul class="nav nav-tabs page-nav">
                    <li class="nav-item">
                        <a class="nav-link <%= ( activeTab == 'active' ) ? 'active' : '' %>" data-content="group-members-active-content">
                            <i class="fas fa-users"></i>
                            <%= _lc( 'GROUP_MANAGEMENT_MEMBERS_ACTIVE' ) %> (<%= membersActive.length %>)
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link <%= ( activeTab == 'inactive' ) ? 'active' : '' %>" data-content="group-members-inactive-content">
                            <i class="fas fa-users"></i>
                            <%= _lc( 'GROUP_MANAGEMENT_MEMBERS_INACTIVE' ) %> (<%= membersInactive.length %>)
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link <%= ( activeTab == 'not_approved' ) ? 'active' : '' %>" data-content="group-members-not-approved-content">
                            <i class="fas fa-users"></i>
                            <%= _lc( 'GROUP_MANAGEMENT_MEMBERS_NOT_APPROVED' ) %> (<%= membersNotApproved.length %>)
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link <%= ( activeTab == 'deleted' ) ? 'active' : '' %>" data-content="group-members-deleted">
                            <i class="fas fa-users"></i>
                            <%= _lc( 'GROUP_MANAGEMENT_MEMBERS_DELETED' ) %> (<%= membersDeleted.length %>)
                        </a>
                    </li>
                </ul>
            </div>
            <div class="card-body" data-id="member-container">
                <!-- active members -->
                <div id="group-members-active-content" class="group-members-content group-members-tab-content <%= ( activeTab == 'active' ) ? 'active' : '' %>">
                    <div class="table-responsive">
                        <table class="table table-profiles">
                            <tbody>
                            <% for ( var mi = 0; mi < membersActive.length; mi++ ) {  %>
                            <%=raw app.core.View.getTemplate( 'group-member-management-row', { m : membersActive[ mi ], g : group } ) %>
                            <% }    %>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- inactive members -->
                <div id="group-members-inactive-content" class="group-members-content group-members-tab-content <%= ( activeTab == 'inactive' ) ? 'active' : '' %>">
                    <div class="table-responsive">
                        <table class="table table-profiles">
                            <tbody>
                            <% for ( var mi = 0; mi < membersInactive.length; mi++ ) {  %>
                            <%=raw app.core.View.getTemplate( 'group-member-management-row', { m : membersInactive[ mi ], g : group } ) %>
                            <% }    %>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div id="group-members-not-approved-content" class="group-members-content group-members-tab-content <%= ( activeTab == 'not_approved' ) ? 'active' : '' %>">
                    <div class="table-responsive">
                        <table class="table table-profiles">
                            <tbody>
                            <% for ( var mi = 0; mi < membersNotApproved.length; mi++ ) {  %>
                            <%=raw app.core.View.getTemplate( 'group-member-management-row', { m : membersNotApproved[ mi ], g : group } ) %>
                            <% }    %>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div id="group-members-deleted" class="group-members-content group-members-tab-content <%= ( activeTab == 'deleted' ) ? 'active' : '' %>">
                    <div class="table-responsive">
                        <table class="table table-profiles">
                            <tbody>
                            <% for ( var mi = 0; mi < membersDeleted.length; mi++ ) {  %>
                            <%=raw app.core.View.getTemplate( 'group-member-management-row', { m : membersDeleted[ mi ], g : group } ) %>
                            <% }    %>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
            <div class="card-footer">
            </div>
        </div>
    </div>
</div>