{% extends "tree.html" %}
{% load datehumanize %}
{% load userdisplay %}
{% load tagging_tags %}
{% block widgets %}
    $("#memberships").accordion({
   		header: 'h3',
   		collapsible: true,
        active: false,
        autoHeight: false
   	});
   	$("#invitations").accordion({
   		header: 'h3',
   		collapsible: true,
        active: false
   	});
{% endblock %}
{% block content %}
	{% if name.description or render.acl or render.edit or render.delete or render.invite or render.join %}
    <div class="ui-widget ui-widget-content ui-helper-reset ui-corner-all infopanel">
	    {% if name.description %}
	    {% autoescape off %}
	    <p class="description">{{name.description|safe}}</p>
	    {% endautoescape %}
		{% endif %}
		{% if name %}
		<div class="rlist">
		  <ul>
		  	 {% if render.acl %}
			 <li class="button"><a href="/name/{{name.id}}/acl/0">Modify Access</a></li>
			 {% endif %}
		     {% if render.edit %}
			 <li class="button"><a href="/name/{{name.id}}/edit">Modify</a></li>
			 {% endif %}
			 {% if render.delete %}
			 <li class="button"><a href="/name/{{name.id}}/delete">Delete</a></li>
			 {% endif %}
			 {% if render.invite %}
			 <li class="button"><a href="/name/{{name.id}}/invite">Invite</a></li>
			 {% endif %}
			 {% if render.invite %}
			 <li class="button"><a href="/name/{{name.id}}/join">Add Member</a></li>
			 {% endif %}
			 {% if render.join %}
			 <li class="button"><a href="/name/{{name.id}}/join/{{user.username}}">Join</a></li>
			 {% endif %}	 
		   </ul>
		</div>
		{% endif %}
		<div class="clear"></div>
	</div>
	{% endif %}
	{% if memberships %}
	<h3>Members</h3>
	<div id="memberships">
		{% for m in memberships.all %}
		<div id="m{{m.id}}" class="{{m.status}}">
		   <h3 class="listheader">{{m|memberdisplay}}</h3>
		   <div>
			   <div>
				    {{m|memberdisplay}} became a member of {{name.shortname}} {{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 class="clear"></div-->
		   </div>
		</div>
		{% empty %}
		<p>No members yet...</p>
		{% endfor %}
	</div>
	{% endif %}
	{% if invitations and render.invite %}
	<h3>Pending invitations</h3>
	<div id="invitations">
		{% for i in invitations.all %}
		<div id="m{{m.id}}">
		   <h3 class="listheader">{{i.email}}</h3>
		   <div>
		   	  <div>{{i.email}} was invited to {{i.name.shortname}} {{i.timecreated|datehumanize}} by {{i.inviter}}.</div>
		      <div class="rlist">
		         <ul>
		            <li class="button"><a href="/invitation/{{i.id}}/cancel">Cancel</a></li>
		            <li class="button"><a href="/invitation/{{i.id}}/resend">Resend</a></li>
		         </ul>
		      </div>
		      <!-- div class="clear"></div -->
		   </div>
		</div>
		{% empty %}
		<p>There are no pending invitations. <a class="tip" title="Invite someone!" href="/name/{{name.id}}/invite">Invite someone!</a></p>
		{% endfor %}
	</div>
	{% endif %}
{% endblock %}