{% if results|length > 0 %}
    <span>Top Songs</span>
    <br>
    <div style="height:400px;overflow-y:scroll;">
    {% for result in results %}

            <div>
                <span style="font-weight:bold;color:black;vertical-align:top;">{{ loop.index }}.</span>
                <img style="width:100px;padding:1px;border:#ccc 1px solid;display:inline-block;vertical-align:top;" src="{{ result.thumb }}" />
                <div style="display:inline-block;width:400px;">
                    <ul style="padding-left:8px;">
                        <li style="color:black;"><a style="color:black;" href="{{ result.video_url }}">{{ result.title }}</a></li>
                        <li style="font-weight:normal;" title="{{ result.full_description }}">{{ result.description }}...</li>
                        <li><a href="{{ result.user_link }}font-size:10px;"><img style="width:30px;height:30px;" src="{{ result.avatar }}"/> Suggested by <span style="color:black">{{ result.name }}</span></a></li>
                        <li style="font-weight:normal;font-size:10px;"><img style="width:16px;height:16px;" src="{{ image_path }}genius.png" />&nbsp;<span style="color:#428bca;">geniusScore&#153;</span> {{ result.replay_score }}x&nbsp;&nbsp;<img style="width:16px;height:16px;" src="{{ image_path }}replay.png"/>&nbsp;<span style="color:#428bca;">replayScore&#153;</span> <b>{{ result.overall_replay_score }}x</b></li>
                        <li style="font-size:10px;">{{ result.time_ago }}</li>
                    </ul>
                </div>
            </div>
<hr>
    {% endfor %}
    </div>
{% else %}
    <div>
        There are no results. Try again when more people share and listen to each others suggestions
    </div>
{% endif %}