<div class="wrapper">
	<div id="groups">
		<h3>Groups</h3>
		<table class="overview">
			<thead>
				<tr>
					<th>Name</th>
					<th>Edit</th>
					<th>Delete</th>
				</tr>
			</thead>
			<tbody>
				<% _.each(groups, function (group) {%>
				<tr>
					<td><%- group.id%></td>
					<td>
						<a data-id="<%-group.id%>" href="#" class="edit-group ui-icon ui-icon-pencil">
					Edit
						</a>
					</td>
					<td>
						<a data-id="<%-group.id%>" href="#" class="delete-group ui-icon ui-icon-minusthick">
					Delete
						</a>
					</td>
				</tr>
				<% }); %>
			</tbody>
		</table>
		<div class="allwidth"><button class="large" id="add-group">Add group</button></div>
	</div>
	<h3>Users</h3>
	<div id="users">
		<table class="overview">
			<thead>
				<tr>
					<th>Name</th>
					<th>Permissions</th>
					<th>Active tokens</th>
					<th>Allowed</th>
					<th>Edit</th>
					<th>Delete</th>
				</tr>
			</thead>
			<tbody>
				<% _.each(users, function (user) {%>
				<tr>
					<td><%-user.name%></td>
					<td><%-user.permissions.join(', ')%></td>
					<td><%-Object.keys(user.client_tokens).join(', ')%></td>
					<td>
						<a data-id="<%-user.id%>" href="#" class="<%- user.allowed ? 'disallow' : 'allow' %>">
							<%= user.allowed ? "&#x2713;" : "&#x2717" %>
						</a>
					</td>
					<td>
						<a data-id="<%-user.id%>" href="#" class="edit-user ui-icon ui-icon-pencil">
					Edit
						</a>
					</td>
					<td>
						<a data-id="<%-user.id%>" href="#" class="delete-user ui-icon ui-icon-minusthick">
					Delete
						</a>
					</td>
				</tr>
				<% }); %>
			</tbody>
		</table>
		<div class="allwidth"><button class="large" id="add-user">Add user</button></div>
	</div>
</div>