{% load lyric_extras %}
<section id="id_drama_scroll" class="drama-scroll" data-scroll-position="{{ scroll_position|default:0 }}">
    {% for event in events %}
        <div class="drama-event {% if event.actor == viewer %}mine{% elif event.actor %}theirs{% else %}system{% endif %}" data-label="{% if event.struck %}redact{% else %}frame{% endif %}">
            <span class="drama-event-body{% if event.struck %} struck{% endif %}">
                {% if event.actor %}<strong>{{ event.actor|display_name }}</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 %}
    <div class="scroll-buffer" aria-hidden="true">
        <span class="scroll-buffer-text">What</span>
        <span class="scroll-buffer-text">&nbsp;happens</span>
        <span class="scroll-buffer-text terUser">&nbsp;next</span>
        <span class="scroll-buffer-dots terUser">
            <span></span><span></span><span></span><span></span>
        </span>
    </div>
</section>