{% load humanize %}
<ul>
    <b>Now playing</b>
    {% for scrobble in now_playing_list %}
    <div class="now-playing">
        {% if scrobble.media_obj.primary_image_url %}<div style="float:left;padding-right:10px;padding-bottom:10px;"><img src="{{scrobble.media_obj.primary_image_url}}" /></div>{% endif %}
        <p><a href="{{scrobble.get_absolute_url}}">{{scrobble.media_obj}}</a></p>
        {% if scrobble.logdata %}{% if scrobble.logdata.title%}<p><em>{{scrobble.logdata.title}}</em></p>{% endif %}{% endif %}
        <p><small>{{scrobble.local_timestamp|naturaltime}} from {{scrobble.source}}</small></p>
        <div class="progress-bar" style="margin-right:5px;">
            <span class="progress-bar-fill" style="width: {{scrobble.percent_played}}%;"></span>
        </div>
        <p class="action-buttons">
            <a href="{% url "scrobbles:cancel" scrobble.id %}">Cancel</a>
            <a class="right" href="{% url "scrobbles:finish" scrobble.id %}">Finish</a>
        </p>
        {% if not forloop.last %}<hr/>{% endif %}
    </div>
    {% endfor %}
</ul>
{% if now_playing_list|length > 1 %}<hr/>{% endif %}