{% if selected_tags and selected_tags|length %}
  <ul class="relative inline-flex flex-col gap-2">
    {% for st in selected_tags %}
      {% for tag in tags %}
        {% if st == tag.slug %}
          <li role="listitem" class="flex flex-row items-center gap-1 pb-1">
              {% if tag.feature_image %}
                <img
                  src="{{ tag.feature_image }}"
                  alt="{{ tag.name }}"
                  class="h-6 w-6 rounded-full object-cover border border-stone-300 flex-shrink-0"
                >
              {% else %}
                {# optional fallback circle with first letter #}
                <div class="h-6 w-6 rounded-full bg-stone-200 text-stone-600 text-[10px] font-semibold flex items-center justify-center border border-stone-300 flex-shrink-0">
                  {{ tag.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">
                {{ tag.name }}
              </span>
              <span>
                {{tag.published_post_count}}
              </span>
          </li>
        {% endif %}
      {% endfor %}
    {% endfor %}
  </ul>
{% endif %}