{% import "macros.html" as macros %} {% extends "root.html" %} {% block head %} <title>{{ community.context.display_name }} - {{ config.name }}</title> {% endblock %} {% block body %} {{ macros::nav() }} <article> <div class="content_container"> <div class="w-full flex gap-4 flex-collapse"> <div class="lhs flex flex-col gap-2 sm:w-full" style="min-width: 20rem" > <div class="card-nest w-full"> <div class="card flex gap-2" id="community_avatar_and_name"> {{ components::community_avatar(id=community.id,size="72px") }} <div class="flex flex-col"> <!-- prettier-ignore --> <h3 id="title" class="title"> {% if community.context.display_name %} {{ community.context.display_name }} {% else %} {{ community.username }} {% endif %} </h3> <span class="fade">{{ community.title }}</span> </div> </div> {% if user %} <div class="card flex" id="join_or_leave"> {% if not is_owner %} {% if not is_member %} <button class="primary"> {{ icon "circle-plus" }} <span>{{ text "communities:action.join" }}</span> </button> {% else %} <button class="camo red"> {{ icon "circle-minus" }} <span>{{ text "communities:action.leave" }}</span> </button> {% endif %} {% else %} <button href="/community/{{ community.title }}" class="button primary" onclick="document.getElementById('manage').showModal()" > {{ icon "settings" }} <span >{{ text "communities:action.configure" }}</span > </button> <dialog id="manage"> <div class="inner"> <div id="manage_fields" class="flex flex-col gap-2" > <div class="card-nest"> <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"> <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> <hr class="margin" /> <button onclick="document.getElementById('manage').close(); save_context()" > {{ icon "check" }} <span >{{ text "dialog:action.save_and_close" }}</span > </button> </div> </dialog> <script> setTimeout(() => { const ui = ns("ui"); const settings = JSON.parse( "{{ community_context_serde|safe }}", ); ui.generate_settings_ui( document.getElementById("manage_fields"), [ [ ["display_name", "Display title"], "{{ community.context.display_name }}", "input", ], [ ["description", "Description"], "{{ community.context.description }}", "textarea", ], ], settings, ); window.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, ]); }); }; window.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, ]); }); }; }, 250); </script> {% endif %} </div> {% endif %} </div> <div class="card-nest flex flex-col"> <div id="bio" class="card small"> {{ community.context.description|markdown|safe }} </div> <div class="card flex flex-col gap-2"> <div class="w-full flex justify-between items-center"> <span class="notification chip">ID</span> <button title="Copy" onclick="trigger('atto::copy_text', [{{ community.id }}])" class="camo small" > {{ icon "copy" }} </button> </div> <div class="w-full flex justify-between items-center"> <span class="notification chip">Created</span> <span class="date">{{ community.created }}</span> </div> <div class="w-full flex justify-between items-center"> <span class="notification chip">Score</span> <div class="flex gap-2"> <b >{{ community.likes - community.dislikes }}</b > {% if user %} <div class="flex gap-1 reactions_box" hook="check_reactions" hook-arg:id="{{ community.id }}" > {{ components::likes(id=community.id, asset_type="Community", likes=community.likes, dislikes=community.dislikes) }} </div> {% endif %} </div> </div> </div> </div> </div> <div class="rhs w-full">{% block content %}{% endblock %}</div> </div> </div> </article> {% endblock %}