<% layout('layouts/boilerplate') %>
    <div class="card shadow  py-3 px-3 mb-3">
        <div class="card-header bg-white">
            <h4>Manage Users</h4>
        </div>
        <div class="card-body">
            <table id="users" class="table-striped table table-hover">
                <thead>
                    <th class="d-none d-md-table-cell align-top" scope="col">Surname</th>
                    <th class="d-none d-md-table-cell align-top" scope="col">Firstname</th>
                    <th class="users" scope="col">
                        <div class="row">
                            <div class="d-none d-md-table-cell col-md-auto">
                                E-mail Address
                            </div>
                            <div class="col-md"><input id="userSearch" type="text" class="form-control form-control-sm pe-3" placeholder="Search..."></div>
                            <div class="d-table-cell d-md-none col-md-auto mt-3">
                                E-mail Address
                            </div>
                        </div>
                    </th>
                    <th class="d-none d-md-table-cell align-top" scope="col">Role</th>
                    <th scope="col"></th>
                </thead>
                <tbody class="users">
                    <% for (user of users) { %>
                        <tr style="cursor: pointer;" onclick="<%= (user.role != 'superAdmin' || currentUser.role == 'superAdmin') ? `window.location = '/admin/users/${user._id}'` : '' %>" title="<%= user.role == 'superAdmin' ? `Editing Super Administrator's is restricted`: '' %>">
                            <td class="d-none d-md-table-cell <%= user.role == 'superAdmin' ? 'text-muted': '' %>" scope="row">
                                <%= user.surname %>
                            </td>
                            <td class="d-none d-md-table-cell <%= user.role == 'superAdmin' ? 'text-muted': '' %>" scope="row">
                                <%= user.firstname %>
                            </td>
                            <td scope="row" class="<%= user.role == 'superAdmin' ? 'text-muted': '' %>">
                                <%= user.username %>
                            </td>
                            <td class="d-none d-md-table-cell <%= user.role == 'superAdmin' ? 'text-muted': '' %>" scope="row">
                                <%
                        switch (user.role){
                            case 'user':
                                %>Player
                                    <%
                            break;
                            case 'eventHost': %>Event Host
                                        <%
                            break;
                            case 'systemAdmin' : %>Event System Administrator <%
                            break;
                            case 'admin': %>Administrator
                                            <%
                            break;
                            case 'superAdmin': %>Super Administrator
                                                <%
                            break;
                        } %>
                            </td>
                            <td scope="row">
                                <% if (user.role != 'superAdmin' || currentUser.role == 'superAdmin') {%>
                                <a href="/admin/users/<%= user._id %>" class="link-dark <%= user.role == 'superAdmin' ? 'text-muted': '' %>"><i class="bi bi-pencil-square"></i></a>
                                <% } %>
                            </td>
                        </tr>
                        <% } %>
                </tbody>
            </table>
            <ul id="usersNavPosition" class="pagination pager-nav justify-content-center"></ul>
            <script src="/js/pagination.js"></script>
            <script>
                const usersPager = new Pager('users', 15);
                usersPager.init();
                usersPager.showPageNav('usersPager', 'usersNavPosition');
                usersPager.showPage(1);
                function filterTable(type) {
                    const query = q => document.querySelectorAll(q);
                    const filters = [...query(`th.${type} input`)].map(e => new RegExp(e.value, 'i'));
                    query(`tbody.${type} tr`).forEach(row => row.style.display = 
                    filters.some((f, i) => f.test(row.cells[0].textContent) || f.test(row.cells[1].textContent) || f.test(row.cells[2].textContent)) ? '' : 'none');
                }
                document.getElementById('userSearch').addEventListener('keyup', function() {
                    filterTable('users');
                });
            </script>
        </div>
    </div>