(text "{%- import \"components.html\" as components -%}")
(turbo-frame
    ("id" "stream_body_frame")
    (div
        ("class" "gap-2")
        ("id" "stream_body")
        (text "{% if page != 0 -%}")
        (div
            ("class" "card flex gap-2 small lowered flex-wrap")
            (b
                (text "{{ text \"chats:label.viewing_old_messages\" }}"))
            (a
                ("href" "/chats/{{ community }}/{{ channel }}/_stream?page={{ page - 1}}")
                ("class" "button small")
                ("onclick" "window.CURRENT_PAGE -= 1")
                (text "{{ text \"chats:label.go_back\" }}")))
        (text "{%- endif %}  {% if message -%}")
        (div
            ("class" "card flex gap-2 small lowered flex-wrap")
            (b
                (text "{{ text \"chats:label.viewing_single_message\" }}"))
            (a
                ("href" "/chats/{{ community }}/{{ channel }}?page={{ page }}")
                ("class" "button small")
                ("onclick" "window.VIEWING_SINGLE = false")
                ("target" "_top")
                (text "{{ text \"chats:label.go_back\" }}")))
        (text "{{ components::message(user=message_owner, message=message, grouped=false) }} {% else %} {% for message in messages %} {{ components::message(user=message[1], message=message[0], grouped=message[2]) }} {% endfor %} {%- endif %}  {% 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")
                (text "{{ icon \"clock\" }}")
                (span
                    (text "{{ text \"chats:label.view_older\" }}")))
            (text "{% if page != 0 -%}")
            (a
                ("class" "button lowered")
                ("href" "/chats/{{ community }}/{{ channel }}/_stream?page={{ page - 1 }}")
                ("onclick" "window.CURRENT_PAGE -= 1")
                (text "{{ icon \"rewind\" }}")
                (span
                    (text "{{ text \"chats:label.view_more_recent\" }}")))
            (text "{%- endif %}"))
        (text "{%- endif %}"))
    (style
        (text "#stream_body {
            height: 100%;
            display: flex;
            justify-content: flex-start;
            flex-direction: column-reverse;
            overflow: auto;
        }")))