{% if results|length > 0 %}
{% for song in results %}

    <div onclick="if(window.loader){return;};clearTimeout(window.r);if($('#video_id').val() != '{{song.youtube_id}}'){window.related = []; $('.mainimages').each(function(){ window.related.push($(this).attr('video-id'))}); window.related = shuffle(window.related); window.related.unshift('{{song.youtube_id}}') ;player.loadPlaylist(window.related);}"    style="margin-left:10px;cursor:pointer;display:inline-block;position: relative;" class="mainimages" onclick="window.loader = '{{song.youtube_id}}'; window.homepage = true;" video-id="{{song.youtube_id}}">
        <img alt="vido_thumb" style="padding:1px;width:100%;height:100%;" src="{{ song.thumb }}" class="mainthumbs" />
        <span class='hover_details' style='height:100%;background:#f7f7f7;opacity:0.9;display:block;position:absolute;bottom:0;font-size:10px!important;width:100%;font-size:11px;text-align:center;color:black;border-radius:5px;padding:4px; padding:20px;'  >
            <img alt="songs" style="border-radius:50%;width:50px;height:50px;border:#ccc 1px solid;padding:1px;"  src="{{ song.avatar }}" /><br>{{song.datafull | raw}}<br> spent {{song.timing}}" listening to this song.</span><br>
    </div>
{% endfor %}
{%endif%}