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

{% set url_role = role.role_id != 1 ? role.role_id : 0 %}
{% set url_sort = order_field == order_default ? '' : order_field %}
{% set url_direction = order_fields[order_field]['default-dir'] == order_direction ? '' : order_direction %}
{% set canonical_url = url_construct('/members.php', {
    'r': url_role,
    'ss': url_sort,
    'sd': url_direction,
    'p': users_pagination.page > 2 ? users_pagination.page : 0,
}) %}
{% set title = role.role_id == 1 ? 'Members' : 'Role » ' ~ role.role_name  %}
{% set manage_link = '/manage/users.php?v=listing' %}

{% 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">
            {{ input_select('r', roles, role_id, 'role_name', 'role_id', false, 'userlist__select') }}
            {{ input_select('ss', orders, order, 'title', null, false, 'userlist__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, '/members.php', null, {'r': url_role, 'ss': url_sort, 'sd': url_direction}) }}
        </div>
    </div>
{% endmacro %}

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

    <div class="container userlist__container" style="{{ role.role_colour|html_colour('--accent-colour') }}">
        {{ member_nav }}
    </div>

    <div class="userlist">
        {% for user in users %}
            <div class="userlist__item">
                {{ user_card(user) }}
            </div>
        {% endfor %}
    </div>

    <div class="container userlist__container" style="{{ role.role_colour|html_colour('--accent-colour') }}">
        {{ member_nav }}
    </div>
{% endblock %}