(text "{% extends \"root.lisp\" %} {% block head %}")
(title
    (text "My chats - {{ name }}"))
(text "{% endblock %} {% block body %}")
(div
    ("class" "flex w_full gap_2 justify_between items_center")
    (div
        ("class" "tabs short bar")
        (a
            ("class" "button tab")
            ("href" "/chats")
            (text "chats")))
    (button
        ("class" "button")
        ("title" "Create chat")
        ("onclick" "document.getElementById('create_dialog').showModal()")
        (text "{{ icon \"plus\" }}")))
(div
    ("class" "card flex flex_col gap_2")
    (text "{% for chat in chats -%}")
    (div
        ("class" "card surface w_full flex justify_between items_center gap_2")
        (a
            ("class" "flex gap_ch items_center")
            ("href" "/chats/{{ chat[0].id }}")
            (text "{{ components::chat_name(chat=chat[0], members=chat[1], advanced=true) }}"))
        (div
            ("class" "dropdown")
            (button
                ("onclick" "open_dropdown(event)")
                ("exclude" "dropdown")
                ("class" "button")
                (text "{{ icon \"ellipsis\" }}"))
            (div
                ("class" "inner")
                (a
                    ("class" "button")
                    ("href" "/chats/{{ chat[0].id }}")
                    ("target" "_blank")
                    (text "pop open"))

                (text "{% if chat[0].style != \"Direct\" -%}")
                ; group chat only
                (button
                    ("class" "button")
                    ("onclick" "rename_gc('{{ chat[0].id }}')")
                    (text "rename"))
                (text "{%- endif %}")

                (button
                    ("class" "button red")
                    ("onclick" "leave_chat('{{ chat[0].id }}')")
                    (text "leave")))))
    (text "{%- endfor %}")

    (text "{% if chats|length == 0 -%}")
    (i ("class" "flex gap_ch items_center fade") (text "{{ icon \"smile\" }} No results, yet!"))
    (text "{%- endif %}")

    ; pagination
    (div
        ("class" "flex w_full items_center gap_2 justify_between")
        (text "{% if page > 0 -%}")
        (a
            ("href" "?page={{ page - 1 }}")
            ("class" "button surface")
            (text "{{ icon \"arrow-left\" }} Back"))
        (text "{%- else -%}")
        (div null?)
        (text "{%- endif %}")

        (text "{% if chats|length > 0 -%}")
        (a
            ("href" "?page={{ page + 1 }}")
            ("class" "button surface")
            (text "Next {{ icon \"arrow-right\" }}"))
        (text "{%- endif %}")))

(dialog
    ("id" "create_dialog")
    (div
        ("class" "inner")
        (h2
            ("class" "text_center w_full")
            (text "Create chat"))

        (ul ("id" "members_list"))
        (form
            ("class" "flex flex_row gap_2 w_full")
            ("onsubmit" "add_member(event)")
            (input
                ("type" "text")
                ("list" "users_search")
                ("name" "username")
                ("id" "username")
                ("placeholder" "username")
                ("oninput" "search_users(event)"))
            (button
                ("class" "button")
                (text "Add")))

        (hr ("class" "margin"))

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

            (button
                ("class" "button green")
                ("onclick" "create_chat_from_form()")
                (text "Create")))))

(datalist ("id" "users_search"))

(script
    (text "globalThis.CHAT_MEMBERS = [];

    function render_members() {
        document.getElementById('members_list').innerHTML = \"\";
        for (const member of CHAT_MEMBERS) {
            document.getElementById('members_list').innerHTML += `<li>${member} (<a href=\"javascript:remove_member('${member}')\" class=\"red\">remove</a>)</li>`;
        }
    }

    function add_member(e) {
        e.preventDefault();
        const member = e.target.username.value;

        if (CHAT_MEMBERS.includes(member)) {
            return;
        }

        CHAT_MEMBERS.push(member);
        render_members();
        e.target.reset();
    }

    function remove_member(member) {
        CHAT_MEMBERS.splice(CHAT_MEMBERS.indexOf(member), 1);
        render_members();
    }

    function create_chat_from_form(e) {
        document.getElementById('create_dialog').close();

        fetch(\"/api/v1/chats\", {
            method: \"POST\",
            headers: {
                \"Content-Type\": \"application/json\",
            },
            body: JSON.stringify({
                style: CHAT_MEMBERS.length > 1 ? { Group: { name: \"Untitled\" } } : \"Direct\",
                members: CHAT_MEMBERS,
            }),
        })
            .then((res) => res.json())
            .then((res) => {
                show_message(res.message, res.ok);

                if (res.ok) {
                    window.location.href = `/chats/${res.payload}`;
                    e.target.reset();
                }
            });
    }

    let search_users_timeout;
    function search_users(e) {
        if (search_users_timeout) {
            clearTimeout(search_users_timeout);
        }

        if (e.target.value.trim().length === 0) {
            return;
        }

        search_users_timeout = setTimeout(() => {
            fetch(\"/api/v1/auth/users/search\", {
                method: \"POST\",
                headers: {
                    \"Content-Type\": \"application/json\",
                },
                body: JSON.stringify({
                    prefix: e.target.value.trim(),
                }),
            })
                .then((res) => res.json())
                .then((res) => {
                    if (res.ok) {
                        document.getElementById(\"users_search\").innerHTML = \"\";
                        for (const username of res.payload) {
                            document.getElementById(\"users_search\").innerHTML += `<option value=\"${username}\">${username}</option>`;
                        }
                    } else {
                        show_message(res.message, res.ok);
                    }
                });
        }, 1000);
    }

    function leave_chat(id) {
        if (!confirm(\"Are you sure you would like to do this?\")) {
            return;
        }

        fetch(`/api/v1/chats/${id}/leave`, {
            method: \"POST\",
        })
            .then((res) => res.json())
            .then((res) => {
                show_message(res.message, res.ok);
            });
    }"))
(text "{% endblock %}")