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

(text "{% endblock %} {% block body %} {{ macros::nav() }}")
(main
    ("class" "flex flex-col gap-2")
    (text "{{ macros::timelines_nav(selected=\"stacks\") }}")
    (div
        ("class" "card-nest w-full")
        (div
            ("class" "card small flex items-center justify-between gap-2")
            (div
                ("class" "flex items-center gap-2")
                (a
                    ("href" "/api/v1/auth/user/find/{{ stack.owner }}")
                    (text "{{ components::avatar(username=stack.owner, selector_type=\"id\") }}"))
                (span
                    (text "{{ stack.name }}")))
            (div
                ("class" "flex gap-2")
                (text "{% if stack.mode == 'Circle' -%}")
                ; post button for circle stacks
                (a
                    ("href" "/communities/intents/post?stack={{ stack.id }}")
                    ("class" "button lowered small")
                    (text "{{ icon \"plus\" }}")
                    (span
                        (text "{{ text \"general:action.post\" }}")))
                (text "{%- endif %}")

                (text "{% if user and user.id == stack.owner -%}")
                ; manage button for stack owner only
                (a
                    ("href" "/stacks/{{ stack.id }}/manage")
                    ("class" "button lowered small")
                    (text "{{ icon \"pencil\" }}")
                    (span
                        (text "{{ text \"general:action.manage\" }}")))
                (text "{%- endif %}")))
        (div
            ("class" "card w-full flex flex-col gap-2")
            (text "{% if stack.users|length == 0 -%}")
            (p
                (text "No users included yet! Maybe ")
                (a
                    ("href" "/stacks/{{ stack.id }}/manage#/users")
                    (text "add a user to this stack"))
                (text "!"))
            (text "{%- endif %}")

            (text "{% if stack.mode == 'BlockList' -%}")
            ; block button + user list for blocklist only
            (text "{% if not is_blocked -%}")
            (button
                ("onclick" "block_all()")
                (str (text "stacks:label.block_all")))
            (text "{% else %}")
            (button
                ("onclick" "block_all(false)")
                (str (text "stacks:label.unblock_all")))
            (text "{%- endif %}")
            (div
                ("class" "flex gap-2 flex-wrap w-full")
                (text "{% for user in list %} {{ components::user_plate(user=user, secondary=true) }} {% endfor %}"))
            (text "{{ components::pagination(page=page, items=list|length) }}")
            (text "{% else %}")
            ; user icons for circle stack
            (text "{% if stack.mode == 'Circle' -%}")
            (div
                ("class" "flex w-full gap-2 flex-wrap")
                (text "{% for user in stack.users %}")
                (a
                    ("href" "/api/v1/auth/user/find/{{ user }}")
                    ("class" "flush")
                    (text "{{ components::avatar(username=user, selector_type=\"id\", size=\"24px\") }}"))
                (text "{% endfor %}"))
            (text "{%- endif %}")

            ; posts for all stacks except blocklist
            (div
                ("class" "w-full flex flex-col gap-2")
                ("ui_ident" "io_data_load")
                (div ("ui_ident" "io_data_marker")))

            (script
                (text "setTimeout(() => {
                    trigger(\"ui::io_data_load\", [\"/_swiss_army_timeline?stack_id={{ stack.id }}&page=\", Number.parseInt(\"{{ page }}\") - 1]);
                });"))
            (text "{%- endif %}"))))

(script
    (text "async function block_all(block = true) {
        if (
            !(await trigger(\"atto::confirm\", [
                \"Are you sure you would like to do this?\",
            ]))
        ) {
            return;
        }

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

                if (res.ok) {
                    window.location.href = \"/settings#/account/blocks\";
                }
            });
    }"))
(text "{% endblock %}")