(text "{% extends \"root.lisp\" %} {% block head %}")
(title
    (text "Manage {{ 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"))
        (a
            ("class" "button tab camo")
            ("href" "/chats/{{ chat.id }}")
            (text "{{ components::chat_name(chat=chat, members=members, advanced=true, avatar_size=\"18px\") }}"))
        (a
            ("class" "button tab")
            ("href" "/chats/{{ chat.id }}/manage")
            (text "{{ icon \"settings-2\" }} manage"))))
(div
    ("class" "flex flex_col gap_4 card")
    ("style" "flex: 1 0 auto")
    (div
        ("class" "flex gap_2 flex_wrap")
        (text "{% if chat.style != \"Direct\" -%}")
        ; gc only
        (button
            ("class" "button surface")
            ("onclick" "rename_chat('{{ chat.id }}', GC_INFO)")
            (text "{{ icon \"pencil\" }} rename chat"))

        (script
            ("type" "application/json")
            ("id" "gc_info")
            (text "{{ chat.style.Group|json_encode() }}"))
        (script
            (text "globalThis.GC_INFO = JSON.parse(document.getElementById(\"gc_info\").innerHTML)"))
        (text "{%- endif %}")
        ; every chat
        (a
            ("class" "button surface")
            ("href" "/chats/{{ chat.id }}/pins")
            (text "{{ icon \"pin\" }} view pins")))

    (ul
        (li (b (text "Chat name: ")) (span (text "{{ components::chat_name(chat=chat, members=members) }}")))
        (li (b (text "Chat created: ")) (span (text "{{ chat.created / 1000|int|date(format=\"%Y-%m-%d %H:%M\", timezone=\"Etc/UTC\") }} UTC")))
        (li (b (text "Last message: ")) (span (text "{{ chat.last_message_created / 1000|int|date(format=\"%Y-%m-%d %H:%M\", timezone=\"Etc/UTC\") }} UTC")))
        (li
            (div
                ("class" "flex items_center gap_ch")
                (b (text "Owner:"))
                (a
                    ("class" "flex items_center gap_1 yellow")
                    ("href" "{{ config.service_hosts.tetratto }}/@{{ members[0].username }}")
                    (text "{{ icon \"crown\" }} {{ components::username(user=members[0]) }}")))))

    (hr)
    (div
        ("class" "flex w_full justify_between items_center gap_2")
        (h4 (text "Members") ("style" "margin: 0"))
        (div
            ("class" "flex gap_2")
            (text "{% if chat.style != \"Direct\" -%}")
            ; gc only
            (button ("class" "green button surface") ("onclick" "document.getElementById('add_user_dialog').showModal()") (text "add"))
            (text "{%- endif %}")

            (button ("class" "red button surface") ("onclick" "leave_chat('{{ chat.id }}')") (text "leave"))))

    (div
        ("class" "flex flex_col gap_2")
        (text "{% for member in members -%}")
        (div
            ("class" "card surface w_full flex flex_col gap_ch")
            (a
                ("class" "flush flex items_center gap_ch")
                ("href" "/@{{ member.username }}")
                (text "{{ components::avatar(id=member.id) }}")
                (text "{{ components::username(user=member) }}"))
            (span (text "{% if member.settings.status|length > 0 -%} {{ member.settings.status|markdown|safe }} {%- else -%} No status {%- endif %}"))
            (text "{% if is_owner -%}")
            (button
                ("class" "red button")
                ("onclick" "remove_member_from_chat('{{ chat.id }}', '{{ member.id }}')")
                (text "remove"))
            (text "{%- endif %}"))
        (text "{%- endfor %}")))

(dialog
    ("id" "add_user_dialog")
    (form
        ("class" "inner")
        ("onsubmit" "add_member_to_chat(event, '{{ chat.id }}')")
        (h2
            ("class" "text_center w_full")
            (text "Add user"))

        (input
            ("type" "text")
            ("list" "users_search")
            ("name" "username")
            ("id" "username")
            ("placeholder" "username")
            ("oninput" "search_users(event)"))

        (hr ("class" "margin"))

        (div
            ("class" "flex gap_2 justify_between")
            (button
                ("onclick" "document.getElementById('add_user_dialog').close()")
                ("class" "button red")
                ("type" "button")
                (text "Cancel"))

            (button
                ("class" "button green")
                (text "Add")))))
(datalist ("id" "users_search"))

(script ("src" "/public/messages.js"))
(text "{% endblock %}")