{% if theme() and file_exists('app/templates/themes/' + theme() + '/base.html') %}
    {% extends 'themes/' + theme() + '/base.html' %}
{% else %}
    {% extends "base.html" %}
{% endif %} %}
{% from 'bootstrap5/form.html' import render_form %}
{% set active_child = 'list_communities' %}

{% block app_content %}
<div class="row g-2 justify-content-between mt-2">
    <div class="col-auto">
        <div class="btn-group">
            <a href="/communities" aria-label="{{ _('All communities') }}" class="btn {{ 'btn-primary' if request.path == '/communities' else 'btn-outline-secondary' }}">
                {{ _('All') }}
            </a>
            <a href="/communities/local" aria-label="{{ _('Communities on this server') }}" class="btn {{ 'btn-primary' if request.path == '/communities/local' else 'btn-outline-secondary' }}">
                {{ _('Local') }}
            </a>
            <a href="/communities/subscribed" aria-label="{{ _('Joined communities') }}" class="btn {{ 'btn-primary' if request.path == '/communities/subscribed' else 'btn-outline-secondary' }}">
                {{ _('Joined') }}
            </a>

        </div>
    </div>
    <div class="col-auto">
        {% if topics %}
                <form method="get" style="display:inline;">Topic:
                    <select name="topic_id" class="form-control-sm submit_on_change" aria-label="{{ _('Choose a topic to filter communities by') }}">
                        <option value="0">All</option>
                        {% for topic in topics %}
                            <option value="{{ topic.id }}" {{ 'selected' if topic.id == topic_id }}>{{ topic.name }}</option>
                        {% endfor %}
                    </select>
                </form>
        {% endif %}
        <form method="get" style="display:inline;"><input type="search" name="search" placeholder="{{ _('Search') }}" value="{{ search }}"></form>
    </div>
    <div class="col-auto">
        <div class="btn-group">
            <a href="{{ url_for('community.add_local') }}" class="btn btn-outline-secondary" aria-label="{{ _('Create local community') }}">{{ _('Create local') }}</a>
            <a href="{{ url_for('community.add_remote') }}" class="btn btn-outline-secondary" aria-label="{{ _('Add community from another instance') }}">{{ _('Add remote') }}</a>
        </div>
        <!-- <form method="get" action="/communities">
            <input name='search' type="search" placeholder="Find a community" class="form-control" value="{{ search }}" />
        </form> -->
    </div>
</div>
{% if len(communities) > 0 %}
    <div class="table-responsive-md mt-4">
        <table class="communities_table table table-striped table-hover w-100">
            <caption class="visually-hidden">{{ _('Communities') }}</caption>
            <thead>
                <tr>
                    <th> </th>
                    <th {% if not low_bandwidth %}colspan="2"{% endif %} scope="col">
                        <a href="?sort_by=title{{ ' desc' if sort_by.text == 'community.title' }}" title="{{ _('Sort by name') }}" rel="nofollow">{{ _('Community') }}
                            <span class="{{ 'fe fe-chevron-up' if sort_by.text == 'community.title' }}{{ 'fe fe-chevron-down' if sort_by.text == 'community.title desc' }}"></span>
                        </a>
                    </th>
                    <th scope="col">
                        <a href="?sort_by=post_count{{ ' desc' if sort_by.text == 'community.post_count' }}" title="{{ _('Sort by post count') }}" rel="nofollow">{{ _('Posts') }}
                            <span class="{{ 'fe fe-chevron-up' if sort_by.text == 'community.post_count' }}{{ 'fe fe-chevron-down' if sort_by.text == 'community.post_count desc' }}"></span>
                        </a>
                    </th>
                    <th scope="col">
                        <a href="?sort_by=post_reply_count{{ ' desc' if sort_by.text == 'community.post_reply_count' }}" title="{{ _('Sort by reply count') }}" rel="nofollow">{{ _('Comments') }}
                            <span class="{{ 'fe fe-chevron-up' if sort_by.text == 'community.post_reply_count' }}{{ 'fe fe-chevron-down' if sort_by.text == 'community.post_reply_count desc' }}"></span>
                        </a>
                    </th>
                    <th scope="col">
                        <a href="?sort_by=last_active{{ ' desc' if sort_by.text == 'community.last_active' }}" title="{{ _('Sort by recent activity') }}" rel="nofollow">{{ _('Active') }}
                            <span class="{{ 'fe fe-chevron-up' if sort_by.text == 'community.last_active' }}{{ 'fe fe-chevron-down' if sort_by.text == 'community.last_active desc' }}"></span>
                        </a>
                    </th>
                </tr>
            </thead>
            <tbody>
                {% for community in communities %}
                    <tr class="">
                        <td width="70">{% if current_user.is_authenticated %}
                                {% if community_membership(current_user, community) in [SUBSCRIPTION_MEMBER, SUBSCRIPTION_MODERATOR, SUBSCRIPTION_OWNER] %}
                                    <a class="btn btn-primary btn-sm" href="/community/{{ community.link() }}/unsubscribe" rel="nofollow" aria-label="{{ _('Leave %(name)s', name=community.display_name()) }}">{{ _('Leave') }}</a>
                                {% elif community_membership(current_user, community) == SUBSCRIPTION_PENDING %}
                                    <a class="btn btn-outline-secondary btn-sm" href="/community/{{ community.link() }}/unsubscribe" rel="nofollow">{{ _('Pending') }}</a>
                                {% else %}
                                    <a class="btn btn-primary btn-sm" href="/community/{{ community.link() }}/subscribe" rel="nofollow" aria-label="{{ _('Join %(name)s', name=community.display_name()) }}">{{ _('Join') }}</a>
                                {% endif %}
                            {% else %}
                                <a class="btn btn-primary btn-sm" href="/community/{{ community.link() }}/subscribe" rel="nofollow" aria-label="{{ _('Join %(name)s', name=community.display_name()) }}">{{ _('Join') }}</a>
                            {% endif %}</td>
                        {% if not low_bandwidth %}
                            <td width="46">
                                    <a href="/c/{{ community.link() }}"><img src="{{ community.icon_image('tiny') }}" class="community_icon rounded-circle" loading="lazy" alt="" /></a>
                            </td>
                        {% endif %}
                        <th scope="row" class="pl-0"><a href="/c/{{ community.link() }}" aria-label="{{ _('Browse %(name)s', name=community.display_name()) }}">{{ community.display_name() }}</a></th>
                        <td>{{ community.post_count }}</td>
                        <td>{{ community.post_reply_count }}</td>
                        <td>{{ moment(community.last_active).fromNow(refresh=True) }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
{% else %}
<p>{{ _('There are no communities yet.') }}</p>
{% endif %}
{% endblock %}