{% extends 'manage/users/master.twig' %}
{% from 'macros.twig' import pagination, container_title %}

{% set roles_pagination = pagination(manage_roles_pagination, 'manage-roles') %}

{% block manage_content %}
    <div class="container manage__roles">
        {{ container_title('<i class="fas fa-user-check fa-fw"></i> Roles') }}

        {% if roles_pagination|trim|length > 0 %}
            <div class="manage__roles__pagination">
                {{ roles_pagination }}
            </div>
        {% endif %}

        <div class="manage__roles__collection">
            <div class="manage__role-item manage__role-item--create">
                <a href="{{ url('manage-role') }}" class="manage__role-item__background"></a>
                <div class="manage__role-item__container">
                    <div class="manage__role-item__icon">
                        <div class="manage__role-item__icon__background"></div>
                        <div class="manage__role-item__icon__content">
                            <i class="fas fa-plus-circle fa-fw"></i>
                        </div>
                    </div>
                    <div class="manage__role-item__info">
                        <div class="manage__role-item__name">
                            Create a new role
                        </div>
                    </div>
                </div>
            </div>

            {% for role in manage_roles %}
                <div class="manage__role-item" style="--accent-colour: {{ role.info.colour }}">
                    <a href="{{ url('manage-role', {'role': role.info.id}) }}" class="manage__role-item__background"></a>

                    <div class="manage__role-item__container">
                        <div class="manage__role-item__icon">
                            <div class="manage__role-item__icon__background"></div>
                            <div class="manage__role-item__icon__content">
                                <i class="fas fa-toilet-paper fa-fw"></i>
                            </div>
                        </div>
                        <div class="manage__role-item__info">
                            <div class="manage__role-item__name">
                                {{ role.info.name }}
                            </div>
                            <div class="manage__role-item__details">
                                {% if role.members > 0 %}
                                    <div class="manage__role-item__users">
                                        <i class="fas fa-users fa-fw"></i> {{ role.members|number_format }}
                                    </div>
                                {% endif %}
                                {% if role.info.title is not empty %}
                                    <div class="manage__role-item__title">
                                        {{ role.info.title }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="manage__role-item__actions">
                            <a href="{{ url('user-list', {'role': role.info.id}) }}" class="manage__role-item__action" title="Members">
                                <i class="fas fa-users fa-fw"></i>
                            </a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>

        {% if roles_pagination|trim|length > 0 %}
            <div class="manage__roles__pagination">
                {{ roles_pagination }}
            </div>
        {% endif %}
    </div>
{% endblock %}