{% extends "tree.html" %}
{% load datehumanize %}
{% load userdisplay %}
{% load tagging_tags %}
{% block widgets %}
	$("#gravatar").append($.gravatar($('#email').text()));
{% endblock %}

{% block main %}
<script>
    $(function () {
        $('tab a:last').tab('show');
    })
</script>

<div class="list-widget">
        <div class="left" style="margin-right:30px;">
            <a class="gravatar" href="#" title="{{ user.email }}"></a>
        </div>
        <h2>{{ profile.display_name }}</h2>
        <span class="quiet">You are the owner of {{ names|length }} group{{ names|pluralize }} and member of {{ memberships|length }} group{{ memberships|pluralize }}</span><br>
        <!-- <a href="/user/alias"><i class="icon-user"></i> Add an alias </a> to your identity -->
    <br><br>
</div>
<br><br>
<ul class="nav nav-tabs" id="tab">
    <a class="btn btn-success pull-right" style="margin-left:30px;" href="/name/{{profile.home.id}}/add"><i class="icon-plus icon-white"></i> New group</a>
    <li class="active">
        <a href="#memberships-tab" data-toggle="tab">Memberships</a>
    </li>
    <li><a href="#groups" data-toggle="tab">My groups</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="memberships-tab">
        {% if memberships %}
        <div id="memberships">
            {% for m in memberships.all %}
                <div class="well group">
                    <a href="{{ m.name.url }}"><img class="pull-left" style="margin-right:10px" src="/site-media/img/group.png"><h3>{{ m.name.shortname }}</h3></a>
                    <span class="quiet">You became member {{m.timecreated|datehumanize}}</span>
                    {% if m.tags %}
                        <h4>Role{{m.tags|pluralize}}</h4>
                        <ul class="clist">{% for tag in m.tags %}<li>{{ tag|escape }}</li>{%endfor%}</ul>
                    {%endif%}
                    <a href="{{ m.name.url }}"><img style="margin-top:-27px;" class="right" src="/site-media/img/right.png"></a>
                    <!--
                    <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 %}
                                <li><a href="/tag/membership/{{m.id}}/modify">Modify Roles</a></li>
                            {% endif %}
                            {% if render.kick and m.user %}
                                <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>
            {% empty %}
                <p>No members yet...</p>
            {% endfor %}
        </div>
        {% endif %}
    </div>
    <div class="tab-pane" id="groups">
    <div id="names">
                {% for n,p in names %}
                    <div class="well group">
                        <a href="{{ n.url }}"><h3>{{ n.shortname }}</h3></a>
                        <span class="quiet">Created {{n.timecreated|datehumanize}}</span>
                        <a href="{{ n.url }}"><img style="margin-top:-27px;" class="right" src="/site-media/img/right.png"></a>
                    </div>
                {% empty %}
                    <p>You do not have control over any groups yet...</p>
                {% endfor %}
        </div>
    </div>
    </div>
{% endblock %}