{% extends "root.html" %} {% block head %}
<title>My communities - {{ config.name }}</title>
{% endblock %} {% block body %} {{ macros::nav(selected="communities") }}
<main class="flex flex-col gap-2">
    {% if user %}
    <div class="card-nest">
        <div class="card small">
            <b>{{ text "communities:label.create_new" }}</b>
        </div>

        <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 "communities:label.name" }}</label>
                <input
                    type="text"
                    name="title"
                    id="title"
                    placeholder="name"
                    required
                    minlength="2"
                    maxlength="32"
                />
            </div>

            <button class="primary">
                {{ text "communities:action.create" }}
            </button>
        </form>
    </div>
    {% 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 "award" }}
                <span>{{ text "communities:label.my_communities" }}</span>
            </div>

            <a href="/communities/search" class="button quaternary small">
                {{ icon "search" }}
                <span>{{ text "communities:label.join_new" }}</span>
            </a>
        </div>

        <div class="card flex flex-col gap-2">
            {% for item in list %} {{
            components::community_listing_card(community=item) }} {% endfor %}
        </div>
    </div>

    <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 "trending-up" }}
                <span>{{ text "communities:label.popular_communities" }}</span>
            </div>

            <a href="/communities/search" class="button quaternary small">
                {{ icon "search" }}
                <span>{{ text "communities:label.search" }}</span>
            </a>
        </div>

        <div class="card flex flex-col gap-2">
            {% for item in popular_list %} {{
            components::community_listing_card(community=item) }} {% endfor %}
        </div>
    </div>
</main>

<script>
    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) {
                    setTimeout(() => {
                        window.location.href = `/community/${res.payload}`;
                    }, 100);
                }
            });
    }
</script>
{% endblock %}