{% extends "root.html" %} {% block head %}
<title>Stack 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">
            {{ icon "settings" }}
            <span>{{ text "stacks:tab.general" }}</span>
        </a>

        <a href="#/users" data-tab-button="users">
            {{ icon "users" }}
            <span>{{ text "stacks:tab.users" }}</span>
        </a>
    </div>

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

                <div class="card">
                    <select onchange="save_privacy(event)">
                        <option
                            value="Private"
                            selected="{% if stack.privacy == 'Private' %}true{% else %}false{% endif %}"
                        >
                            Private
                        </option>
                        <option
                            value="Public"
                            selected="{% if stack.privacy == 'Public' %}true{% else %}false{% endif %}"
                        >
                            Public
                        </option>
                    </select>
                </div>
            </div>

            <div class="card-nest" ui_ident="mode">
                <div class="card small">
                    <b>Mode</b>
                </div>

                <div class="card">
                    <select onchange="save_mode(event)">
                        <option
                            value="Include"
                            selected="{% if stack.mode == 'Include' %}true{% else %}false{% endif %}"
                        >
                            Include
                        </option>
                        <option
                            value="Exclude"
                            selected="{% if stack.mode == 'Exclude' %}true{% else %}false{% endif %}"
                        >
                            Exclude
                        </option>
                    </select>
                </div>
            </div>

            <div class="card-nest" ui_ident="sort">
                <div class="card small">
                    <b>Sort</b>
                </div>

                <div class="card">
                    <select onchange="save_sort(event)">
                        <option
                            value="Created"
                            selected="{% if stack.sort == 'Created' %}true{% else %}false{% endif %}"
                        >
                            Created
                        </option>
                        <option
                            value="Likes"
                            selected="{% if stack.sort == 'Likes' %}true{% else %}false{% endif %}"
                        >
                            Likes
                        </option>
                    </select>
                </div>
            </div>

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

                <form
                    class="card flex flex-col gap-2"
                    onsubmit="change_name(event)"
                >
                    <div class="flex flex-col gap-1">
                        <label for="new_title"
                            >{{ text "communities:label.name" }}</label
                        >
                        <input
                            type="text"
                            name="name"
                            id="name"
                            placeholder="name"
                            required
                            minlength="2"
                        />
                    </div>

                    <button class="primary">
                        {{ icon "check" }}
                        <span>{{ text "general:action.save" }}</span>
                    </button>
                </form>
            </div>
        </div>

        <div class="card-nest" ui_ident="danger_zone">
            <div class="card small flex gap-1 items-center red">
                {{ icon "skull" }}
                <b> {{ text "communities:label.danger_zone" }} </b>
            </div>

            <div class="card flex flex-wrap gap-2">
                <button class="red quaternary" onclick="delete_stack()">
                    {{ icon "trash" }}
                    <span>{{ text "general:action.delete" }}</span>
                </button>
            </div>
        </div>
    </div>

    <div class="card w-full flex flex-col gap-2 hidden" data-tab="users">
        <button onclick="add_user()">
            {{ icon "plus" }}
            <span>{{ text "stacks:label.add_user" }}</span>
        </button>

        {% for user in users %}
        <div
            class="card secondary flex flex-wrap gap-2 items-center justify-between"
        >
            <div class="flex gap-2">
                {{ components::avatar(username=user.username) }} {{
                components::full_username(user=user) }}
            </div>

            <button
                class="quaternary small red"
                onclick="remove_user('{{ user.username }}')"
            >
                {{ icon "x" }}
                <span>{{ text "stacks:label.remove" }}</span>
            </button>
        </div>
        {% endfor %}
    </div>

    <div class="flex gap-2 flex-wrap">
        <a href="/stacks/{{ stack.id }}" class="button secondary">
            {{ icon "arrow-left" }}
            <span>{{ text "general:action.back" }}</span>
        </a>
    </div>
</main>

<script>
    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,
                ]);
            });
    };
</script>
{% endblock %}