{% load lyric_extras %}
<section id="id_drama_scroll" class="drama-scroll" data-scroll-position="{{ scroll_position|default:0 }}">
    {% for event in events %}
        {# `data-base` is the underlying tag (frame|fable) REGARDLESS of struck; #}
        {# `data-label` collapses to redact when struck. The filter treats Redact #}
        {# as a MODIFIER on the base: a struck row shows only when BOTH its base   #}
        {# (Frame/Fable) AND Redact are checked, so unchecking a base hides that   #}
        {# tag's struck rows too. #}
        <div class="drama-event {% if event.actor == viewer %}mine{% elif event.actor %}theirs{% else %}system{% endif %}" data-base="{% if event.is_fable %}fable{% else %}frame{% endif %}" data-label="{% if event.struck %}redact{% elif event.is_fable %}fable{% else %}frame{% endif %}">
            <span class="drama-event-body{% if event.struck %} struck{% endif %}">
                {# Fable events (Significator / SkyDrive / Sea of Cards) read as #}
                {# the actor's CHARACTER acting — "@handle's character" is a stub #}
                {# for the character's name once it's set. The @handle is the bold #}
                {# --quaUser username; "'s character" stays --secUser body text    #}
                {# (outside the <strong>) to break up the username monotony.       #}
                {% if event.actor %}<strong>{{ event.actor|at_handle }}</strong>{% if event.is_fable %}<span class="ev-char-stub">'s character</span>{% endif %}{% 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>