{% load lyric_extras %}
<section
    id="id_applet_billboard_most_recent"
    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
>
    <h2>Most Recent</h2>
    {% if recent_room %}
        <a href="{% url 'billboard:scroll' recent_room.id %}" class="most-recent-room-link">{{ recent_room.name }}</a>
        <section id="id_drama_scroll" class="drama-scroll">
            <a href="{% url 'billboard:scroll' recent_room.id %}" class="most-recent-load-more">Load more….</a>
            {% for event in recent_events %}
                <div class="drama-event {% if event.actor == viewer %}mine{% else %}theirs{% endif %}">
                    <span class="event-body">
                        <strong>{{ event.actor|display_name }}</strong>
                        {{ event.to_prose }}<br>
                        <time class="event-time" datetime="{{ event.timestamp|date:'c' }}">
                            {{ event.timestamp|date:"N j, g:i a" }}
                        </time>
                    </span>
                </div>
            {% empty %}
                <p class="event-empty"><small>No events yet.</small></p>
            {% endfor %}
        </section>
    {% else %}
        <p><small>No recent activity.</small></p>
    {% endif %}
</section>
<script>
(function() {
    var scroll = document.getElementById('id_drama_scroll');
    if (scroll) scroll.scrollTop = scroll.scrollHeight;
})();
</script>