(text "{% extends \"root.html\" %} {% block head %}")
(title
    (text "Add user to stack - {{ config.name }}"))

(text "{% endblock %} {% block body %} {{ macros::nav(selected=\"\") }}")
(main
    ("class" "flex flex_col gap_2")
    (div
        ("class" "card_nest")
        (div
            ("class" "card small flex items_center gap_2")
            (text "{{ components::avatar(username=add_user.username, size=\"24px\") }}")
            (text "{{ components::full_username(user=add_user) }}"))
        (div
            ("class" "card flex flex_col gap_2")
            (span (text "Select a stack to add this user to:"))
            (text "{% for stack in stacks %}")
            (button
                ("class" "justify_start lowered w_full")
                ("onclick" "choose_stack('{{ stack.id }}')")
                (icon (text "layers"))
                (text "{{ stack.name }}"))
            (text "{% endfor %}"))))

(script
    (text "function choose_stack(id) {
        fetch(`/api/v1/stacks/${id}/users`, {
            method: \"POST\",
            headers: {
                \"Content-Type\": \"application/json\",
            },
            body: JSON.stringify({
                username: \"{{ add_user.username }}\",
            }),
        })
            .then((res) => res.json())
            .then((res) => {
                trigger(\"atto::toast\", [
                    res.ok ? \"success\" : \"error\",
                    res.message,
                ]);

                if (res.ok) {
                    window.close();
                }
            });
    }"))

(text "{% endblock %}")