{% load seahub_tags group_avatar_tags i18n %}
{% load url from future %}

<h3>{% trans "My Groups" %}</h3>
<button id="group-add"><img src="{{ MEDIA_URL }}img/add.png" alt="" class="add vam" /><span class="vam">{% trans "New Group" %}</span></button>
{% if joined_groups %}
<ul class="group-list w100 ovhd">
    {% for group in joined_groups %}
    <li class="group ovhd">
    <a href="{{ SITE_ROOT }}group/{{ group.props.id }}/" class="no-deco fleft" title="{{ group.props.group_name }}">{% grp_avatar group.props.id 48 %}</a>
    <div class="txt fright">
        <h4><a href="{% url 'group_info' group.props.id %}">{{ group.props.group_name }}</a></h4>
        <p><span class="item-name">{% trans "Creator: " %}</span>{{ group.props.creator_name }}</p>
        <p><span class="item-name">{% trans "Time: "%}</span>{{ group.props.timestamp|tsstr_sec }}</p>
        <div class="fast vh">
            <a href="{% url 'group_info' group.props.id %}" title="{% trans "Libraries" %}" class="a"><img src="{{MEDIA_URL}}img/lib.png" alt="" /></a>
            <a href="{% url 'group_discuss' group.props.id %}" title="{% trans "Discussion" %}" class="a"><img src="{{MEDIA_URL}}img/msgs.png" alt="" /></a>
            {% if group.wiki_enabled %}
            <a href="{% url 'group_wiki' group.props.id %}" title="{% trans "Wiki" %}" class="a"><img src="{{MEDIA_URL}}img/wiki.png" alt="" /></a>
            {% endif %}
        </div>
    </div>
    </li>
    {% endfor %}
</ul>
{% else %}
<div class="empty-tips">
  <h2 class="alc">{% trans "You are not in any groups" %}</h2>
  <p>{% blocktrans %}You can create a group by clicking "New Group" button. Group is a place for you and your friends leaving messages and collaborating on libraries.{% endblocktrans %}</p>
</div>
{% endif %}
<form id="group-add-form" action="" method="post" name="group-add-form" class="hide">{% csrf_token %}
    <h3>{% trans "New Group" %}</h3>
    <label>{% trans "Group Name" %}</label><br />
    <input id="group_name" name="group_name" value="" class="input" /><br />
    <p class="error hide"></p>
    <input id="group-add-submit" type="submit" class="submit" value="{% trans "Submit" %}" />
</form>
