<!--Listing of all computers in the cluster-->
<h2>Environment</h2>
<h3 class="invisible">Cluster</h3>
<% if (cluster.length > 0) { %>
<table>
	<thead>
		<tr>
			<td></td>
			<%
			monitors = {};
			_.each(cluster, function (computer) {
				computerJSON = computer.toJSON(); %>
			<td>
				<% if(computerJSON.online) { %>
					<img src="static/imgs/monitor_online.png">
				<% } else { %>
					<img src="static/imgs/monitor_offline.png">
				<% } 
				_.each(computerJSON['monitors'], function(object, monitor) {
						monitors[monitor] = _.escape(object.description);
					}); %>
			</td><%	}); %>
		</tr>
	</thead>
	<tbody><%
			rows = {'id': 'Host name',
				'ip': 'IP address',
				'masterpriority': 'Priority',
				'projections': 'Projections',
				'actions': 'Actions',
				'platform': 'Platform'
				};
			$.extend(rows, monitors);
			_.each(rows, function (row, key) { %>
				<tr>
					<th><%- row %></th>
				<% _.each(cluster, function (computer) {
					b = computer.toJSON();
					if (key == 'projections') {
						out = _.escape( _.keys(b[key]).join(', ') );
					} else if (key.endsWith('Monitor')) {
						if (b['monitors'][key] === undefined) {
							out = 'N/A';
						} else {
							out = '<span class="monitor" id="' + b['id'] + '-' + key + '" title="' + b['monitors'][key]['description'] + '">' + b['monitors'][key]['value'] + '</span>';
						}
					} else if (key == 'actions') {
						actions = [];
						_.each(b[key], function (link, name) {
							actions.push('<a class="hw-control ' + _.escape(name) + '" href="' + _.escape(link) + '">' + _.escape(name) + '</a>');
						});
						out = actions.join(', ');
					} else {
						out = _.escape(b[key] ? b[key] : '');
					} %>
					<td><%print( out )%></td><%
					}); %>
				</tr><% }); %>
	</tbody>
</table>
<% } %>

<div class="allwidth"><button class="large" id="env-configuration-button">Environment configuration</button></div>
