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

{% set roles_pagination = pagination(manage_roles_pagination, '/manage/users.php', null, {'v': 'roles'}) %}

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

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

        <div class="manage__role-items__collection">
            {% if can_manage_roles %}
                <div class="manage__role-item manage__role-item--create">
                    <a href="{{ url('manage-role-create') }}" 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>
            {% endif %}

            {% for role in manage_roles %}
                <div class="manage__role-item" style="{{ role.role_colour|html_colour('--accent-colour') }}">
                    <a href="{{ url('manage-role-edit', {'role': role.role_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.role_name }}
                            </div>
                            <div class="manage__role-item__details">
                                {% if role.users > 0 %}
                                    <div class="manage__role-item__users">
                                        <i class="fas fa-users fa-fw"></i> {{ role.users|number_format }}
                                    </div>
                                {% endif %}
                                {% if role.role_title|default('')|length > 0 %}
                                    <div class="manage__role-item__title">
                                        {{ role.role_title }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="manage__role-item__actions">
                            <a href="{{ url('members-role', {'role': role.role_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__role-items__pagination">
                {{ roles_pagination }}
            </div>
        {% endif %}
    </div>
{% endblock %}