{% if comments %}
  {% for comment in comments %}
    <div id="comment-{{ comment.extension_comment_id }}" class="media">
      <img src="{{ comment.image }}" alt="{{ comment.member }}" title="{{ comment.member }}" class="me-3 rounded-circle"/>
      <div class="media-body">
        <h5 class="mt-0">{{ comment.member }} <span>{{ comment.date_added }}</span></h5>
        <p>{{ comment.comment }}</p>
        <div class="reply">
          <div>
            {% if comment.reply %}
              {% for reply in comment.reply %}
                <div class="media">
                  <img src="{{ reply.image }}" alt="{{ reply.member }}" title="{{ reply.member }}" class="me-3 rounded-circle"/>
                  <div class="media-body">
                    <h5 class="mt-0">{{ reply.member }} <span>{{ reply.date_added }}</h5>
                    <p>{{ reply.comment }}</p>
                  </div>
                </div>
              {% endfor %}
              {% if comment.next %}
                <div class="text-center"><a href="{{ comment.next }}" class="btn btn-block">{{ text_more }}</a></div>
              {% endif %}
            {% endif %}<a href="{{ comment.refresh }}" class="reply-refresh hide">{{ text_refresh }}</a>
          </div>
        </div>
        <p class="text-end">
          <button type="button" class="btn btn-link btn-sm">{{ button_reply }}</button>
        </p>
        <div class="reply-input-box" style="display: none;">
          <div class="media">
            <div class="media-body">
              <div class="mb-3">
                <label for="input-comment-{{ comment.extension_comment_id }}">{{ text_comment_add }}</label> <textarea name="comment" placeholder="{{ text_write }}" id="input-comment-{{ comment.extension_comment_id }}" class="form-control"></textarea>
              </div>
              <div class="text-end"><a href="{{ comment.add }}" class="btn btn-primary btn-sm">{{ button_comment }}</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  {% endfor %}
  <br/>
  <div class="text-center">{{ pagination }}</div>
{% endif %}