{% import "macros.html" as macros %}
{% extends "two_column_body.html" %}
{% block title %}{% trans %}Groups{% endtrans %}{% endblock %}
{% block content %}
    <div id="content-header">
        <h1 class="section-title">{% trans %}Groups{% endtrans %}</h1>
        {% if request.user.is_authenticated %}
            <div class="tabBar">
                <div class="tabsC">
                    <a id="all-groups" class="first{% if tab_name=="all-groups" %} on{% endif %}"
                        title="{% trans %}All groups{% endtrans %}"
                        href="{{ url('groups') }}?sort=all-groups"
                    ><span>{% trans %}all groups{% endtrans %}</span></a>
                    <a id="my-groups" {% if tab_name=="my-groups" %}class="on"{% endif %}
                        title="{% trans %}My groups{% endtrans %}"
                        href="{{ url('groups') }}?sort=my-groups"
                    ><span>{% trans %}my groups{% endtrans %}</span></a>
                </div>
            </div>
        {% endif %}
        <div class="clearfix"></div>
    </div>
    {% if user_can_add_groups %}
    <p id="group-add-tip">
        {% trans %}Tip: to create a new group - please go to some user profile and add the new group there. That user will be the first member of the group{% endtrans %}
    </p>
    {% endif %}
    <table id="groups-list">
        <thead>
            <th>{% trans %}Group{% endtrans %}</th>
            <th>{% trans %}Number of members{% endtrans %}</th>
            <th>{% trans %}Description{% endtrans %}</th>
        </thead>
        <tbody>
        {% for group in groups %}
            <tr>
                {{ macros.user_group(
                        group, groups_membership_info[group.id], show_count=True
                    )
                }}
            </tr>
        {% endfor %}
        </tbody>
    </table>
{% endblock %}
{% block endjs %}
    {% compress js %}
    <script type="text/javascript" src="{{ '/jslib/jquery.validate.min.js'|media }}"></script>
    <script type="text/javascript" src="{{ '/jslib/prettify.js'|media }}"></script>
    <script type="text/javascript" src="{{ '/js/utils/toggle.js'|media }}"></script>
    <script type="text/javascript" src="{{ '/js/utils/expander_toggle.js'|media }}"></script>
    <script type="text/javascript" src="{{ '/js/post.js'|media }}"></script>
    {% endcompress %}
    {% if request.user.is_authenticated %}
    <script type="text/javascript">
        askbot['urls']['join_or_leave_group'] = '{{ url('join_or_leave_group') }}';
        $.each($('.group-join-btn'), function(idx, elem){
            var group_join_btn = new GroupJoinButton();
            group_join_btn.decorate($(elem));
        });
    </script>
    {% endif %}
{% endblock %}
