{% load gravatar %}
<table class="listing">
    <thead>
        <tr>
            <th class="name">
                Name  
                {% if ordering == "name" %}
                    <a href="{% url 'wagtailusers_index' %}" class="icon icon-arrow-down-after teal"></a>
                {% else %}
                    <a href="{% url 'wagtailusers_index' %}?ordering=name" class="icon icon-arrow-down-after"></a>
                {% endif %}
            </th>
            <th class="username">
                Username
                {% if ordering == "username" %}
                    <a href="{% url 'wagtailusers_index' %}" class="icon icon-arrow-down-after teal"></a>
                {% else %}
                    <a href="{% url 'wagtailusers_index' %}?ordering=username" class="icon icon-arrow-down-after"></a>
                {% endif %}
            </th>
            <th class="level">Level</th>
            <th class="status">Status</th>
        </tr>
    </thead>
    <tbody>
        {% for user in users %}
            <tr>
                <td class="title">
                    <h2>
                        <span class="avatar small icon icon-user"><img src="{% gravatar_url user.email 25 %}" /></span>
                        <a href="{% url 'wagtailusers_edit' user.id %}">{{ user.get_full_name|default:user.username }}</a>
                    </h2>
                </td>
                <td class="username">{{ user.username }}</td>
                <td class="level">{% if user.is_superuser %}Admin{% endif %}</td>
                <td class="status"><div class="status-tag {% if user.is_active %}primary{% endif %}">{% if user.is_active %}Active{% else %}Inactive{% endif %}</div></td>
            </li>
        {% endfor %}
    </tbody>
</table>