{% extends "tree.html" %}
{% load datehumanize %}
{% load userdisplay %}
{% load tagging_tags %}
{% block widgets %}
	$("#gravatar").append($.gravatar($('#email').text()));
	$("#names").accordion({
   		header: 'h3',
   		collapsible: true,
        active: false,
        autoHeight: false
   	});
   	$("#memberships").accordion({
   		header: 'h3',
   		collapsible: true,
        active: false,
        autoHeight: false
   	});
{% endblock %}
{% block content %}
    {% if memberships %}
	<h3>Memberships</h3>
	<div id="memberships">
		{% for m in memberships.all %}
		<div id="m{{m.id}}" class="{{m.status}}">
		   <h3 class="listheader">{{m.name.shortname}}</h3>
		   <div>
			   <div>
				    You became a member of <a href="{{m.name.url}}">{{m.name.shortname}}</a> {{m.timecreated|datehumanize}}
				    {% if m.tags %}<h4>Role{{m.tags|pluralize}}</h4>
				    <ul class="clist">{% for tag in m.tags %}<li>{{ tag|escape }}</li>{%endfor%}</ul>{%endif%}
			   </div>
			   <div class="rlist button">
		         <ul>
		            {% if render.edit and m.user %} <!-- only allow roles for users right now -->
		            <li><a href="/tag/membership/{{m.id}}/modify">Modify Roles</a></li>
		            {% endif %}
		            {% if render.kick and m.user %} <!-- only allow removing members for users right now -->
		            <li><a href="/name/{{name.id}}/leave/{{m.user.username}}">{% if m.user == user %}Leave{% else %}Remove from{% endif %} Group</a></li>
		            {% endif %}
		         </ul>
		      </div>
		   </div>
		</div>
		{% empty %}
		<p>No members yet...</p>
		{% endfor %}
	</div>
	{% endif %}

<h3>Groups</h3>
<div id="names">
	{% for n,p in names %}
	<div id="n{{n.id}}">
	   <h3 class="listheader">{{n.shortname}}</h3>
	   <div>
		  <a href="{{n.url}}">{{n.shortname}}</a> was created by {{n.creator|userdisplay}} {{n.timecreated|datehumanize}} and has {{n.memberships|length}} member{{n.memberships|pluralize}}.
	   </div>
	</div>
	{% empty %}
	<p>You do not have control over any groups yet...</p>
	{% endfor %}
</div>
{% endblock %}