{% extends "base.html" %}
{% block title %}Overview{% endblock %}
{% block extrahead %}
<script type="text/javascript" src="/static/js/jquery.dataTables.js"></script>
<script type="text/javascript">
	$(document).ready( function(){
			$('#cluster_overview_table').dataTable( {
			"bJQueryUI": true,
			"oLanguage": {
						"sLengthMenu": 'Display <select><option value="25">25</option><option value="50">50</option><option value="-1">All</option></select> clusters'
					},
			"iDisplayLength": 25,
	} );
		});
</script>
{% endblock %}
{% block content %}
<h3>Clusters Overview</h3>
<table class="display" width="100%" id="cluster_overview_table">
	<thead>
		<tr>
			<th>Cluster</th>
			<th>Nodes</th>
			<th>Hypervisors</th>
			<th>Default hypervisor</th>
			<th>Master node</th>
			<th>Ganeti version</th>	
		</tr>
	</thead>
	<tbody>
{% for cluster in object_list %}
	<tr class="GradeA">
		<td>
			<a href="{% url cluster_detail cluster.slug %}">{{ cluster.hostname }}</a>
		</td>
		<td>
				{% with cluster.get_cluster_nodes as nodes %}
				<!--{{ nodes|length }} node{{ nodes|pluralize }}-->
				
				{% for node in nodes %}
					<div>{{ node.id }}</div>
				{% endfor %}
				
				{% endwith %}
		</td>

		{% with cluster.get_cluster_info as info %}
		<td>{{ info.enabled_hypervisors|join:", " }}</td>
		<td>{{ info.default_hypervisor }}</td>
		<td>{{ info.master }}</td>
		<td>{{ info.software_version }}</td>
		{% endwith %}

	</tr>

{% endfor %}
</tbody>
</table>

{% endblock %}