{% extends "base.html" %}
{% block js %}
<script type="text/javascript">
$(function() {
   	$("#members").accordion({
   		header: 'h3'
   	});
   	$('#tree').jstree({
   		'json_data': {
   			'ajax': {
   				'url': function(n) {
   					if (n == -1) {
   						return {% if name %}"/rtree/"+{{name.id}}+".json"{% else %}"/rtree.json"{% endif %};
   					} else {
   						return "/ctree/"+n.attr('id')+".json";
   					}
   				}
   			},
   			"progressive_render"  : true,
   			'animation': 0,
   		},
   		'plugins': ['themeroller','json_data']
   	});
});
</script>
{% endblock %}
{% block headline %}{% if name %}{{name.shortname}}{% else %}(){% endif %}{% endblock %}
{% block title %}COIP{% if name %} - {{name.shortname}}{% endif %}{% endblock %}
{% block main %}
<div style="float: left; width: 30%;">
	{% if name and name.parent %}
	<a href="/name/id/{{name.parent.id}}">.. (up one level)</a>
	{% endif %}
	<div style="height: 100%;" id="tree"></div>
</div>
<div style="float: right; width: 60%; padding-left: 20px;">
	<form method="POST">
		<div class="ui-widget-content ui-corner-all infopanel"
			<table>
		      {% for field in form %}
		        <tr>
		          {% if field.errors %}
		            <td colspan="2">{{ field.errors }}</td>
		          {% endif %}
		        </tr>
		        <tr>
		          <td>{{ field.label_tag }}</td>
		          <td><div class="ui-widget">{{ field }}</div></td>
		        </tr>
		      {% endfor %}
		    </table>
		</div>
		<br/>
		<div class="button">
		    <input type="submit" value="Update" />
		    <input type="button" onClick="document.location='/name/id/{{name.id}}'" value="Cancel"/>
	    </div>
	</form>
</div>
{% endblock %}