{% macro render_comment(comments) %} {% for comment in comments %}
<div class="comment-item">
  <div class="comment-avatar">
    <img
      class="avatar-img"
      src="https://ui-avatars.com/api/?name={{ comment.author }}&background=random&size=128"
      width="48"
      height="48"
      alt="{{ comment.author }}"
    />
  </div>
  <div class="comment-body">
    <div class="comment-header">
      <h5 class="comment-author">{{ comment.author }}</h5>
      <span class="comment-date">{{ comment.date }}</span>
    </div>
    <div class="comment-text">{{ comment.content }}</div>
  </div>
</div>
{% else %}
<p
  style="color: #6a737d; font-style: italic; text-align: center; padding: 20px"
>
  No comments yet. Be the first to share your thoughts!
</p>
{% endfor %} {% endmacro %}