<html lang="en">
<head>
    <%- include('partials/head'); %>
</head>
<body>
<div id="main">
    <h2 id="title" class="page-header">User Accounts</h2>
    <%- include('partials/nav_bar', { selection: 5, pid: pid }); %>
    <div id="toast"></div>
    <div id="wrapper">
		<div class="buttons tabs">
			<a id="post-reports" href="/admin/posts">Posts</a>
			<a id="account-reports" class="selected" href="/admin/accounts">Accounts</a>
			<% if (developer) { %>
			<a id="communities" href="/admin/communities">Communities</a>
			<% } %>
		</div>
		<input type="string" id="search" placeholder="Search..." value="<%= search %>">
		<span style="margin-top: 16px;"><%= userCount %> total user(s), <%= activeUsers %> online user(s)</span>
        <% if(users.length === 0) {%>
            <p>No Users found</p>
        <%} else { %>
        <ul class="list-content-with-icon-and-text arrow-list accounts" id="news-list-content">
            <% users.forEach(function(user) { %>
				<li>
					<div class="hover">
						<a href="/users/<%= user.pid %>" data-pjax="#body" class="icon-container notify">
							<img src="<%= cdnURL %>/mii/<%= user.pid %>/normal_face.png" class="icon">
						</a>
						<a class="body" href="/users/<%= user.pid %>">
							<span class="text"><span class="nick-name"><%= user.pid %>: <%= userMap.get(user.pid) %></span>
						</a>
					</div>
					<button onclick="this.children[0].click()"><a id="account-<%= user.pid %>" href="/admin/accounts/<%=user.pid%>">Manage User</a></button>
				</li>
            <% }); %>
        </ul>
		<div class="buttons tabs">
			<% if(page > 0) { %>
			<a href="/admin/accounts?page=<%= page - 1 %>&search=<%= search %>" class="button">Previous Page</a>
			<% } %>
			<a href="/admin/accounts?page=<%= page + 1 %>&search=<%= search %>" class="button">Next Page</a>
		</div>
		<% } %>
    </div>
</div>
</body>
<script>
	const node = document.getElementById("search");
	node.addEventListener("keyup", ({key}) => {
    if (key === "Enter") {
        const search = node.value;
		window.location.href = `/admin/accounts?search=${search}`;
    }
})
</script>
</html>
