{%- import "components.html" as components -%}
<turbo-frame id="stream_body_frame">
    <!-- prettier-ignore -->
    <div class="gap-2" id="stream_body">
        {% if page != 0 %}
        <div class="card flex gap-2 small tertiary flex-wrap">
            <b>{{ text "chats:label.viewing_old_messages" }}</b>
            <a href="/chats/{{ community }}/{{ channel }}/_stream?page={{ page - 1}}" class="button small" onclick="window.CURRENT_PAGE -= 1">
                {{ text "chats:label.go_back" }}
            </a>
        </div>
        {% endif %}

        {% for message in messages %}
            {{ components::message(user=message[1], message=message[0], grouped=message[2]) }}
        {% endfor %}

        {% if messages|length > 0 %}
        <div class="flex gap-2 w-full justify-center">
            <a class="button" href="/chats/{{ community }}/{{ channel }}/_stream?page={{ page + 1 }}" onclick="window.CURRENT_PAGE += 1">
                {{ icon "clock" }}
                <span>{{ text "chats:label.view_older" }}</span>
            </a>

            {% if page != 0 %}
            <a class="button quaternary" href="/chats/{{ community }}/{{ channel }}/_stream?page={{ page - 1 }}" onclick="window.CURRENT_PAGE -= 1">
                {{ icon "rewind" }}
                <span>{{ text "chats:label.view_more_recent" }}</span>
            </a>
            {% endif %}
        </div>
        {% endif %}
    </div>

    <style>
        #stream_body {
            height: 100%;
            display: flex;
            justify-content: flex-start;
            flex-direction: column-reverse;
            overflow: auto;
        }
    </style>
</turbo-frame>