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

{% block body %}

<section class="section">
    {% call form.form(class="form--single") %}
        {{ field.search("search", _("Search rooms and people…"), required=true)}}
    {% endcall %}
</section>

<section class="section">
    <div id="chat_items" class="columns is-mobile is-multiline">
        {% for room in rooms %}
            <div class="column is-2-desktop is-4-touch">
                <div class="card x-is-hoverable">
                    <a href="{{room.url}}">
                        <div class="card-image is-flex has-items-centered px-1 py-1">
                            {{ avatar.avatar(room.jid, "is-64x64") }}
                        </div>
                        <div class="card-content has-text-centered has-text-shortenable px-1 py-1">
                            <span>{{room.name}}</span>
                        </div>
                    </a>
                </div>
            </div>
        {% endfor %}
    </div>
</section>

{% endblock body %}