{% extends 'master.twig' %}
{% from 'macros.twig' import pagination %}

{% set sorts = ['boxes', 'rectangles', 'list'] %}
{% set sort = get is defined and get.sort is defined and get.sort in sorts ? get.sort : sorts[0] %}

{% set notfound = rank == 0 %}
{% set title = notfound ? 'Not found' : ranks[rank].name(true) %}
{% set description = notfound ? 'The requested rank could not be found!' : ranks[rank].description %}

{% set users = ranks[rank].users|batch(30) %}

{% set currPage = get.page|default(1) - 1 %}

{% block content %}
    <div class="announce-box" style="margin-bottom: 1px;">
        <h1 style="{% if rank %}text-shadow: 0 0 5px {{ ranks[rank].colour }}; color: {{ ranks[rank].colour }};{% else %}text-shadow: 0 0 5px #555;{% endif %}">{{ title }}</h1>
        <h3>{{ description }}</h3>
    </div>
    <div class="members" style="min-height: 500px;">
        <div style="display: inline-block; margin: 0 auto; font-size: 1.5em; line-height: 1.5em; height: 30px;">
            <div class="dropdown" style="float: left; color: #FFF;">
                <span class="dropdown__title">Rank:</span>
                {% for r in ranks %}
                    {% if not r.hidden or (r.hidden and rank == r.id) %}
                        <a class="dropdown__option{% if rank == r.id %} dropdown__option--selected{% endif %}" href="{{ route('members.rank', r.id) }}{{ server['QUERY_STRING'] is defined ? '?' : '' }}{{ server['QUERY_STRING']|default('') }}" style="color: {{ r.colour }};">{{ r.id == 0 ? 'Not found' : r.name(true) }}</a>
                    {% endif %}
                {% endfor %}
            </div>
            <div class="dropdown" style="float: left;">
                <span class="dropdown__title">View:</span>
                {% for s in sorts %}
                    <a class="dropdown__option {% if s == sort %} dropdown__option--selected{% endif %}" href="?{{ server['QUERY_STRING']|default('') }}{{ server['QUERY_STRING']|default('') ? '&' : '' }}sort={{ s }}">{{ s|capitalize }}</a>
                {% endfor %}
            </div>
        </div>
        {% if users|length < 1 %}
            <h1 style="margin: 2em 0;">This rank has no members!</h1>
        {% elseif not notfound %}
            <div class="members__list members__list--{{ sort }}">
                {% if sort == sorts[2] %}
                    <table class="members__table">
                        {% for elem in ['thead', 'tfoot'] %}
                            <{{ elem }}>
                                <tr>
                                    <th class="members__table-column members__table-column--legend members__table-column--{{ elem }}">No.</th>
                                    <th class="members__table-column members__table-column--legend members__table-column--{{ elem }}">Username</th>
                                    <th class="members__table-column members__table-column--legend members__table-column--{{ elem }}">Registered</th>
                                    <th class="members__table-column members__table-column--legend members__table-column--{{ elem }}">Last online</th>
                                    <th class="members__table-column members__table-column--legend members__table-column--{{ elem }}">User title</th>
                                    <th class="members__table-column members__table-column--legend members__table-column--{{ elem }}">Country</th>
                                </tr>
                            </{{ elem }}>
                        {% endfor %}
                        {% for count, user in users[currPage] %}
                            <tbody>
                                <tr>
                                    <td class="members__table-column">
                                        #{{ count }}
                                    </td>
                                    <td class="members__table-column">
                                        <a href="{{ route('user.profile', user.id) }}" style="font-weight: bold; color: {{ user.colour }}; text-shadow: 0 0 5px {{ user.colour }};">{{ user.username }}</a>
                                    </td>
                                    <td class="members__table-column">
                                        <time class="time-ago" datetime="{{ user.registered|date('r') }}">{{ user.registered|date(config('general.date_format')) }}</time>
                                    </td>
                                    <td class="members__table-column">
                                        {% if user.lastOnline == 0 %}<i>Never logged in.</i>{% else %}<time class="time-ago" datetime="{{ user.lastOnline|date('r') }}">{{ user.lastOnline|date(config('general.date_format')) }}</time>{% endif %}
                                    </td>
                                    <td class="members__table-column">
                                        {{ user.title }}
                                    </td>
                                    <td class="members__table-column">
                                        <img src="/images/flags/{{ user.country|lower }}.png" alt="{% if user.country|lower == 'xx' %}?{% else %}{{ user.country(true) }}{% endif %}" title="{% if user.country|lower == 'xx' %}Unknown{% else %}{{ user.country(true) }}{% endif %}">
                                    </td>
                                </tr>
                            </tbody>
                        {% endfor %}
                    </table>
                {% else %}
                    {% for user in users[currPage] %}
                        {% spaceless %}
                            <a href="{{ route('user.profile', user.id) }}">
                                <div class="members__box" id="u{{ user.id }}">
                                    <div class="avatar members__box-avatar" style="background-image: url('{{ route('user.avatar', user.id) }}')"></div>
                                    <span class="members__box-text" style="color: {{ user.colour }};">
                                        {{ user.username }}
                                    </span>
                                </div>
                            </a>
                        {% endspaceless %}
                    {% endfor %}
                {% endif %}
            </div>
            {% if users|length > 1 %}
                {{ pagination(rank ? route('members.rank', rank) : route('members.index'), users, get.page|default(1)) }}
            {% endif %}
        {% endif %}
    </div>
{% endblock %}