{% extends '@mio/user/master.twig' %}
{% from '@mio/macros.twig' import navigation, pagination %}

{% set canonical_url = '/members.php' ~ (role.role_id != 1 ? '?r=' ~ role.role_id : '') %}
{% set full_url = '/members.php?r=' ~ role.role_id ~ '&ss=' ~ order_field ~ '&sd=' ~ order_direction %}
{% set title = role.role_id == 1 ? 'Members' : 'Role » ' ~ role.role_name  %}
{% set manage_link = '/manage/users.php?v=listing' %}

{% block content %}
    <form onchange="this.submit()">
        <select class="input__select" name="r"
            style="{{ role.role_colour|html_colour }}">
            {% for r in roles %}
                <option
                    value="{{ r.role_id }}"
                    style="{{ r.role_colour|html_colour }}"
                    {% if r.role_id == role.role_id %} selected{% endif %}>
                    {{ r.role_name }}
                </option>
            {% endfor %}
        </select>

        <select class="input__select" name="ss">
            {% for name, info in order_fields %}
                <option
                    value="{{ name }}"
                    {% if name == order_field %} selected{% endif %}>
                    {{ info.title }}
                </option>
            {% endfor %}
        </select>

        <select class="input__select" name="sd">
            {% for name, title in order_directions %}
                <option
                    value="{{ name|lower }}"
                    {% if name == order_direction %} selected{% endif %}>
                    {{ title }}
                </option>
            {% endfor %}
        </select>

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

    <div class="container members__users">
        <div class="container__title">{{ title }}</div>
        <div class="container__content members__users__content">
            {% for user in users %}
                <a class="members__user" href="/profile.php?u={{ user.user_id }}">
                    <div
                        class="avatar members__user__avatar"
                        style="background-image:url('/profile.php?u={{ user.user_id }}&amp;m=avatar')">
                    </div>

                    <div class="members__user__info">
                        <div
                            class="members__user__name"
                            style="{{ user.user_colour|html_colour }}">
                            {{ user.username }}
                        </div>

                        <div class="members__user__sub">
                            <div class="members__user__country">
                                <div class="members__user__country__name">
                                    {{ user.user_country|country_name }}
                                </div>

                                <div class="flag flag--{{ user.user_country|lower }} members__user__country__flag">
                                    {{ user.user_country }}
                                </div>
                            </div>

                            {#<div class="members__user__supporter" title="Supporter">
                                Supporter
                            </div>#}

                            <div class="members__user__title">
                                {{ user.user_title }}
                            </div>
                        </div>

                        <div class="members__user__stats">
                            <div class="members__user__stat" title="{{ user.user_joined|date('r') }}">
                                <span class="members__user__stat__title">Joined</span>
                                <time class="members__user__stat__value" datetime="{{ user.user_joined|date('c') }}">
                                    {{ user.user_joined|time_diff }}
                                </time>
                            </div>

                            <div class="members__user__stat" title="{{ user.user_last_seen|date('r') }}">
                                <span class="members__user__stat__title">Last seen</span>
                                {% if user.user_last_seen is not null %}
                                    <time class="members__user__stat__value" datetime="{{ user.user_last_seen|date('c') }}">
                                        {{ user.user_last_seen|date('U') + 10 >= ''|date('U') ? 'just now' : user.user_last_seen|time_diff }}
                                    </time>
                                {% else %}
                                    <span class="members__user__stat__value">
                                        Never
                                    </span>
                                {% endif %}
                            </div>
                        </div>

                        <div class="members__user__stats">
                            <div class="members__user__stat">
                                <span class="members__user__stat__title">Topics</span>
                                <span class="members__user__stat__value">{{ user.user_topic_count|number_format }}</span>
                            </div>

                            <div class="members__user__stat">
                                <span class="members__user__stat__title">Posts</span>
                                <span class="members__user__stat__value">{{ user.user_post_count|number_format }}</span>
                            </div>
                        </div>
                    </div>
                </a>
            {% endfor %}
        </div>
    </div>

    {{ pagination(role.role_user_count, users_take, users_offset, full_url) }}
    {{ navigation(mio_navigation, '/members.php') }}
{% endblock %}