{% block two_col_media %}
  <style>
    .org-logo {
      height: 2em;
      width: 2em;
      margin-right: 0.5em;
    }
    .toggle {
      cursor: pointer;
    }
    .organization-row:last-child {
      border-bottom: none;
    }
  </style>
{% endblock %}

{% if recent_organizations %}
  <div class="blog-sidebox sidebox">
    <h3 class="bold-text colored-text"><i class="fa fa-users"></i>{{ _('Recent groups') }}</h3>
    <div class="toggled sidebox-content">
      {% for organization in recent_organizations %}
        <a href="{{ url('organization_home', organization.pk, organization.slug) }}" class="organization-row">
          {% if organization.logo_override_image %}
            <img class="org-logo user-img" loading="lazy" src="{{ organization.logo_override_image }}">
          {% else %}
            <img class="org-logo" loading="lazy" src="{{ static('icons/icon.svg') }}" onerror="{{static('icons/logo.svg')}}">
          {% endif %}
          <span style="word-break: break-word;">{{ organization.name }}</span>
        </a>
      {% endfor %}
    </div>
  </div>
{% endif %}