{% load i18n %}

{% if request.GET.updated %}
<div class="notification is-primary">
    {% trans "You successfully added a user to this group!" %}
</div>
{% endif %}

<h2 class="heading">Group Members</h2>
<p class="subtitle is-6">{% trans "Members can add and remove books on your group's book lists" %}</p>

{% block panel %}
<div class="block">
    <form class="field has-addons" method="get" action="{% url 'group-find-users' group.id %}">
        <div class="control">
            <input type="text" name="query" value="{{ request.GET.query }}" class="input" placeholder="{% trans 'Search to add a user' %}" aria-label="{% trans 'Search to add a user' %}">
            {% if request.GET.query and no_results %}
            <p class="help">{% blocktrans with query=request.GET.query %}No users found for "{{ query }}"{% endblocktrans %}</p>
            {% endif %}
        </div>
        <div class="control">
            <button class="button" type="submit">
                <span class="icon icon-search" title="{% trans 'Search' %}">
                    <span class="is-sr-only">{% trans "Search" %}</span>
                </span>
            </button>
        </div>
    </form>
    {% include 'snippets/suggested_users.html' with suggested_users=suggested_users %}
</div>
{% endblock %}

<ul start="{{ members.start_index }}" class="ordered-list">
{% for member in group.members.all %}
    <li class="block mb-5">
      <div class="column is-one-third">
          {% include 'directory/user_card.html' %}
      </div>
    </li>
{% endfor %}
</ul>