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

(text "{% endblock %} {% block body %} {{ macros::nav() }}")
(main
    ("class" "flex flex-col gap-2")
    (text "{% if user -%}")
    (div
        ("class" "pillmenu")
        (a ("href" "/services") (str (text "littleweb:label.services")))
        (a ("href" "/domains") ("class" "active") (str (text "littleweb:label.domains"))))

    (div
        ("class" "card-nest")
        (div
            ("class" "card small")
            (b
                (str (text "littleweb:label.create_new_domain"))))
        (form
            ("class" "card flex flex-col gap-2")
            ("onsubmit" "create_domain_from_form(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")
                    ("maxlength" "32")))
            (div
                ("class" "flex flex-col gap-1")
                (label
                    ("for" "tld")
                    (str (text "littleweb:label.tld")))
                (select
                    ("type" "text")
                    ("name" "tld")
                    ("id" "tld")
                    ("placeholder" "tld")
                    ("required" "")
                    (text "{% for tld in tlds -%}")
                    (option ("value" "{{ tld }}") (text ".{{ tld|lower }}"))
                    (text "{%- endfor %}")))
            (button
                ("class" "primary")
                (text "{{ text \"communities:action.create\" }}"))

            (details
                (summary
                    (icon (text "circle-alert"))
                    (text "Disclaimer"))

                (div
                    ("class" "card lowered no_p_margin")
                    (p (text "Domains are registered into {{ config.name }}'s closed web."))
                    (p (text "This means that domains are only accessible through {{ config.name }}, as well as other supporting sites."))
                    (p (text "If you would prefer a public-facing domain, those cost money and cannot be bought from {{ config.name }}."))
                    (p (text "All domains have first-class support on {{ config.name }}, meaning all links to them will work properly on this site."))))))
    (text "{%- 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")
                (icon (text "panel-top"))
                (span
                    (str (text "littleweb:label.my_domains")))))
        (div
            ("class" "card flex flex-col gap-2")
            (text "{% for item in list %}")
            (a
                ("href" "/domains/{{ item.id }}")
                ("class" "card secondary flex flex-col gap-2")
                (div
                    ("class" "flex items-center gap-2")
                    (icon (text "globe"))
                    (b
                        (text "{{ item.name }}.{{ item.tld|lower }}")))
                (span
                    (text "Created ")
                    (span
                        ("class" "date")
                        (text "{{ item.created }}"))
                    (text "; {{ item.data|length }} entries")))
            (text "{% endfor %}"))))

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

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

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

(text "{% endblock %}")