{% 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>
            {% if current_user.is_authenticated -%}
            <a href="/communities/subscribed" aria-label="{{ _('Joined communities') }}" class="btn {{ 'btn-primary' if request.path == '/communities/subscribed' else 'btn-outline-secondary' }}">
                {{ _('Joined') }}
            </a>
            <a href="/communities/notsubscribed" aria-label="{{ _('Not Joined communities') }}" class="btn {{ 'btn-primary' if request.path == '/communities/notsubscribed' else 'btn-outline-secondary' }}">
                {{ _('Not Joined') }}
            </a>
            {% endif -%}
        </div>
    </div>
    <div class="col-auto">
      <form 
        id="searchCommunities"
        method="get"
      >
          {% if topics -%}
              <div 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>
              </div>
          {% endif -%}
          {% if languages -%}
              <div 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>
              </div>
          {% endif -%}
          <div style="display:inline;">
              <input type="search"
                     name="search"
                     placeholder="{{ _('Search') }}"
                     value="{{ search }}">
          </div>
      </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 community') }}</a>
            <a href="{{ url_for('community.add_remote') }}" class="btn btn-outline-secondary" aria-label="{{ _('Add community from another instance') }}">{{ _('Add remote community') }}</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">
                        <button 
                            form="searchCommunities"
                            hx-boost="true"
                            name="sort_by"
                            value="title{{ ' asc' if sort_by == 'title desc' else ' desc' }}" 
                            title="{{ _('Sort by name') }}"
                            class="btn"
                        >
                            {{ _('Community') }}
                            <span class="{{ 'fe fe-chevron-up' if sort_by == 'title asc' }}{{ 'fe fe-chevron-down' if sort_by == 'title desc' }}"></span>
                        </button>
                    </th>
                    <th scope="col">
                        <button 
                            form="searchCommunities"
                            hx-boost="true"
                            name="sort_by"
                            value="post_count{{ ' asc' if sort_by == 'post_count desc' else ' desc' }}" 
                            title="{{ _('Sort by post count') }}"
                            class="btn"
                        >
                            {{ _('Posts') }}
                            <span class="{{ 'fe fe-chevron-up' if sort_by == 'post_count asc' }}{{ 'fe fe-chevron-down' if sort_by == 'post_count desc' }}"></span>
                        </button>
                    </th>
                    <th scope="col">
                        <button 
                            form="searchCommunities"
                            hx-boost="true"
                            name="sort_by"
                            value="post_reply_count{{ ' asc' if sort_by == 'post_reply_count desc' else ' desc' }}" 
                            title="{{ _('Comments') }}"
                            class="btn"
                        >
                            {{ _('Comments') }}
                            <span class="{{ 'fe fe-chevron-up' if sort_by == 'post_reply_count asc' }}{{ 'fe fe-chevron-down' if sort_by == 'post_reply_count desc' }}"></span>
                        </button>
                    </th>
                    <th scope="col">
                        <button 
                            form="searchCommunities"
                            hx-boost="true"
                            name="sort_by"
                            value="last_active{{ ' asc' if sort_by == 'last_active desc' else ' desc' }}" 
                            title="{{ _('Sort by recent activity') }}"
                            class="btn"
                        >
                            {{ _('Active') }}
                            <span class="{{ 'fe fe-chevron-up' if sort_by == 'last_active asc' }}{{ 'fe fe-chevron-down' if sort_by == 'last_active desc' }}"></span>
                        </button>
                    </th>
                </tr>
            </thead>
            <tbody>
                {% for community in communities.items -%}
                    {% set content_blocked = (current_user.hide_nsfw == 3 and community.nsfw)
                                        or (current_user.hide_nsfl == 3 and community.nsfl) -%}
                    {% set blur_content = (current_user.hide_nsfw == 2 and community.nsfw)
                                        or (current_user.hide_nsfl == 2 and community.nsfl) -%}
                    <tr class="{{ 'blocked' if content_blocked }}{{ 'blur' if blur_content }}">
                        <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>{{ arrow.get(community.last_active).humanize(locale=locale) }}</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 -%}