<article class="bg-white rounded-lg shadow-sm border border-stone-200 p-4 mb-4">
  {% if item.boosted_by %}
    <div class="text-sm text-stone-500 mb-2">
      Boosted by {{ item.boosted_by }}
    </div>
  {% endif %}

  <div class="flex items-start gap-3">
    {% if item.actor_icon %}
      <img src="{{ item.actor_icon }}" alt="" class="w-10 h-10 rounded-full">
    {% else %}
      <div class="w-10 h-10 rounded-full bg-stone-300 flex items-center justify-center text-stone-600 font-bold text-sm">
        {{ item.actor_name[0] | upper if item.actor_name else '?' }}
      </div>
    {% endif %}

    <div class="flex-1 min-w-0">
      <div class="flex items-baseline gap-2">
        <span class="font-semibold text-stone-900">{{ item.actor_name }}</span>
        <span class="text-sm text-stone-500">
          @{{ item.actor_username }}{% if item.actor_domain %}@{{ item.actor_domain }}{% endif %}
        </span>
        <span class="text-sm text-stone-400 ml-auto">
          {% if item.published %}
            {{ item.published.strftime('%b %d, %H:%M') }}
          {% endif %}
        </span>
      </div>

      {% if item.summary %}
        <details class="mt-2">
          <summary class="text-stone-500 cursor-pointer">CW: {{ item.summary }}</summary>
          <div class="mt-2 prose prose-sm prose-stone max-w-none">{{ item.content | safe }}</div>
        </details>
      {% else %}
        <div class="mt-2 prose prose-sm prose-stone max-w-none">{{ item.content | safe }}</div>
      {% endif %}

      <div class="mt-2 flex gap-3 text-sm text-stone-400">
        {% if item.url and item.post_type == "remote" %}
          <a href="{{ item.url }}" target="_blank" rel="noopener" class="hover:underline">
            original
          </a>
        {% endif %}
        {% if item.object_id %}
          <a href="{{ federation_url('/social/') }}" class="hover:underline">
            View on Hub
          </a>
        {% endif %}
      </div>
    </div>
  </div>
</article>
