{% load lyric_extras %}
<section
    id="id_applet_most_recent_scroll"
    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
>
    <h2>Most Recent Scroll</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{% elif event.actor %}theirs{% else %}system{% endif %}">
                    <span class="drama-event-body{% if event.struck %} struck{% endif %}">
                        {% if event.actor %}<strong>{{ event.actor|at_handle }}</strong>{% endif %}
                        {{ event.to_prose|safe }}
                    </span>
                    <time class="drama-event-time" datetime="{{ event.timestamp|date:'c' }}">
                        {{ event.timestamp|relative_ts }}
                    </time>
                </div>
            {% empty %}
                <p class="event-empty"><small>No events yet.</small></p>
            {% endfor %}
        </section>
    {% else %}
        <p class="applet-list-entry applet-list-entry--empty">No recent activity.</p>
    {% endif %}
</section>
<script>
(function() {
    var scroll = document.getElementById('id_drama_scroll');
    if (scroll) scroll.scrollTop = scroll.scrollHeight;
})();
</script>