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

{# Overrides blocks in head of base template #}
{% block page_title %}{{ translate("DASHBOARD") }}{% endblock %}
{% block page_description %}{% endblock %}

{% block body_matter %}
    <!-- Info boxes -->
    {% if checkAccess('uri_users') %}
        <div class="row">
            <div class="col-md-4 col-sm-6 col-xs-12">
                <a href="{{ site.uri.public }}/users">
                    <div class="info-box">
                        <span class="info-box-icon bg-aqua"><i class="fa fa-user fa-fw"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">{{ translate("USER", 2) }}</span>
                            <span class="info-box-number">{{ counter.users }}</span>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </a>
            </div>
            <!-- /.col -->

            <div class="col-md-4 col-sm-6 col-xs-12">
                <a href="{{ site.uri.public }}/roles">
                    <div class="info-box">
                        <span class="info-box-icon bg-red"><i class="fa fa-drivers-license"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">{{ translate("ROLE", 2) }}</span>
                            <span class="info-box-number">{{ counter.roles }}</span>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </a>
            </div>
            <!-- /.col -->

            <div class="col-md-4 col-sm-6 col-xs-12">
                <a href="{{ site.uri.public }}/groups">
                    <div class="info-box">
                        <span class="info-box-icon bg-green"><i class="fa fa-users"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">{{ translate("GROUP", 2) }}</span>
                            <span class="info-box-number">{{ counter.groups }}</span>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </a>
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->

    {% elseif checkAccess('uri_group', {
        'group': current_user.group
    }) %}
        <div class="row">
            <div class="col-sm-6 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-aqua"><i class="{{ current_user.group.icon }}"></i></span>
                    <div class="info-box-content">
                        <h1>{{ current_user.group.name }}</h1>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <!-- /.col -->
            <div class="col-sm-6 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-aqua"><i class="fa fa-user fa-fw"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">{{ translate("USER", 2) }}</span>
                        <span class="info-box-number">{{ current_user.group.users.count }}</span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    {% endif %}

    <!-- Main panels -->
    <div class="row">
        {% if checkAccess('uri_users') or checkAccess('view_system_info') %}
            <div class="col-md-6 col-sm-12 col-xs-12">
                {% if checkAccess('uri_users') %}
                    <div class="row">
                        <div class="col-sm-12">
                            <!-- USERS LIST -->
                            <div class="box box-info">
                                <div class="box-header with-border">
                                    <h3 class="box-title">{{ translate("USER.LATEST") }}</h3>
                                </div>
                                <!-- /.box-header -->
                                <div class="box-body no-padding">
                                    <ul class="users-list clearfix">
                                        {% for user in users %}
                                            <li>
                                                <img src="{{ user.avatar }}" alt="User Image">
                                                <a class="users-list-name"
                                                   href="{{ site.uri.public }}/users/u/{{ user.user_name }}">{{ user.first_name }} {{ user.last_name }}</a>
                                                <span class="users-list-date">{{ user.registered }}</span>
                                            </li>
                                        {% endfor %}
                                    </ul>
                                    <!-- /.users-list -->
                                </div>
                                <!-- /.box-body -->
                                <div class="box-footer text-center">
                                    <a href="{{ site.uri.public }}/users"
                                       class="uppercase">{{ translate("USER.VIEW_ALL") }}</a>
                                </div>
                                <!-- /.box-footer -->
                            </div>
                            <!--/.box -->
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                {% endif %}

                {% if checkAccess('view_system_info') %}
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="box box-primary">
                                <div class="box-header with-border">
                                    <h3 class="box-title">{{ translate("SYSTEM_INFO") }}</h3>
                                </div>
                                <!-- /.box-header -->
                                <div class="box-body">
                                    <dl class="dl-horizontal">
                                        <dt>{{ translate("SYSTEM_INFO.UF_VERSION") }}</dt>
                                        <dd>{{ info.version.UF }}</dd>

                                        <dt>{{ translate("SYSTEM_INFO.PHP_VERSION") }}</dt>
                                        <dd>{{ info.version.php }}</dd>

                                        <dt>{{ translate("SYSTEM_INFO.SERVER") }}</dt>
                                        <dd>{{ info.environment.SERVER_SOFTWARE }}</dd>

                                        <dt>{{ translate("SYSTEM_INFO.DB_VERSION") }}</dt>
                                        <dd>{{ info.version.database.type }} {{ info.version.database.version }}</dd>

                                        <dt>{{ translate("SYSTEM_INFO.DB_NAME") }}</dt>
                                        <dd>{{ info.database.name }}</dd>

                                        <dt>{{ translate("SYSTEM_INFO.DIRECTORY") }}</dt>
                                        <dd>{{ info.path.project }}</dd>

                                        <dt>{{ translate("SYSTEM_INFO.URL") }}</dt>
                                        <dd>{{ site.uri.public }}</dd>

                                        <dt>{{ translate("SYSTEM_INFO.SPRINKLES") }}</dt>
                                        <dd>
                                            <ul class="list-unstyled">
                                                {% for sprinkle in sprinkles %}
                                                    <li>
                                                        {{ sprinkle }}
                                                    </li>
                                                {% endfor %}
                                            </ul>
                                        </dd>
                                    </dl>
                                </div>
                                <!-- /.box-body -->
                                <div class="box-footer text-center">
                                    <a href="javascript:void(0)"
                                       class="js-clear-cache uppercase">{{ translate("CACHE.CLEAR") }}</a>
                                </div>
                                <!-- /.box-footer -->
                            </div>
                            <!--/.box -->
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                {% endif %}
            </div>
            <!-- /.col -->
        {% endif %}

        {% if checkAccess('uri_activities') %}
            <div class="col-md-6 col-sm-12 col-xs-12">
                <div id="widget-activities" class="box box-primary">
                    <div class="box-header">
                        <h3 class="box-title"><i class="fa fa-tasks fa-fw"></i> {{ translate('ACTIVITY', 2) }}</h3>
                        {% include "tables/table-tool-menu.html.twig" %}
                    </div>
                    <div class="box-body">
                        {% include "tables/activities.html.twig" with {
                            "table" : {
                                "id" : "table-activities",
                                "columns" : ["user"]
                            }
                        } %}
                    </div>
                </div>
            </div>
        {% elseif checkAccess('view_group_field', {
            'group': current_user.group,
            'property': 'users'
        }) %}
            <div class="col-md-6 col-sm-12 col-xs-12">
                <div id="widget-group-users" class="box box-primary">
                    <div class="box-header">
                        <h3 class="box-title"><i class="fa fa-fw fa-user"></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-group-users"
                            }
                        } %}
                    </div>
                    <div class="box-footer">
                        <button type="button" class="btn btn-success js-user-create">
                            <i class="fa fa-plus-square"></i> {{ translate("USER.CREATE") }}
                        </button>
                    </div>
                </div>
            </div>
        {% else %}
            <div class="col-sm-4 col-sm-offset-4 col-xs-12">
                <div class="box box-widget widget-user">
                    <!-- Add the bg color to the header using any of the bg-* classes -->
                    <div class="widget-user-header bg-black-active">
                        <h3 class="widget-user-username">
                            {{ translate("WELCOME", {
                                'first_name': current_user.first_name
                            }) }}
                        </h3>
                    </div>
                    <div class="widget-user-image">
                        <img class="img-circle" src="{{ assets.url('assets://userfrosting/images/cupcake.png') }}"
                             alt="User Avatar">
                    </div>
                    <div class="box-footer">
                        <h4>
                            {{ translate("WELCOME_TO", {
                                'title': site.title
                            }) }}
                        </h4>
                        <p>
                            {{ translate("NO_FEATURES_YET") }}
                        </p>
                    </div>
                </div>
                <!-- /.widget-user -->


            </div>
            <!-- /.row -->
        {% endif %}
    </div>
    <!-- /.row -->
{% endblock %}

{% block scripts_page %}
    <!-- Include page variables -->
    <script>
        {% include "pages/partials/page.js.twig" %}

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

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

{% endblock %}