{% extends "base.html" %}
{% from 'bootstrap5/form.html' import render_form %}

{% block app_content %}
<div class="row g-2 justify-content-between mt-2">
    <div class="col-auto">
        <div class="btn-group">
            <a href="/communities" class="btn {{ 'btn-primary' if request.path == '/communities' else 'btn-outline-secondary' }}">
                {{ _('All') }}
            </a>
            <a href="/communities/local" class="btn {{ 'btn-primary' if request.path == '/communities/local' else 'btn-outline-secondary' }}">
                {{ _('Local') }}
            </a>
            <a href="/communities/subscribed" class="btn {{ 'btn-primary' if request.path == '/communities/subscribed' else 'btn-outline-secondary' }}">
                {{ _('Joined') }}
            </a>
            {% if topics %}
                <span class="mt-1 pl-4">
                    <form method="get">Topic:
                        <select name="topic_id" class="form-control-sm submit_on_change">
                            <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>
                </span>
            {% endif %}
        </div>

    </div>
    <div class="col-auto">
        <div class="btn-group">
            <a href="{{ url_for('community.add_local') }}" class="btn btn-outline-secondary">{{ _('Create local') }}</a>
            <a href="{{ url_for('community.add_remote') }}" class="btn btn-outline-secondary">{{ _('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">
            <thead>
                <tr>
                    <th scope="col"> </th>
                    <th scope="col" colspan="2">{{ _('Community') }}</th>
                    <th scope="col">{{ _('Posts') }}</th>
                    <th scope="col">{{ _('Comments') }}</th>
                    <th scope="col">{{ _('Active') }}</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_OWNER] %}
                                    <a class="btn btn-primary btn-sm" href="/community/{{ community.link() }}/unsubscribe">{{ _('Leave') }}</a>
                                {% elif community_membership(current_user, community) == SUBSCRIPTION_PENDING %}
                                    <a class="btn btn-outline-secondary btn-sm" href="/community/{{ community.link() }}/unsubscribe">{{ _('Pending') }}</a>
                                {% else %}
                                    <a class="btn btn-primary btn-sm" href="/community/{{ community.link() }}/subscribe">{{ _('Join') }}</a>
                                {% endif %}
                            {% else %}
                                <a class="btn btn-primary btn-sm" href="/community/{{ community.link() }}/subscribe">{{ _('Join') }}</a>
                            {% endif %}</td>
                        <td width="46"><a href="/c/{{ community.link() }}"><img src="{{ community.icon_image('tiny') }}" class="community_icon rounded-circle" loading="lazy" /></a></td>
                        <td scope="row" class="pl-0"><a href="/c/{{ community.link() }}">{{ community.display_name() }}</a></td>
                        <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 %}