{% extends 'user/master.twig' %}
{% from 'macros.twig' import container_title %}
{% from 'user/macros.twig' import user_card %}

{% set url_role = role.id > 1 ? role.id : 0 %}
{% set url_sort = order_field == order_default ? '' : order_field %}
{% set url_direction = order_direction == 'asc' ? '' : order_direction %}
{% set canonical_url = url('user-list', {
    'role': url_role,
    'sort': url_sort,
    'direction': url_direction,
    'page': users_pagination.page|default(0) > 2 ? users_pagination.page : 0,
}) %}
{% set title = role.id == 1 ? 'Members' : 'Role » ' ~ role.name  %}
{% set manage_link = url('manage-users') %}

{% macro member_nav(roles, role_id, orders, order, directions, direction, users_pagination, url_role, url_sort, url_direction) %}
    {% from 'macros.twig' import pagination %}
    {% from '_layout/input.twig' import input_select %}

    <div class="userlist__navigation">
        <form onchange="this.submit()" class="userlist__sorting">
            <select class="input__select userlist__select" name="r">
            {% for role in roles %}
                <option value="{{ role.id }}"{% if role.id == role_id %}selected{% endif %} style="background-color: #222; {% if role.hasColour %}color: {{ role.colour }}{% endif %}">{{ role.name }}</option>
            {% endfor %}
            </select>
            <select class="input__select userlist__select" name="ss">
            {% for order_name, order_info in orders %}
                {% if order_info.alt is not defined %}
                <option value="{{ order_name }}"{% if order_name == order %}selected{% endif %}>{{ order_info.title }}</option>
                {% endif %}
            {% endfor %}
            </select>
            {{ input_select('sd', directions, direction, null, null, false, 'userlist__select') }}

            <noscript>
                <button class="input__button">Go</button>
            </noscript>
        </form>

        <div class="userlist__pagination">
            {{ pagination(users_pagination, 'user-list', {'role': url_role, 'sort': url_sort, 'direction': url_direction}) }}
        </div>
    </div>
{% endmacro %}

{% block content %}
    {% from _self import member_nav %}
    {% set member_nav = member_nav(
        roles, role.id,
        order_fields, order_field,
        order_directions, order_direction,
        users_pagination, url_role, url_sort, url_direction
    ) %}

    <div class="container userlist__container" style="--accent-colour: {{ role.colour }}">
        {{ member_nav }}
    </div>

    {% if users|length > 0 %}
        <div class="userlist">
            {% for user in users %}
                <div class="userlist__item">
                    {{ user_card(user) }}
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="userlist__empty">
            This role has no members
        </div>
    {% endif %}

    <div class="container userlist__container" style="--accent-colour: {{ role.colour }}">
        {{ member_nav }}
    </div>
{% endblock %}