<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Juxt Admin Panel</title>
    <link rel="stylesheet" type="text/css" href="/css/juxt.css">
    <style>
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 60%;
        }
        th {
            cursor: pointer;
        }
        th, td {
            text-align: left;
            padding: 16px;
        }
        tr {
            border: black;
            border-width: 2px;
            border-style: groove;
        }
    </style>
</head>
<body>

<h2 style="display: inline-block; margin-left: 20px">Juxt Admin Panel - <%= user.user_id %></h2> <img style="width: 57px; display: inline-block; position: absolute; right: 8px;" src="<%= mii_image_CDN %>/<%= user.pid %>/normal_face.png">

<div class="row">
    <div class="left" style="background-color:#bbb;max-width: 10%;">
        <ul id="myMenu">
            <li><a href="/">Home</a></li>
            <li><a href="/communities">Communities</a></li>
            <li><a href="/audit">Audit Log</a></li>
            <li><a href="/announcements">Announcements</a></li>
            <li><a href="/users">Users</a></li>
            <li><a href="/discovery">Discovery</a></li>
        </ul>
    </div>

    <div class="right" style="background-color:#ddd;">
        <h2>Communities</h2>
        <input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search..">
        <table id="adddrop"><tbody id="search-list">
            <tbody>
            <tr>
                <th>Icon</th>
                <th onClick="sortTable(0)">Name</th>
                <th onClick="sortTable(1)">Created At</th>
                <th onClick="sortTable(1)">Account Status</th>
                <th onClick="sortTable(2)">Followers</th>
            </tr>
            <% for(var i = 0; i < users.length; i++) { %>
                <tr id="<%= users[i].pid %>" onclick="location.assign('/users/' + this.id)">
                    <td><img style="width: 80px " src="<%= mii_image_CDN %>/<%= users[i].pid %>/normal_face.png"></td>
                    <td><a><%= users[i].user_id %> (<%= users[i].pnid %>)</a></td>
                    <td><%= moment(users[i].created_at).fromNow() %></td>
                    <td><%= users[i].account_status %></td>
                    <td><%= users[i].followers %></td>
                </tr>
            <%}%>
            </tbody>
        </table>
    </div>
</div>
<script>
    /**
     * Sorts table by selected column
     * @param n
     */
    function sortTable(n) {
        var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
        table = document.getElementById("adddrop");
        switching = true;
        dir = "asc";
        while (switching) {
            switching = false;
            rows = table.rows;
            for (i = 1; i < (rows.length - 1); i++) {
                shouldSwitch = false;
                x = rows[i].getElementsByTagName("TD")[n];
                y = rows[i + 1].getElementsByTagName("TD")[n];
                if (dir === "asc") {
                    if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                        shouldSwitch = true;
                        break;
                    }
                } else if (dir === "desc") {
                    if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                        shouldSwitch = true;
                        break;
                    }
                }
            }
            if (shouldSwitch) {
                rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                switching = true;
                switchcount ++;
            } else {
                if (switchcount === 0 && dir === "asc") {
                    dir = "desc";
                    switching = true;
                }
            }
        }
    }
    function myFunction() {
        var input, filter, ul, tr, a, i;
        input = document.getElementById("mySearch");
        filter = input.value.toUpperCase();
        ul = document.getElementById("search-list");
        tr = ul.getElementsByTagName("tr");
        for (i = 1; i < tr.length; i++) {
            a = tr[i].getElementsByTagName("a")[0];
            if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }
    }
</script>

</body>
</html>
