{% if not embedded %}{% extends 'base/base.html' %}{% endif %}
{% import 'input/field.html' as field with context%}
{% import 'input/textbox.html' as textbox with context %}
{% import 'input/navigation.html' as navigation with context %}
{% import 'components/avatar.html' as avatar with context %}

{% block body %}

    {% if not topics %}
        <div class="message">
            <div class="message-body">
                {% trans %}There is not message yet in this forum.{% endtrans %}
                {% if profile %}
                    {% trans %}You can start a topic of interest by filling this form.{% endtrans %}
                {% else %}
                    {% trans %}You can login to create a new topic.{% endtrans %}
                {% endif %}
            </div>
        </div>
    {% endif %}

    <section class="section">
        <div class="has-background-white has-padding-1">
            {% for topic in topics %}
                <div class="media has-items-vcentered">
                    <div class="media-left">
                        {{ avatar.avatar(topic.author) }}
                    </div>
                    <div class="media-content">
                        <p class="is-size-5-desktop is-size-6-touch x-is-hoverable">
                        <a href="{{topic.http_uri}}">
                            {{topic.title}}
                        </a>
                        </p>
                    </div>
                </div>
            {% endfor %}
        </div>
    </section>
    {% if profile %}
        <section class="section">
            {% call textbox.textbox(service, node, placeholder=_("Your message"), submit_label=_("Create topic"), type="new_topic") %}
            {{ field.text("title", placeholder=_("Your topic"), required=True) }}
            {% endcall %}
        </section>
    {% endif %}

    {{ navigation.prev_next(_("older topics"), _("newer topics")) }}
{% endblock body %}