{# Recent Comments Widget — sidebar #}
{% if recentComments and recentComments.length %}
<is-land on:visible>
<div class="widget">
  <h3 class="widget-title">Recent Comments</h3>
  <ul class="space-y-3">
    {% for comment in recentComments %}
    <li class="text-sm">
      <div class="flex items-start gap-2">
        {% if comment.author and comment.author.photo %}
        <img src="{{ comment.author.photo }}" alt="{{ comment.author.name }}"
             class="w-6 h-6 rounded-full flex-shrink-0 mt-0.5 shadow-lg" loading="lazy">
        {% endif %}
        <div>
          <span class="font-medium">{{ comment.author.name or "Anonymous" }}</span>
          <p class="text-surface-600 dark:text-surface-400 line-clamp-2">{{ comment.content.text | truncate(80) }}</p>
          {% if comment["comment-target"] %}
          <a href="{{ comment['comment-target'] }}" class="text-xs text-accent-600 dark:text-accent-400 hover:underline">View post</a>
          {% endif %}
        </div>
      </div>
    </li>
    {% endfor %}
  </ul>
</div>
</is-land>
{% endif %}