{% if selected_groups and selected_groups|length %}
  <ul class="relative inline-flex flex-col gap-2">
    {% for sg in selected_groups %}
      {% for group in tag_groups %}
        {% if sg == group.slug %}
          <li role="listitem" class="flex flex-row items-center gap-1 pb-1">
              {% if group.feature_image %}
                <img
                  src="{{ group.feature_image }}"
                  alt="{{ group.name }}"
                  class="h-6 w-6 rounded-full object-cover border border-stone-300 flex-shrink-0"
                >
              {% else %}
                <div
                  class="h-6 w-6 rounded-full text-[10px] font-semibold flex items-center justify-center border border-stone-300 flex-shrink-0"
                  style="{% if group.colour %}background-color: {{ group.colour }}; color: white;{% else %}background-color: #e7e5e4; color: #57534e;{% endif %}"
                >
                  {{ group.name[:1] }}
                </div>
              {% endif %}

              <span class="inline-block bg-stone-100 text-stone-600 px-2 py-1 text-xs font-medium border border-stone-200">
                {{ group.name }}
              </span>
              <span>
                {{group.post_count}}
              </span>
          </li>
        {% endif %}
      {% endfor %}
    {% endfor %}
  </ul>
{% endif %}
