{% import "macros.html" as macros %} {% extends "root.html" %} {% block head %}
<title>Community settings - {{ config.name }}</title>
{% 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 "settings:tab.general" }}</a
        >

        <a href="#/profile" data-tab-button="profile"
            >{{ text "settings:tab.profile" }}</a
        >
    </div>

    <div class="card tertiary w-full" data-tab="general">
        <div id="manage_fields" class="flex flex-col gap-2">
            <div class="card-nest" ui_ident="read_access">
                <div class="card small">
                    <b>Read access</b>
                </div>

                <div class="card">
                    <select onchange="save_access(event, 'read')">
                        <option value="Everybody">Everybody</option>
                        <option value="Unlisted">Unlisted</option>
                        <option value="Private">Private</option>
                    </select>
                </div>
            </div>

            <div class="card-nest" ui_ident="write_access">
                <div class="card small">
                    <b>Write access</b>
                </div>

                <div class="card">
                    <select onchange="save_access(event, 'write')">
                        <option value="Everybody">Everybody</option>
                        <option value="Joined">Joined</option>
                        <option value="Owner">Owner only</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div
        class="card tertiary w-full hidden flex flex-col gap-2"
        data-tab="profile"
    >
        <div class="card-nest" ui_ident="change_avatar">
            <div class="card small">
                <b>{{ text "settings:label.change_avatar" }}</b>
            </div>

            <form
                class="card flex gap-2 flex-row flex-wrap items-center"
                method="post"
                enctype="multipart/form-data"
                onsubmit="upload_avatar(event)"
            >
                <input
                    id="avatar_file"
                    name="file"
                    type="file"
                    accept="image/png,image/jpeg,image/avif,image/webp"
                    class="w-content"
                />

                <button class="primary">{{ icon "check" }}</button>
            </form>
        </div>

        <div class="card-nest" ui_ident="change_banner">
            <div class="card small">
                <b>{{ text "settings:label.change_banner" }}</b>
            </div>

            <form
                class="card flex gap-2 flex-row flex-wrap items-center"
                method="post"
                enctype="multipart/form-data"
                onsubmit="upload_banner(event)"
            >
                <input
                    id="banner_file"
                    name="file"
                    type="file"
                    accept="image/png,image/jpeg,image/avif,image/webp"
                    class="w-content"
                />

                <button class="primary">{{ icon "check" }}</button>
            </form>
        </div>
    </div>

    <div class="flex gap-2 flex-wrap">
        <button onclick="save_context()">
            {{ icon "check" }}
            <span>{{ text "general:action.save" }}</span>
        </button>

        <a href="/community/{{ community.title }}" class="button secondary">
            {{ icon "arrow-left" }}
            <span>{{ text "general:action.back" }}</span>
        </a>
    </div>
</main>

<script>
    setTimeout(() => {
        const ui = ns("ui");
        const settings = JSON.parse("{{ community_context_serde|safe }}");

        globalThis.upload_avatar = (e) => {
            e.preventDefault();
            e.target.querySelector("button").style.display = "none";

            fetch("/api/v1/communities/{{ community.id }}/upload/avatar", {
                method: "POST",
                body: e.target.file.files[0],
            })
                .then((res) => res.json())
                .then((res) => {
                    trigger("atto::toast", [
                        res.ok ? "success" : "error",
                        res.message,
                    ]);

                    e.target.querySelector("button").removeAttribute("style");
                });

            alert("Avatar upload in progress. Please wait!");
        };

        globalThis.upload_banner = (e) => {
            e.preventDefault();
            e.target.querySelector("button").style.display = "none";

            fetch("/api/v1/communities/{{ community.id }}/upload/banner", {
                method: "POST",
                body: e.target.file.files[0],
            })
                .then((res) => res.json())
                .then((res) => {
                    trigger("atto::toast", [
                        res.ok ? "success" : "error",
                        res.message,
                    ]);

                    e.target.querySelector("button").removeAttribute("style");
                });

            alert("Banner upload in progress. Please wait!");
        };

        globalThis.save_context = () => {
            fetch("/api/v1/communities/{{ community.id }}/context", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({
                    context: settings,
                }),
            })
                .then((res) => res.json())
                .then((res) => {
                    trigger("atto::toast", [
                        res.ok ? "success" : "error",
                        res.message,
                    ]);
                });
        };

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

        ui.refresh_container(document.getElementById("manage_fields"), [
            "read_access",
            "write_access",
            "change_avatar",
            "change_banner",
        ]);

        ui.generate_settings_ui(
            document.getElementById("manage_fields"),
            [
                [
                    ["display_name", "Display title"],
                    "{{ community.context.display_name }}",
                    "input",
                ],
                [
                    ["description", "Description"],
                    "{{ community.context.description }}",
                    "textarea",
                ],
            ],
            settings,
        );
    }, 250);
</script>
{% endblock %}