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

(text "{% endblock %} {% block body %} {{ macros::nav(selected=\"communities\") }}")
(main
    ("class" "flex flex-col gap-2")
    (text "{% if user -%}")
    (div
        ("class" "card-nest")
        (div
            ("class" "card small")
            (b
                (text "{{ text \"communities:label.create_new\" }}")))
        (form
            ("class" "card flex flex-col gap-2")
            ("onsubmit" "create_community_from_form(event)")
            (div
                ("class" "flex flex-col gap-1")
                (label
                    ("for" "title")
                    (text "{{ text \"communities:label.name\" }}"))
                (input
                    ("type" "text")
                    ("name" "title")
                    ("id" "title")
                    ("placeholder" "name")
                    ("required" "")
                    ("minlength" "2")
                    ("maxlength" "32")))
            (button
                (text "{{ text \"communities:action.create\" }}"))))
    (text "{% if list|length >= 4 -%} {{ components::supporter_ad(body=\"Become a supporter to create up to 10 communities!\") }} {%- endif %} {%- endif %}")
    (div
        ("class" "card-nest w-full")
        (div
            ("class" "card small flex items-center justify-between gap-2")
            (div
                ("class" "flex items-center gap-2")
                (text "{{ icon \"award\" }}")
                (span
                    (text "{{ text \"communities:label.my_communities\" }}")))

            (div
                ("class" "flex items-center gap-2")
                (a
                    ("href" "/forges")
                    ("class" "button lowered small")
                    (text "{{ icon \"anvil\" }}")
                    (span
                        ("class" "desktop")
                        (text "{{ text \"forge:label.my_forges\" }}")))
                (a
                    ("href" "/communities/search")
                    ("class" "button lowered small")
                    (text "{{ icon \"search\" }}")
                    (span
                        ("class" "desktop")
                        (text "{{ text \"communities:label.join_new\" }}")))))
        (div
            ("class" "card flex flex-col gap-2")
            (text "{% for item in list %} {{ components::community_listing_card(community=item) }} {% endfor %}")))
    (div
        ("class" "card-nest w-full")
        (div
            ("class" "card small flex items-center gap-2")
            (text "{{ icon \"trending-up\" }}")
            (span
                (text "{{ text \"communities:label.popular_communities\" }}")))
        (div
            ("class" "card flex flex-col gap-2")
            (text "{% for item in popular_list %} {{ components::community_listing_card(community=item) }} {% endfor %}"))))

(script
    (text "async function create_community_from_form(e) {
        e.preventDefault();
        await trigger(\"atto::debounce\", [\"communities::create\"]);

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

                if (res.ok) {
                    e.target.reset();
                    setTimeout(() => {
                        window.location.href = `/community/${res.payload}`;
                    }, 100);
                }
            });
    }"))

(text "{% endblock %}")