{% for a in actors %}
  <article class="bg-white rounded-lg shadow-sm border border-stone-200 p-4 mb-3 flex items-center gap-4"
           id="actor-{{ a.actor_url | replace('/', '_') | replace(':', '_') }}">
    {% if a.icon_url %}
      <img src="{{ a.icon_url }}" alt="" class="w-12 h-12 rounded-full">
    {% else %}
      <div class="w-12 h-12 rounded-full bg-stone-300 flex items-center justify-center text-stone-600 font-bold">
        {{ (a.display_name or a.preferred_username)[0] | upper }}
      </div>
    {% endif %}

    <div class="flex-1 min-w-0">
      {% if a.id %}
        <a href="{{ url_for('ap_social.actor_timeline', id=a.id) }}" class="font-semibold text-stone-900 hover:underline">
          {{ a.display_name or a.preferred_username }}
        </a>
      {% else %}
        <span class="font-semibold text-stone-900">{{ a.display_name or a.preferred_username }}</span>
      {% endif %}
      <div class="text-sm text-stone-500">@{{ a.preferred_username }}@{{ a.domain }}</div>
      {% if a.summary %}
        <div class="text-sm text-stone-600 mt-1 truncate">{{ a.summary | striptags }}</div>
      {% endif %}
    </div>

    {% if actor %}
      <div class="flex-shrink-0">
        {% if a.actor_url in (followed_urls or []) %}
          <form method="post" action="{{ url_for('ap_social.unfollow') }}"
                sx-post="{{ url_for('ap_social.unfollow') }}"
                sx-target="closest article"
                sx-swap="outerHTML">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <input type="hidden" name="actor_url" value="{{ a.actor_url }}">
            <button type="submit" class="text-sm border border-stone-300 rounded px-3 py-1 hover:bg-stone-100">
              Unfollow
            </button>
          </form>
        {% else %}
          <form method="post" action="{{ url_for('ap_social.follow') }}"
                sx-post="{{ url_for('ap_social.follow') }}"
                sx-target="closest article"
                sx-swap="outerHTML">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <input type="hidden" name="actor_url" value="{{ a.actor_url }}">
            <button type="submit" class="text-sm bg-stone-800 text-white rounded px-3 py-1 hover:bg-stone-700">
              Follow
            </button>
          </form>
        {% endif %}
      </div>
    {% endif %}
  </article>
{% endfor %}

{% if actors | length >= 20 %}
  <div sx-get="{{ url_for('ap_social.search_page', q=query, page=page + 1) }}"
       sx-trigger="revealed"
       sx-swap="outerHTML">
  </div>
{% endif %}