{% load utils_tags typogrify_tags statistics_tags %}

<ul class="NB-interactions">
    {% for interaction in interactions %}
    <li class="NB-interaction NB-interaction-{{ interaction.category }} 
               {% if interaction.is_new %}NB-highlighted{% endif %}
               {% if interaction.category == 'story_reshare' %}NB-interaction-sharedstory{% endif %}"
        {% if interaction.content_id %}data-content-id="{{ interaction.content_id }}"{% endif %}
        {% if interaction.feed_id %}data-feed-id="{{ interaction.feed_id }}"{% endif %}
        {% if interaction.with_user_id %}data-user-id="{{ interaction.with_user_id }}"{% endif %}
        {% if interaction.with_user %}data-username="{{ interaction.with_user.username }}"{% endif %}>
        {% if interaction.category == 'follow' %}
            <img class="NB-interaction-photo" src="{{ interaction.photo_url }}"  data-user-id="{{ interaction.with_user_id }}">
            <div class="NB-interaction-title">
                <span class="NB-interaction-username NB-splash-link" data-user-id="{{ interaction.with_user_id }}">
                    {{ interaction.with_user.username }}
                </span> is now following you.
            </div>
            <div class="NB-interaction-date">
                {{ interaction.time_since }} ago
            </div>
        {% endif %}

        {% if interaction.category == 'comment_reply' or interaction.category == 'reply_reply' %}
            <img class="NB-interaction-photo" src="{{ interaction.photo_url }}"  data-user-id="{{ interaction.with_user_id }}">
            <div class="NB-interaction-title">
                <span class="NB-interaction-username NB-splash-link" data-user-id="{{ interaction.with_user_id }}">
                    {{ interaction.with_user.username }}
                </span> replied to your {% if interaction.category == 'comment_reply' %}comment{% else %}reply{% endif %}:
            </div>
            <div class="NB-interaction-content">
                <span class="NB-interaction-reply-content" data-social-user-id="{{ interaction.feed_id }}">{{ interaction.content|safe|truncatewords:128 }}</span>
            </div>
            <div class="NB-interaction-date">
                {{ interaction.time_since }} ago
            </div>
        {% endif %}
        
        {% if interaction.category == 'story_reshare' %}
            <img class="NB-interaction-photo" src="{{ interaction.photo_url }}"  data-user-id="{{ interaction.with_user_id }}">
            <div class="NB-interaction-title">
                <span class="NB-interaction-username NB-splash-link" data-user-id="{{ interaction.with_user_id }}">
                    {{ interaction.with_user.username }}
                </span> re-shared <span class="NB-interaction-sharedstory-title NB-splash-link" title="{{ interaction.title }}">{{ interaction.title|safe|truncatewords:12 }}</span>{% if interaction.content %}:{% else %}.{% endif %}
            </div>
            {% if interaction.content %}
                <div class="NB-interaction-content">
                    <span class="NB-interaction-sharedstory-content" data-social-user-id="{{ interaction.feed_id }}">{{ interaction.content|safe|truncatewords:128 }}</span>
                </div>
            {% endif %}
            <div class="NB-interaction-date">
                {{ interaction.time_since }} ago
            </div>
        {% endif %}
        
        {% if interaction.category == 'comment_like' %}
            <img class="NB-interaction-photo" src="{{ interaction.photo_url }}"  data-user-id="{{ interaction.with_user_id }}">
            <div class="NB-interaction-title">
                <span class="NB-interaction-username NB-splash-link" data-user-id="{{ interaction.with_user_id }}">
                    {{ interaction.with_user.username }}
                </span> favorited your comments on <span class="NB-interaction-sharedstory-title NB-splash-link" title="{{ interaction.title }}">{{ interaction.title|safe|truncatewords:12 }}</span>.
            </div>
            <div class="NB-interaction-date">
                {{ interaction.time_since }} ago
            </div>
        {% endif %}
    </li>
    {% endfor %}
</ul>