(text "{% extends \"root.html\" %} {% block head %}")
(title
    (text "Stack settings - {{ config.name }}"))

(text "{% endblock %} {% block body %} {{ macros::nav() }}")
(main
    ("class" "flex flex-col gap-2")
    (div
        ("class" "pillmenu")
        (a
            ("href" "#/general")
            ("data-tab-button" "general")
            ("class" "active")
            (text "{{ icon \"settings\" }}")
            (span
                (text "{{ text \"stacks:tab.general\" }}")))
        (a
            ("href" "#/users")
            ("data-tab-button" "users")
            (text "{{ icon \"users\" }}")
            (span
                (text "{{ text \"stacks:tab.users\" }}"))))
    (div
        ("class" "w-full flex flex-col gap-2")
        ("data-tab" "general")
        (div
            ("id" "manage_fields")
            ("class" "card lowered flex flex-col gap-2")
            (div
                ("class" "card-nest")
                ("ui_ident" "privacy")
                (div
                    ("class" "card small")
                    (b
                        (text "Privacy")))
                (div
                    ("class" "card")
                    (select
                        ("onchange" "save_privacy(event)")
                        (option
                            ("value" "Private")
                            ("selected" "{% if stack.privacy == 'Private' -%}true{% else %}false{%- endif %}")
                            (text "Private"))
                        (option
                            ("value" "Public")
                            ("selected" "{% if stack.privacy == 'Public' -%}true{% else %}false{%- endif %}")
                            (text "Public")))))
            (div
                ("class" "card-nest")
                ("ui_ident" "mode")
                (div
                    ("class" "card small")
                    (b
                        (text "Mode")))
                (div
                    ("class" "card")
                    (select
                        ("onchange" "save_mode(event)")
                        (option
                            ("value" "Include")
                            ("selected" "{% if stack.mode == 'Include' -%}true{% else %}false{%- endif %}")
                            (text "Include"))
                        (option
                            ("value" "Exclude")
                            ("selected" "{% if stack.mode == 'Exclude' -%}true{% else %}false{%- endif %}")
                            (text "Exclude"))
                        (option
                            ("value" "BlockList")
                            ("selected" "{% if stack.mode == 'BlockList' -%}true{% else %}false{%- endif %}")
                            (text "Block list"))
                        (option
                            ("value" "Circle")
                            ("selected" "{% if stack.mode == 'Circle' -%}true{% else %}false{%- endif %}")
                            (text "Circle")))))
            (div
                ("class" "card-nest")
                ("ui_ident" "sort")
                (div
                    ("class" "card small")
                    (b
                        (text "Sort")))
                (div
                    ("class" "card")
                    (select
                        ("onchange" "save_sort(event)")
                        (option
                            ("value" "Created")
                            ("selected" "{% if stack.sort == 'Created' -%}true{% else %}false{%- endif %}")
                            (text "Created"))
                        (option
                            ("value" "Likes")
                            ("selected" "{% if stack.sort == 'Likes' -%}true{% else %}false{%- endif %}")
                            (text "Likes")))))
            (div
                ("class" "card-nest")
                ("ui_ident" "change_name")
                (div
                    ("class" "card small")
                    (b
                        (text "{{ text \"stacks:label.change_name\" }}")))
                (form
                    ("class" "card flex flex-col gap-2")
                    ("onsubmit" "change_name(event)")
                    (div
                        ("class" "flex flex-col gap-1")
                        (label
                            ("for" "name")
                            (text "{{ text \"communities:label.name\" }}"))
                        (input
                            ("type" "text")
                            ("name" "name")
                            ("id" "name")
                            ("placeholder" "name")
                            ("required" "")
                            ("minlength" "2")))
                    (button
                        ("class" "primary")
                        (text "{{ icon \"check\" }}")
                        (span
                            (text "{{ text \"general:action.save\" }}"))))))
        (div
            ("class" "card-nest")
            ("ui_ident" "danger_zone")
            (div
                ("class" "card small flex gap-1 items-center red")
                (text "{{ icon \"skull\" }}")
                (b
                    (text "{{ text \"communities:label.danger_zone\" }}")))
            (div
                ("class" "card flex flex-wrap gap-2")
                (button
                    ("class" "red lowered")
                    ("onclick" "delete_stack()")
                    (text "{{ icon \"trash\" }}")
                    (span
                        (text "{{ text \"general:action.delete\" }}"))))))
    (div
        ("class" "card w-full flex flex-col gap-2 hidden")
        ("data-tab" "users")
        (button
            ("onclick" "add_user()")
            (text "{{ icon \"plus\" }}")
            (span
                (text "{{ text \"stacks:label.add_user\" }}")))
        (text "{% for user in users %}")
        (div
            ("class" "card secondary flex flex-wrap gap-2 items-center justify-between")
            (div
                ("class" "flex gap-2")
                (text "{{ components::avatar(username=user.username) }} {{ components::full_username(user=user) }}"))
            (button
                ("class" "lowered small red")
                ("onclick" "remove_user('{{ user.username }}')")
                (text "{{ icon \"x\" }}")
                (span
                    (text "{{ text \"stacks:label.remove\" }}"))))
        (text "{% endfor %}"))
    (div
        ("class" "flex gap-2 flex-wrap")
        (a
            ("href" "/stacks/{{ stack.id }}")
            ("class" "button secondary")
            (text "{{ icon \"arrow-left\" }}")
            (span
                (text "{{ text \"general:action.back\" }}")))))

(script
    (text "globalThis.add_user = async () => {
        await trigger(\"atto::debounce\", [\"stacks::add_user\"]);
        const username = await trigger(\"atto::prompt\", [\"Username:\"]);

        if (!username) {
            return;
        }

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

    globalThis.remove_user = async (username) => {
        await trigger(\"atto::debounce\", [\"stacks::remove_user\"]);
        fetch(`/api/v1/stacks/{{ stack.id }}/users`, {
            method: \"DELETE\",
            headers: {
                \"Content-Type\": \"application/json\",
            },
            body: JSON.stringify({
                username,
            }),
        })
            .then((res) => res.json())
            .then((res) => {
                trigger(\"atto::toast\", [
                    res.ok ? \"success\" : \"error\",
                    res.message,
                ]);
            });
    };

    globalThis.save_privacy = (event, mode) => {
        const selected = event.target.selectedOptions[0];
        fetch(`/api/v1/stacks/{{ stack.id }}/privacy`, {
            method: \"POST\",
            headers: {
                \"Content-Type\": \"application/json\",
            },
            body: JSON.stringify({
                privacy: selected.value,
            }),
        })
            .then((res) => res.json())
            .then((res) => {
                trigger(\"atto::toast\", [
                    res.ok ? \"success\" : \"error\",
                    res.message,
                ]);
            });
    };

    globalThis.save_mode = (event, mode) => {
        const selected = event.target.selectedOptions[0];
        fetch(`/api/v1/stacks/{{ stack.id }}/mode`, {
            method: \"POST\",
            headers: {
                \"Content-Type\": \"application/json\",
            },
            body: JSON.stringify({
                mode: selected.value,
            }),
        })
            .then((res) => res.json())
            .then((res) => {
                trigger(\"atto::toast\", [
                    res.ok ? \"success\" : \"error\",
                    res.message,
                ]);
            });
    };

    globalThis.save_sort = (event, mode) => {
        const selected = event.target.selectedOptions[0];
        fetch(`/api/v1/stacks/{{ stack.id }}/sort`, {
            method: \"POST\",
            headers: {
                \"Content-Type\": \"application/json\",
            },
            body: JSON.stringify({
                sort: selected.value,
            }),
        })
            .then((res) => res.json())
            .then((res) => {
                trigger(\"atto::toast\", [
                    res.ok ? \"success\" : \"error\",
                    res.message,
                ]);
            });
    };

    globalThis.change_name = async (e) => {
        e.preventDefault();

        if (
            !(await trigger(\"atto::confirm\", [
                \"Are you sure you would like to do this?\",
            ]))
        ) {
            return;
        }

        fetch(\"/api/v1/stacks/{{ stack.id }}/name\", {
            method: \"POST\",
            headers: {
                \"Content-Type\": \"application/json\",
            },
            body: JSON.stringify({
                name: e.target.name.value,
            }),
        })
            .then((res) => res.json())
            .then((res) => {
                trigger(\"atto::toast\", [
                    res.ok ? \"success\" : \"error\",
                    res.message,
                ]);
            });
    };

    globalThis.delete_stack = async () => {
        if (
            !(await trigger(\"atto::confirm\", [
                \"Are you sure you would like to do this? This action is permanent.\",
            ]))
        ) {
            return;
        }

        fetch(\"/api/v1/stacks/{{ stack.id }}\", {
            method: \"DELETE\",
        })
            .then((res) => res.json())
            .then((res) => {
                trigger(\"atto::toast\", [
                    res.ok ? \"success\" : \"error\",
                    res.message,
                ]);
            });
    };"))

(text "{% endblock %}")