{% extends "pages/abstract/dashboard.html.twig" %}

{% block stylesheets_page %}
    <!-- Page-group-specific CSS asset bundle -->
    {{ assets.css('css/form-widgets') | raw }}
{% endblock %}

{# Overrides blocks in head of base template #}
{% block page_title %}{{ translate("ROLE", 2) }} | {{ role.name }}{% endblock %}

{% block page_description %}{{ translate("ROLE.INFO_PAGE", {name: role.name}) }}{% endblock %}

{% block body_matter %}
    <div class="row">
        <div class="col-lg-4">
            <div id="view-role" class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">{{ translate('ROLE.SUMMARY') }}</h3>
                    {% if 'tools' not in tools.hidden %}
                        <div class="box-tools pull-right">
                            <div class="btn-group">
                                <button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false">
                                    <i class="fa fa-gear"></i>
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu box-tool-menu">
                                    {% block tools %}
                                        <li>
                                            <a href="#" class="js-role-edit" data-slug="{{ role.slug }}">
                                                <i class="fa fa-edit fa-fw"></i> {{ translate('EDIT') }}
                                            </a>
                                        </li>
                                        {% if 'permissions' not in tools.hidden %}
                                            <li>
                                                <a href="#" class="js-role-permissions" data-slug="{{ role.slug }}">
                                                    <i class="fa fa-key"></i> {{ translate("PERMISSION.MANAGE") }}
                                                </a>
                                            </li>
                                        {% endif %}
                                        {% if 'delete' not in tools.hidden %}
                                            <li>
                                                <a href="#" class="js-role-delete" data-slug="{{ role.slug }}">
                                                    <i class="fa fa-trash-o fa-fw"></i> {{ translate('DELETE') }}
                                                </a>
                                            </li>
                                        {% endif %}
                                    {% endblock %}
                                </ul>
                            </div>
                        </div>
                    {% endif %}
                </div>
                <div class="box-body box-profile">
                    <div class="text-center">
                        <i class="fa fa-drivers-license fa-5x"></i>
                    </div>

                    <h3 class="profile-username text-center">{{ role.name }}</h3>

                    {% if 'description' not in fields.hidden %}
                        <p class="text-muted">
                            {{ role.description }}
                        </p>
                    {% endif %}
                    {% if 'users' not in fields.hidden %}
                        <hr>
                        <strong><i class="fa fa-users margin-r-5"></i> {{ translate('USER', 2) }}</strong>
                        <p class="badge bg-blue box-profile-property">
                            {{ role.users.count }}
                        </p>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div id="widget-role-permissions" class="box box-primary">
                <div class="box-header">
                    <h3 class="box-title"><i class="fa fa-fw fa-key"></i> {{ translate('PERMISSION', 2) }}</h3>
                    {% include "tables/table-tool-menu.html.twig" %}
                </div>
                <div class="box-body">
                    {% include "tables/permissions.html.twig" with {
                        "table" : {
                            "id" : "table-role-permissions"
                        }
                    } %}
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <div id="widget-role-users" class="box box-primary">
                <div class="box-header">
                    <h3 class="box-title"><i class="fa fa-fw fa-key"></i> {{ translate('USER', 2) }}</h3>
                    {% include "tables/table-tool-menu.html.twig" %}
                </div>
                <div class="box-body">
                    {% include "tables/users.html.twig" with {
                        "table" : {
                            "id" : "table-role-users",
                            "columns" : ["last_activity"]
                        }
                    } %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block scripts_page %}
    <!-- Include page variables -->
    <script>
        {% include "pages/partials/page.js.twig" %}

        // Add user name
        page = $.extend(
            true,               // deep extend
            {
                "role_slug": "{{ role.slug }}"
            },
            page
        );
    </script>

    <!-- Include form widgets JS -->
    {{ assets.js('js/form-widgets') | raw }}

    <!-- Include page-specific JS -->
    {{ assets.js('js/pages/role') | raw }}
{% endblock %}