{% 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 %}
	{% if name.parent %}
	<a href="/name/id/{{name.parent.id}}">.. (up one level)</a>
	{% else %}
	<a href="/name">.. (up one level)</a>
	{% endif %}
	{% endif %}
	<div style="height: 100%;" id="tree"></div>
</div>
<div style="float: right; width: 60%; padding-left: 20px;">
{% if name %}
	<div class="ui-widget-content ui-corner-all infopanel">
		<div class="navlist">
		   <ul>
		     {% if edit %}
			 <li style="float: right;"><a class="tip" title="Modify this name" href="/name/edit/id/{{name.id}}"><span class="ui-icon ui-icon-wrench"></span></a>
			 {% endif %}
			 {% if delete %}
			 <li style="float: right;"><a class="tip" title="Permanently remove this name" href="/name/delete/id/{{name.id}}"><span class="ui-icon ui-icon-trash"></span></a>
			 {% endif %}
			 {% if insert %}
			 <li style="float: right;"><a class="tip" title="Create new subordinate name" href="/name/add/id/{{name.id}}"><span class="ui-icon ui-icon-plusthick"></span></a>
			 {% endif %}
		   </ul>
		</div>
		<div class="clear"/>
		<h3>{{name}}</h3>
		<p>{{name.description}}</p>
	</div>
	{% endif %}
	{% if memberships %}
	<div id="members">
		{% for m in memberships.all %}
		<div id="m{{m.id}}" class="{{m.status}}">
		   <h3 style="padding-left: 20px;">{{m.user}}</h3>
		   <div>
		   	  {{m.user}} has been a member of {{m.name.shortname}} since {{m.timecreated}}<br/>
		   </div>
		</div>
		{% endfor %}
	</div>
{% endif %}
</div>
{% endblock %}