{% 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_topics' %}

{% block app_content %}
{% if len(topics) > 0 %}
    {% macro render_topic(topic, depth) %}
        <tr>
            <td nowrap="nowrap">{{ '--' * depth }}
                {% if depth == 0 %}<strong>{% endif %}
                    <a href="/topic/{{ topic['topic'].path() }}">{{ topic['topic'].name }}</a>
                {% if depth == 0 %}</strong>{% endif %}
            </td>
        </tr>
        {% if topic['children'] %}
            {% for topic in topic['children'] %}
                {{ render_topic(topic, depth + 1)|safe }}
            {% endfor %}
        {% endif %}
    {% endmacro %}
    <h1>{{ _('Choose a topic') }}</h1>
    <div class="table-responsive-md mt-4">
        <table class="communities_table table table-striped table-hover w-100">
            <tbody>
                {% for topic in topics %}
                    {{ render_topic(topic, 0)|safe }}
                {% endfor %}
            </tbody>
        </table>
    </div>
{% else %}
<p>{{ _('There are no communities yet.') }}</p>
{% endif %}
<p><a href="/communities" class="btn btn-primary">{{ _('Explore communities') }}</a></p>
{% endblock %}