{% props label: String, action: String, older: String = "", new_count: i64 = 0, height: String = "", inner_block: Slot %}
{#- inner_block: Markers and Messages, oldest first; older: the "Load earlier messages" link (?before=…); new_count: unread messages below, for the jump pill; action: where the composer posts (as body). #}
<section class="ui-scroller" aria-label="{{ label }}" data-ui="message-scroller"{% if !height.is_empty() %} style="height:{{ height }}"{% end %}>
<div class="ui-scroller-viewport" role="log" aria-live="polite" tabindex="0">
{%- if !older.is_empty() %}
<div class="ui-scroller-older"><a class="ui-btn" data-variant="ghost" data-size="sm" href="{{ older }}">Load earlier messages</a></div>
{%- end %}
<div class="ui-thread">{{ inner_block }}</div>
<div id="latest"></div>
</div>
{%- if new_count > 0 %}
<a class="ui-btn ui-scroller-jump" data-variant="outline" data-size="sm" href="#latest"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>{{ new_count }} new {% if new_count == 1 %}message{% else %}messages{% end %}</a>
{%- end %}
<form class="ui-scroller-compose" method="post" action="{{ action }}">{{ csrf_field() }}<button class="ui-btn" data-variant="ghost" data-size="icon" type="button" aria-label="Attach a file"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg></button><input class="ui-input" name="body" placeholder="Write a message…" aria-label="Message" autocomplete="off"><button class="ui-btn" data-size="icon" aria-label="Send"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg></button></form>
</section>