{% extends "default.html" %}

{% block title %}
    {% trans query=query %}User listing: {{ query }}{% endtrans %}
{% endblock %}
{% block content %}
    <x-vbox>
        <x-frame style="--width: 896px;" class="flexible-space">
            <ul style="list-style: none;" class="noindent">
                {% for result in results %}
                    <li>
                        <article class="card" style="flex: 0 1 auto;">
                            <section class="card-main">
                                <a href="{{ result.username }}"><h3>{{ result.username }}</h3></a>
                                {% if result.bio %}
                                    <p>{{ result.bio }}</p>
                                {% endif %}
                            </section>
                        </article>
                    </li>
                {% endfor %}
            </ul>
            {% include "pagination.html" %}
        </x-frame>
    </x-vbox>
{% endblock %}