{% import 'components/avatar.html' as avatar with context %}

<ul>
    {% for contact_jid, contact_data in roster.items() %}

        {%- set name = identities[contact_jid].nicknames[0] | default(contact_jid) -%}
        <li class="pl-2 py-1">
            <a {{ {'href': base_url + '/' + contact_jid}|xmlattr}} class="has-text-white">
                <div class="is-flex is-align-items-center my-1">
                    <div class="mr-2">
                        {{ avatar.avatar(contact_jid) }}
                    </div>
                    <div class="is-flex-grow-1">
                        <p class="mb-0">{{name}}</p>
                    </div>
                </div>
            </a>
        </li>
    {% endfor %}
</ul>