{% extends "user/base-users-three-col.html" %}
{% block users_js_media %}
    <script type="text/javascript">
        $(function(){
            register_all_toggles();
        });
    </script>
{% endblock %}

{% block users_media %}
    <style>
        .organization-row {
            display: block;
            padding: 0.5em;
            border-bottom: 1px gray solid;
            border-top: none;            
            color: black;
            font-weight: bold;
        }
        .organization-container .organization-row:last-child {
            border-bottom: none;
        }
        .organization-row:hover {
            background-color: #f3f3f3;
        }
        .organization-container {
            border: 1px gray solid;
            margin-bottom: 3em;
        }
        .org-logo {
            vertical-align: middle;
            height: 2em;
            width: 2em;
            display: inline-block;
            margin-right: 1em;
            margin-left: 0.5em;
        }
        .toggle {
            cursor: pointer;
        }
    </style>
{% endblock %}

{% block title_ruler %}{% endblock %}

{% block left_sidebar %}
    {% include "user/user-left-sidebar.html" %}
{% endblock %}

{% macro org_list(title, queryset) %}
    {% if queryset %}
        <h3 style="padding-bottom: 1em" class="toggle open"><i class="fa fa-chevron-right fa-fw"></i> {{title}} ({{queryset.count()}})</h3>
        <div class="organization-container toggled">
            {% for org in queryset %}
                <a href="{{ org.get_absolute_url() }}" class="organization-row" title="{{org.about}}">
                    <img class="org-logo" src="{{ org.logo_override_image or static('icons/icon.png') }}">
                    <span>{{ org.name }}</span>
                    <span style="font-weight: normal; float:right"><i>{{ org.member_count }} {{_('members')}}</i></span>
                </a>
            {% endfor %}
        </div>
    {% endif %}
{% endmacro %}

{% block users_table %}
    {{ org_list(_('My groups'), my_organizations) }}
    {{ org_list(_('Open groups'), open_organizations) }}
    {{ org_list(_('Private groups'), private_organizations) }}
{% endblock %}