python-tdd/src/templates/apps/billboard/_partials/_applet-most-recent-scroll.html

{% 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{% else %}theirs{% endif %}">
                    <span class="drama-event-body{% if event.struck %} struck{% endif %}">
                        <strong>{{ event.actor|display_name }}</strong>
                        {{ 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>