{% if results|length > 0 %}
            {% for related in results %}
                <ons-list-item style="background-color:#f2f2f2;padding: 0;padding-top: 5px;padding-bottom: 8px;" audition="true" modifier="nodivider" id="feedListItem{{ 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> {{'auditioned'}}  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%;">
                    </div>
                    {% if related.comment_count > 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;">Be the first to comment</span>
                        </div>
                    {% endif %}
                </ons-list-item>
        {% endfor %}
    <p style="text-align:center;margin-left:auto;margin-right:auto;">
        <ons-button id="more_link" class="more_link" onclick="moreFeedItems(this)" modifier="large">More Songs..</ons-button>
    </p>

{% else %}
<ons-list-items>
    <div>There is not any more auditions</div>
</ons-list-items>
{% endif %}