{% load humanize %}
{% load naturalduration %}
{% load media_badges %}
<div class="timeline">
    {% for scrobble in timeline_scrobbles %}
    {% ifchanged scrobble.local_timestamp|date:"H" %}
    {% if not forloop.first %}
    </ul>
    {% endif %}
    <h5 class="timeline-hour">{{ scrobble.local_timestamp|date:"gA" }}</h5>
    <ul class="timeline-list list-unstyled">
    {% endifchanged %}
        <li class="timeline-item {% if scrobble.in_progress %}in-progress{% endif %}">
            <span class="timeline-time">{{ scrobble.local_timestamp|date:"H:i" }}</span>
            {% with meta=scrobble.media_type|media_type_meta %}
            {% if use_emojis %}
            <span class="badge media-badge timeline-type" style="background:{{ meta.color }}">{{ meta.icon }}</span>
            {% else %}
            <span class="badge media-badge timeline-type" style="background:{{ meta.color }}">{{ meta.initial }}</span>
            {% endif %}
            {% endwith %}
            <span class="timeline-body">
                {% if scrobble.in_progress %}
                <a href="{{ scrobble.get_absolute_url }}">{{ scrobble.media_obj.strings.verb }} now</a> |
                <a href="{% url 'scrobbles:finish' scrobble.id %}">Finish</a> &mdash;
                {% endif %}
                {% if scrobble.media_type == "AgentSession" and scrobble.logdata.title %}
                <a href="{{ scrobble.media_obj.get_absolute_url }}">{{ scrobble.logdata.title|truncatechars_html:60 }}</a>
                {% else %}
                <a href="{{ scrobble.media_obj.get_absolute_url }}">{{ scrobble.media_obj|truncatechars_html:60 }}</a>
                {% endif %}
                <span class="timeline-meta text-muted">({{ scrobble.media_type|lower }}&middot;{{ scrobble.elapsed_time|natural_duration }})</span>
            </span>
        </li>
    {% empty %}
    <p class="text-muted">Nothing scrobbled today.</p>
    {% endfor %}
    </ul>
</div>