{% 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 -%}
        {% if languages -%}
                <form method="get" style="display:inline;">Language:
                    <select name="language_id" class="form-control-sm submit_on_change" aria-label="{{ _('Choose a language to filter communities by') }}">
                        <option value="0">All</option>
                        {% for language in languages -%}
                            <option value="{{ language.id }}" {{ 'selected' if language.id == language_id }}>{{ language.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 communities -%}
    <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 == 'title' }}" title="{{ _('Sort by name') }}" rel="nofollow">{{ _('Community') }}
                            <span class="{{ 'fe fe-chevron-up' if sort_by == 'community.title' }}{{ 'fe fe-chevron-down' if sort_by == 'community.title desc' }}"></span>
                        </a>
                    </th>
                    <th scope="col">
                        <a href="?sort_by=post_count{{ ' asc' if sort_by == 'post_count desc' else ' desc' }}" title="{{ _('Sort by post count') }}" rel="nofollow">{{ _('Posts') }}
                            <span class="{{ 'fe fe-chevron-up' if sort_by == 'post_count' }}{{ 'fe fe-chevron-down' if sort_by == 'community.post_count desc' }}"></span>
                        </a>
                    </th>
                    <th scope="col">
                        <a href="?sort_by=post_reply_count{{ ' asc' if sort_by == 'post_reply_count desc' else ' desc' }}" title="{{ _('Sort by reply count') }}" rel="nofollow">{{ _('Comments') }}
                            <span class="{{ 'fe fe-chevron-up' if sort_by == 'post_reply_count' }}{{ 'fe fe-chevron-down' if sort_by == 'community.post_reply_count desc' }}"></span>
                        </a>
                    </th>
                    <th scope="col">
                        <a href="?sort_by=last_active{{ ' asc' if sort_by == 'last_active desc' else ' desc' }}" title="{{ _('Sort by recent activity') }}" rel="nofollow">{{ _('Active') }}
                            <span class="{{ 'fe fe-chevron-up' if sort_by == 'last_active' }}{{ 'fe fe-chevron-down' if sort_by == 'community.last_active desc' }}"></span>
                        </a>
                    </th>
                </tr>
            </thead>
            <tbody>
                {% for community in communities.items -%}
                    <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>
    <nav aria-label="Pagination" class="mt-4" role="navigation">
            {% if prev_url -%}
                <a href="{{ prev_url }}" class="btn btn-primary" rel='nofollow'>
                    <span aria-hidden="true">&larr;</span> {{ _('Previous page') }}
                </a>
            {% endif -%}
            {% if next_url -%}
                <a href="{{ next_url }}" class="btn btn-primary" rel='nofollow'>
                    {{ _('Next page') }} <span aria-hidden="true">&rarr;</span>
                </a>
            {% endif -%}
    </nav>
{% else -%}
<p>{{ _('There are no communities yet.') }}</p>
{% endif -%}
<p class="mt-4"><a href="/topics" class="btn btn-primary">{{ _('Browse topics') }}</a></p>
{% endblock -%}