<!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>
        <button onclick="location.assign('/communities/<%=communityID%>/sub/new')">New</button>
        <input type="text" id="search" onkeyup="search()" placeholder="Search..">
        <table id="community-list">
            <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)">Title ID's</th>
                    <th onClick="sortTable(2)">Followers</th>
                </tr>
                <% for(var i = 0; i < communities.length; i++) { %>
                <tr id="<%= communities[i].community_id %>" onclick="location.assign('/communities/' + this.id)">
                    <td><img style="width: 80px " src="/icons/<%= communities[i].community_id %>.png"></td>
                    <td><a><%= communities[i].name %></a></td>
                    <td><%= moment(communities[i].created_at).fromNow() %></td>
                    <td><%= communities[i].title_ids %></td>
                    <td><%= communities[i].followers %></td>
                </tr>
            <%}%>
            </tbody>
        </table>
    </div>
</div>
<script>
    /**
     * Removes row from table
     * @param id
     */
    function removeRow(id) {
        var row = document.getElementById(id);
        row.parentNode.removeChild(row);
    }
    /**
     * Sorts table by selected column
     * @param n
     */
    function sortTable(n) {
        var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
        table = document.getElementById("community-list");
        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 search() {
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("search");
        filter = input.value.toUpperCase();
        table = document.getElementById("community-list");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[1];
            if (td) {
                txtValue = td.textContent || td.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }
</script>
</body>
</html>
