{% if results|length > 0 %}

    {% for related in results %}

        <ons-list-item class="onsenFeedItem" modifier="nodivider" id="feedListItem{{ related.activity_id }}" youtube-id="{{ related.youtube_id }}" audition="false" video-id="{{ related.vid }}" user-id="{{ related.user }}" activity-id="{{ related.activity_id }}" style="padding:0;padding-top: 15px;">
            <div style="width:100%;">
                <div style="display:inline-block;padding:5px;">
                    <img onerror="this.src='{{ image_path }}noimage.png';" style="border-radius:50%;width:50px;height:50px" src="{{ related.avatar }}" alt="{{ related.html_title }}" /><span class="vertical-align"></span>
                </div>
                <div style="display: inline-block;font-size: 10px;position: relative;">
                   <span style="color:black;font-weight:bold;" href="{{ related.profile_url }}" title="{{ related.related_name }}'s replayScore&#153; {{ related.replay_score }}x"> {{ related.related_name }} </span> suggested to <span style="color:#84d684;">{{ related.playlist_name }}</span>
                    <br>
                    <span style="color:#428bca;font-size:10px;"><img style="width:16px" src="{{ image_path }}genius.png" /><span style="position:relative;top:-4px;">&nbsp;geniusScore&#153;<span style="font-size:10px;font-weight:bold;">{{ related.genius_score }}x</span></span></span>
                    <div style="width:100%;">
                        <span style="font-size:10px;color:black;position:relative;top:-2px;">{{ related.time_ago }}</span>
                    </div>
                </div>
                <div style="    display: inline-block;
    float: right;
    position: relative;
    right: 10px;
    top: 20px;">
                    <ons-icon onclick='songOptions({{ related.vid }},"{{ related.youtube_id }}","{{ related.title }}","{{ related.user }}","{{ related.activity_id }}");' class="right" size="14px" icon="fa-user-cog"></ons-icon>
                </div>
            </div>
            <img id="previewImage{{ related.activity_id }}" onclick="loadYTVideo({{ related.activity_id }}, '{{ related.youtube_id }}');" style="width:100%;" onerror="this.src='{{ image_path }}noimage.png';" src="{{ related.thumbnail }}" alt="{{ related.html_title }}" />
            <div id="playerContainer{{ related.activity_id }}">

            </div>

            <div style="width:100%;">
                <div style="display:inline-block;padding-top:8px;">
                    <span class="title" style="padding-left:8px;font-size:11px;color:black;">{{ related.cut_title }}</span>
                </div>
                <div style="display:inline-block;float:right;padding-top: 8px;padding-right: 8px;">
                    <i id="likeHeart{{ related.activity_id }}" onclick="likeSong('{{ related.vid }}','{{ related.activity_id }}'); " style="color:{{ related.user_liked == true ? "#c16161" : "black" }}" class=" {{ related.user_liked == true ? "fa-heartbeat fas" : "fa-heart far" }}"></i>
                </div>
            </div>
            <br>
            <div style="width:100%;padding-left:8px;">
                <span style="color:#428bca;font-size:10px;"><img style="width:12px;" src="{{ image_path }}replay.png"/><span style="position:relative;top:-3px;">&nbsp;replayScore&#153;<span style="font-weight:bold;font-size:10px;">{{ related.overall_replay_score }}x</span></span></span>
            </div>

            {% if related.comments|length >= 0 %}
                <div style="padding-left: 8px;
    font-weight: bold;
    font-size: 11px;
    color: black;
    padding-bottom: 8px;
    display: block;width:100%;">
                    <span onclick="showComments({{ related.vid }});" style="padding-left:8px;font-weight:bold;font-size:11px;color:black;">Comments ({{ related.comment_count }})</span>
                    <ul style="padding-left:8px;margin-top:0;">
                        {% for comment in related.comments|slice(0,3) %}
                        <li style="list-style-type: none;">
                            <span style="font-size:8px;color:#ddd;">{{ comment.name }}</span>
                            <br>
                            <div class="" style="display: inline-block;">
                                <img style="width: 30px;border-radius: 50%;" onerror="this.src='{{ image_path }}noimage.png';" src="{{ comment.avatar }}"/>
                            </div>
                            <div style="position: relative;top: -10px;display: inline-block;font-size: 10px;">
                                {{ comment.comment_text|slice(0,65) }}...
                            </div>
                            {% endfor %}
                        </li>
                    </ul>
                </div>
            {% else %}
                <div style="padding-left: 8px;
    font-weight: bold;
    font-size: 11px;
    color: black;
    padding-bottom: 8px;
    display: block;width:100%;">
                    <span onclick="showComments({{ related.vid }});" style="padding-left:8px;font-weight:bold;font-size:11px;color:black;">No comments so far for this song. Be the first!</span>
                </div>

            {% endif %}
        </ons-list-item>
    {% endfor %}


{% else %}

    {% if r == 'friends' %}
    <ons-list-item>
            <p><i class="icon-info-sign"></i>&nbsp;No Suggestions ...</p>
    </ons-list-item>>
    {% elseif r == 'me' %}
        <ons-list-item>
            {% if profile_id == 0 %}
                <p><i class="icon-info-sign"></i>&nbsp;No Suggestions ...</p>
            {% else %}
                <p><i class="icon-info-sign"></i>&nbsp;No Suggestions ...</p>
            {% endif %}
        </ons-list-item>
    {% else %}
        <ons-list-item>
            <p><i class="icon-info-sign"></i>&nbsp;No Suggestions ...</p>

        </ons-list-item>
    {% endif %}

{% endif %}

<ons-list-item>
    <div style="width:300px;margin-left:auto;margin-right:auto;text-align:center;">
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <!-- Mobile Feeds -->
        <ins class="adsbygoogle"
             style="display:block"
             data-ad-client="ca-pub-1833995108668961"
             data-ad-slot="8510366406"
             data-ad-format="auto"
             data-full-width-responsive="true"></ins>
        <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>
    <div style="width:100%;margin-left:auto;margin-right:auto;text-align: center;padding:20px;">
        {% if profileFeed %}
        <ons-button class="more_link" onclick="moreProfileFeedItems(this);">Show Me More Songs</ons-button>
        {% elseif userFeed %}
            <ons-button class="more_link" onclick="moreUserFeedItems(this);">Show Me More Songs</ons-button>
        {% else %}
        <ons-button class="more_link" onclick="moreFeedItems(this);">Show Me More Songs</ons-button>
        {% endif %}

    </div>

</ons-list-item>