{% if selected_authors and selected_authors|length %}
  <ul class="relative inline-flex flex-col gap-2">
    {% for st in selected_authors %}
      {% for author in authors %}
        {% if st == author.slug %}
          <li role="listitem" class="flex flex-row items-center gap-1 pb-1">
              {% if author.profile_image %}
                <img
                  src="{{ author.profile_image }}"
                  alt="{{ author.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">
                  {{ author.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">
                {{ author.name }}
              </span>
              <span>
                {{author.published_post_count}}
              </span>
          </li>
        {% endif %}
      {% endfor %}
    {% endfor %}
  </ul>
{% endif %}