<html lang="en">
<head>
    <%- include('partials/head'); %>
</head>
<body>
<div id="main">
    <h2 id="title" class="page-header">Manage Communities</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" href="/admin/accounts">Accounts</a>
			<a id="communities" class="selected"href="/admin/communities">Communities</a>
		</div>
		<input type="string" id="search" placeholder="Search..." value="<%= search %>">
		<button style="margin-top: 1em;">
			<a href="/admin/communities/new" class="button">Create Community</a>
		</button>
        <% if(communities.length === 0) {%>
            <p>No Communities found</p>
        <%} else { %>
        <ul class="list-content-with-icon-and-text arrow-list accounts" id="news-list-content">
            <% communities.forEach(function(community) { %>
				<li>
					<div class="hover">
						<a href="/communities/<%= community.olive_community_id %>" data-pjax="#body" class="icon-container notify">
							<img src="<%= cdnURL %>/icons/<%= community.olive_community_id %>/128.png" class="icon">
						</a>
						<a class="body" href="/communities/<%= community.olive_community_id %>">
							<span class="text"><span class="nick-name"><%= community.name %></span>
						</a>
					</div>
					<button onclick="this.children[0].click()"><a id="account-<%= community.community_id %>" href="/admin/communities/<%= community.olive_community_id %>">Manage Community</a></button>
				</li>
            <% }); %>
        </ul>
		<div class="buttons tabs">
			<% if(page > 0) { %>
			<a href="/admin/communities?page=<%= page - 1 %>&search=<%= search %>" class="button">Previous Page</a>
			<% } %>
			<% if (communities.length == 20) { %>
			<a href="/admin/communities?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/communities?search=${search}`;
    }
})
</script>
</html>
