<div class="wrapper">
	<div id="nodes">
		<h3>Nodes</h3>
		<table class="overview">
			<thead>
				<tr class="even">
					<th>Hostname</th>
					<th>IP address</th>
					<th>Port</th>
					<th>FQDN</th>
					<th>Platforms</th>
					<th># of projections</th>
					<th>Connected</th>
					<th>Master priority</th>
					<th>Edit</th>
					<th>Delete</th>
				</tr>
			</thead>
			<tbody>
			<%
			var minpriority = nodes.length ? nodes[0].get('masterpriority') : 0,
			maxpriority = nodes.length ? nodes[nodes.length-1].get('masterpriority') : 0;
			$.each(nodes, function (index, n) {
				n = n.toJSON();
			%>
			<tr id="<%-n.id%>">
				<td>
					<%- n.hostname %>
				</td>
				<td>
					<%- n.ip %>
				</td>
				<td>
					<%- n.port %>
				</td>
				<td>
					<%- n.fqdn %>
				</td>
				<td>
					<%- n.platforms.join(', ') %>
				</td>
				<td>
					<%- Object.keys(n.projections).length %>
				</td>
				<td>
					<a data-id="<%-n.id%>" href="#" class="<%- n.connected ? 'makeDisconnected' : 'makeConnected' %>">
						<%= n.connected ? "&#x2713;" : "&#x2717" %>
					</a>
				</td>
				<td>
					<%- n.masterpriority %>
					<% if (n.masterpriority != minpriority) { %><a data-id="<%-n.id%>" class="priorityDown" href="#">&#x2191;</a><% } %>
					<% if (n.masterpriority != maxpriority) { %><a data-id="<%-n.id%>" class="priorityUp" href="#">&#x2193;</a><% } %>
				</td>
				<td>
					<a data-id="<%-n.id%>" href="#" class="edit-node ui-icon ui-icon-pencil">
						Edit
					</a>
				</td>
				<td>
					<a data-id="<%-n.id%>" href="#" class="delete-node ui-icon ui-icon-minusthick">
						Delete
					</a>
				</td>
			</tr>
			<% });%>
			</tbody>
		</table>
		<div class="allwidth"><button class="large" id="add-node">Add node</button></div>
	</div>
	<div id="parameters">
		<h3>Parameters</h3>
		<table class="overview">
			<thead>
				<tr class="even">
					<th>Human name</th>
					<th>Name</th>
					<th>Type</th>
					<th>Default</th>
					<th>User editable</th>
					<th>Edit</th>
					<th>Delete</th>
				</tr>
			</thead>
			<tbody>
			<%
			$.each(parameters, function (index, p) {
			%>
			<tr id="<%-p.id%>">
				<td>
					<%- p.human_name %>
				</td>
				<td>
					<%- p.name %>
				</td>
				<td>
					<%- p.type %>
				</td>
				<td>
					<%- p.default %>
				</td>
				<td>
					<a data-id="<%-p.id%>" href="#" class="<%- p.user_editable ? 'makeUserNotEditable' : 'makeUserEditable' %>">
						<%= p.user_editable ? "&#x2713;" : "&#x2717" %>
					</a>
				</td>
				<td>
					<a data-id="<%-p.id%>" href="#" class="edit-parameter ui-icon ui-icon-pencil">
						Edit
					</a>
				</td>
				<td>
					<a data-id="<%-p.id%>" href="#" class="delete-parameter ui-icon ui-icon-minusthick">
						Delete
					</a>
				</td>
			</tr>
			<% });%>
			</tbody>
		</table>
		<div class="allwidth"><button class="large" id="add-parameter">Add parameter</button></div>
	</div>
</div>