{% load i18n %}
{% load utilities %}
{% load humanize %}

{% if suggested_users %}
    <h2 class="title is-5">
        {% trans "Add new members!" %}
    </h2>
    <div class="column is-flex is-flex-grow-0">
        {% for user in suggested_users %}
        <div class="box has-text-centered is-shadowless has-background-tertiary m-2">
            <a href="{{ user.local_path }}" class="has-text-black">
                {% include 'snippets/avatar.html' with user=user large=True %}
                <span title="{{ user.display_name }}" class="is-block is-6 has-text-weight-bold">{{ user.display_name|truncatechars:10 }}</span>
                <span title="@{{ user|username }}" class="is-block pb-3">@{{ user|username|truncatechars:8 }}</span>
            </a>
            {% include 'snippets/add_to_group_button.html' with user=user group=group %}
            {% if user.mutuals and not user.hide_follows %}
            <p class="help">
                {% blocktrans trimmed with mutuals=user.mutuals|intcomma count counter=user.mutuals %}
                {{ mutuals }} follower you follow
                {% plural %}
                {{ mutuals }} followers you follow{% endblocktrans %}
            </p>
            {% elif user.shared_books %}
            <p class="help">
                {% blocktrans trimmed with shared_books=user.shared_books|intcomma count counter=user.shared_books %}
                {{ shared_books }} book on your shelves
                {% plural %}
                {{ shared_books }} books on your shelves
                {% endblocktrans %}
            </p>
            {% elif request.user in user.following.all %}
            <p class="help">
                {% trans "Follows you" %}
            </p>
            {% endif %}
        </div>
        {% endfor %}
    </div>
    {% else %}
    <p>
        {% blocktrans trimmed %}
        No potential members found for "{{ user_query }}"
        {% endblocktrans %}
    </p>
    <br/>

{% endif %}