{% extends "base.html" %}
{% load i18n %}
{% block title %}{{ instance.name }} on {{ instance.cluster.description }}{% endblock %}
{% block extrahead %}
<style type="text/css">
		#toolbar {
		padding: 10px 4px;
	}

</style>
<script type="text/javascript">
var polltimer;
var timer = 2500;
var load_data = function () {
        $.ajax({
            type: 'GET',
            url: '{% url instance-poll cluster.slug instance.name %}',
            dataType: 'html',
            success: function(data) {
                $('#actions_container').html(data);
				if ($('#show_no_actions').size()==1){
					$('#conf_form').hide();
				}else if ($('#show_no_actions').size()==0){
					$('#conf_form').show();
				}
				$("#status").html($("#instance_status").html());
                polltimer = setTimeout(load_data, timer);
            }
        });
    }
$(function() {
    load_data();
});

</script>
{% endblock %}

{% block breadcrumbs %}:: {{ instance.name }} {% endblock %}

{% block content %}
{% load disksizes %}


<h3>{{ instance.name }}</h3>
<div id="fl_l">
<table class="instance_det_table">
<tr><th class="table_top_header" colspan=2>{% trans "Details" %}</th></tr>
<tr><td class="table_title">{% trans "Status" %}</td><td id="status"></td></tr>
<tr><td class="table_title">{% trans "Cluster" %}</td><td>{{ instance.cluster.description }}</td></tr>
<tr><td class="table_title">{% trans "Memory" %}</td><td>{{ instance.beparams.memory|memsize }}</td></tr>
<tr><td class="table_title">{% trans "CPUs" %}</td><td>{{ instance.beparams.vcpus }}</td></tr>
<tr><td class="table_title">Hard disk{{ instance.disk_sizes|pluralize }}</td><td>{{ instance.disk_sizes|disksizes|join:", " }}</td></tr>
<tr><td class="table_title">{% trans "Network cards" %}</td><td>{{ instance.nic_macs|length }}</td></tr>
<tr><td class="table_title">MAC address{{ instance.nic_macs|pluralize:"es" }}</td><td>{{ instance.nic_macs|join:", " }}</td></tr>
{% if instance.nic_ips %}
<tr><td class="table_title">IP address{{ instance.nic_ips|pluralize:"es" }}</td><td>{{ instance.nic_ips|join:", " }}</td></tr>
{% endif %}
<tr><td class="table_title">{% trans "Created on" %}</td><td>{{ instance.ctime|date }}</td></tr>
<tr><td class="table_title">{% trans "Last modified" %}</td><td>{{ instance.mtime|date }}</td></tr>
</table>
</div>


<div id="configuration">

<form method="post" align="center" id="conf_form">
{% csrf_token %}
<table class="conf_table">
	<tr><th colspan="2" style="text-align:center;" class="table_topper_header">{% trans "Configuration" %}</th></tr>
{{ configform.as_table }}
<tr><td colspan="2" style="text-align:center; padding: 5px;" ><input style="font-size: 12px;" id="update" type="Submit" value="Update" /></td></tr>

</table>

</form>

<table class="actions_table">
<tr><th class="table_top_header" colspan=3 style="text-align: center;">{% trans "Actions" %}</th></tr>
<tr>
	<td id="actions_container">&nbsp;</td>
		<!-- Here a setTimeout jquery script populates the instance control every 5 seconds -->
</tr>
</table>
</div>

{% endblock %}