(text "{% extends \"root.lisp\" %} {% block head %}")
(title
    (text "{{ components::chat_name(chat=chat, members=members) }} — {{ config.name }}"))
(text "{% endblock %} {% block body %}")
(div
    ("class" "flex w_full gap_2 justify_between items_center")
    (div
        ("class" "tabs short bar flex")
        (a
            ("class" "button tab camo")
            ("href" "/chats")
            (text "{{ icon \"castle\" }} chats")
            (text "{% if user.missed_messages_count > 0 -%}") (b (text "({{ user.missed_messages_count }})")) (text "{%- endif %}"))
        (a
            ("class" "button tab")
            ("href" "/chats/{{ chat.id }}")
            (text "{{ components::chat_name(chat=chat, members=members, advanced=true, avatar_size=\"18px\") }}"))
        (a
            ("class" "button tab camo")
            ("href" "/chats/{{ chat.id }}/manage")
            (text "{{ icon \"settings-2\" }} manage"))))
(div
    ("class" "flex flex_col card_nest reverse")
    ("style" "flex: 1 0 auto")
    (div
        ("class" "flex flex_col")
        ("style" "flex: 1 0 auto; max-height: 80dvh; overflow: auto")
        (div
            ("class" "card flex flex_rev_col gap_2")
            ("style" "flex: 1 0 auto")
            ("id" "messages_stream")
            (div ("ui_ident" "data_marker")))
        (div ("id" "read_receipt_zone") ("class" "card") ("style" "min-height: 32.5px; position: sticky; bottom: 0"))
        (div ("id" "images_zone") ("class" "card hidden flex gap_2 flex_wrap")))
    (form
        ("class" "card flex flex_row items_center gap_2")
        ("onsubmit" "create_message(event)")
        (text "{% if user.permissions|has_supporter -%}")
        (div
            ("class" "dropdown")
            (button
                ("onclick" "open_dropdown(event)")
                ("exclude" "dropdown")
                ("class" "button icon_only big_icon")
                ("type" "button")
                (text "{{ icon \"plus\" }}"))
            (div
                ("class" "inner left")
                (button
                    ("class" "button")
                    ("onclick" "document.getElementById('images').click()")
                    ("type" "button")
                    (text "attach image"))))
        (text "{%- endif %}")

        (input
            ("type" "file")
            ("class" "hidden")
            ("accept" "image/*")
            ("id" "images")
            ("name" "images")
            ("multiple" "")
            ("onchange" "display_pending_images(event)"))

        (input
            ("type" "text")
            ("class" "w_full")
            ("name" "content")
            ("id" "content")
            ("placeholder" "Send a message to {{ components::chat_name(chat=chat, members=members) }}"))
        (button
            ("class" "button")
            (text "{{ icon \"send\" }}"))))

(script ("src" "/public/messages.js"))
(script
    (text "create_streamer(\"{{ chat.id }}\", document.querySelector(\"[ui_ident=data_marker]\"));
    sock_con();
    mark_message_read();
    read_receipt();

    setTimeout(() => {
        scroll_bottom();
    }, 1500);"))
(text "{% endblock %}")