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

{% if recent_organizations %}
    <div class="blog-sidebox sidebox">
        <h3>{{ _('Recent groups') }} <i class="fa fa-users"></i></h3>
        <div class="organization-container toggled">
            {% for organization in recent_organizations %}
                <a href="{{ url('organization_home', organization.organization.pk, organization.organization.slug) }}" class="sidebox-content organization-row" title="{{organization.organization.about}}">
                    <img class="org-logo" data-src="{{ organization.organization.logo_override_image or static('icons/icon.png') }}">
                    <span style="word-break: break-word;">{{ organization.organization }}</span>
                </a>
            {% endfor %}
        </div>  
    </div>
{% endif %}