{#
/**
 * @file heartbeat-stream.html.twig
 * Default theme implementation to present Heartbeat stream data.
 *
 * This template is used when viewing Heartbeat stream pages.
 *
 *
 * Available variables:
 * - content: A list of content items. Use 'content' to print all content, or
 * - attributes: HTML attributes for the container element.
 *
 * @see template_preprocess_heartbeat_stream()
 *
 * @ingroup themeable
 */
#}
<div class="heartbeat-stream">
  {% if content %}
    {{- content -}}
  {% endif %}
  {% autoescape false %}
  {% for message in messages %}
    <div{{ attributes.addClass('heartbeat-message') }} id="heartbeat-{{ message.id }}">
      {#{{ message }}#}
      <div class="heartbeat-message-wrap">
        <div class="heartbeat-owner">
          <a href="/user/{{ message.userId }}"><img src="{{ message.userPicture }}" />
            {{ message.userName }}
          </a>
          {{ message.user }}
          <div class="time-ago">{{ message.timeAgo }}</div>
        </div>
        <div class="heartbeat-content hid-{{ message.id }}">
        {{ message.heartbeat }}
        </div>
      </div>
      <div class="heartbeat-interaction-wrap">
        <div class="heartbeat-like">
          {{ message.likeFlag }}
        </div>
        <div class="heartbeat-unlike">
          {{ message.unlikeFlag }}
        </div>
        <div class="heartbeat-comment-button">
          {% if message.commentCount > 1 %}
            {{ message.commentCount }} comments
          {% elseif message.commentCount == 1 %}
            {{ message.commentCount }} comment
          {% else %}
            Comment
          {% endif %}
        </div>
        <div class="heartbeat-comment" id="comment-{{ message.id }}">
          {{ message.commentForm }}
          <div class="heartbeat-comments">
            {% for comment in message.comments %}
              <div id="heartbeat-comment-{{ comment.id }}">
                <span class="comment-owner">{{ comment.owner }}
                  <span class="comment-username">{{ comment.username }}</span><br>
                  <span class="comment-ago">{{ comment.timeAgo }}</span>
                </span>
                <span class="comment-body">{{ comment.body }}
                  <div class="comment-like">{{ comment.commentLike}}</div>
                </span>
                <span class ="sub-comment">
                  {% for subComment in comment.subComments %}
                  <div class="heartbeat-subcomment" id="sub-comment-{{ subComment.id }}">
                    <span class="sub-comment-owner">{{ subComment.owner }}
                      <span class="sub-comment-username">{{ subComment.username }}</span><br>
                      <span class="sub-comment-ago">{{ subComment.timeAgo }}</span>
                    </span>
                    <span class="sub-comment-body">{{ subComment.body }}
                      <div class="sub-comment-like">{{ subComment.commentLike}}</div>
                    </span>
                  </div>
                  {% endfor %}
                  {{ comment.reply }}
                </span>
              </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  {% endfor %}
  {% endautoescape %}
</div>
<div id="heartbeat-friendship-action"></div>