{% macro renderPager(search, workspaceId, group, pager, max, order, direction) %}
    {% if search == '' %}
        {{
            pagerfanta(
            pager,
            'twitter_bootstrap_translated',
                {
                    'proximity' : 1,
                    'routeName': 'claro_workspace_users_of_group',
                    'routeParams': {'workspace': workspaceId, 'group': group.getId(), 'max': max, 'order': order, 'direction': direction}
                }
            )
        }}
    {% else %}
        {{
            pagerfanta(
            pager,
            'twitter_bootstrap_translated',
                {
                    'proximity' : 1,
                    'routeName': 'claro_workspace_users_of_group_search',
                    'routeParams': {'search': search, 'workspace': workspaceId, 'group': group.getId(), 'max': max, 'order': order, 'direction':direction}
                }
            )
        }}
    {% endif %}
{% endmacro %}

{% macro sortUrl(max, search, groupId, workspaceId, order, direction) %}
    {% if direction == 'ASC' %}
        {% set newDirection = 'DESC' %}
    {% else %}
        {% set newDirection = 'ASC' %}
    {% endif %}

    {% if search == '' %}
        {{ path('claro_workspace_users_of_group',
        {'workspace': workspaceId, 'group': groupId, 'max': max, 'order': order, 'direction':newDirection}) }}
    {% else %}
        {{ path('claro_workspace_users_of_group_search',
        {'search': search, 'workspace': workspaceId, 'group': groupId, 'max': max, 'order': order, 'direction':newDirection}) }}
    {% endif %}
{% endmacro %}

{% from _self import sortUrl %}
{% from _self import renderPager %}
{% from "ClarolineCoreBundle::macros.html.twig" import maxResultsSelectBox %}

{% extends 'ClarolineCoreBundle:Workspace:layout.html.twig' %}

{% block title %}{{ parent() ~ ' - ' ~ "groups" | trans({}, "platform") | striptags | raw }}{% endblock %}

{% block breadcrumb %}
    {{
        macros.breadcrumbs([
            {
                'icon': 'fa fa-book',
                'name': 'workspaces'|trans({}, 'platform'),
                'href': path('claro_workspace_list')
            },
            {
                'name': workspace.getName() ~ ' - ' ~  workspace.getCode(),
                'href': path('claro_workspace_open', {'workspaceId': workspace.getId(), 'toolName': 'home'})
            },
            {
                'name': 'groups'|trans({}, 'platform'),
                'href': path('claro_workspace_registered_group_list', {'workspace': workspace.getId()})
            },
            {
                'name': group.getName(),
                'href': ''
            }
        ])
    }}
{% endblock %}

{% block section_content %}
    <div class="panel-body">
        <ul class="nav nav-tabs margin-bottom-md">
            <li> <a href="{{ path('claro_workspace_registered_user_list', {'workspace': workspace.getId() }) }}"> {{'users'|trans({}, 'platform') }} </a> </li>
            <li class="active"> <a href="#"> {{'groups'|trans({}, 'platform') }} </a> </li>
            <li> <a href="{{ path('claro_workspace_roles', {'workspace': workspace.getId()} ) }}">{{ 'roles'|trans({}, 'platform') }}</a> </li>
        </ul>
        <h3>{{ group.getName() }}</h3>
        {{ macros.flashBox() }}
    </div>
    <div class="list-group">
        <div class="list-group-item">
            <div class="row">
                <div class="col-md-8">
                    <div class="btn-group margin-md">
                        <a href="{{ path('claro_workspace_unregistered_user_list', {'workspace': workspace.getId()}) }}" class="btn btn-default dropdown-toggle" role="button">
                            <i class="fa fa-plus"></i> {{ 'add_users'|trans({}, 'platform') }}
                        </a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="input-group margin-md">
                        <input class="form-control" type="text" id="search-items-txt"  placeholder="{{ 'search'|trans({}, 'platform') }}" value="{{ search }}">
                        <span class="input-group-btn">
                            <button class="filter btn btn-default" type="button" id="search-button">
                                <i class="fa fa-search"></i>
                            </button>
                        </span>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-8">
                    {{ renderPager(search, workspace.getId(), group, pager, max, order, direction) }}
                </div>
                <div class="col-md-4">
                    {{ maxResultsSelectBox(max, "$('#search-button').trigger('click');") }}
                </div>
            </div>
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-condensed">
                    <thead>
                        <tr>
                            <th><a href="{{ sortUrl(max, search, group.getId(), workspace.getId(),  'id', direction) }}">{{ 'id'|trans({}, 'platform') }}</a></th>
                            <th><a href="{{ sortUrl(max, search, group.getId(), workspace.getId(), 'username', direction) }}">{{ 'username'|trans({}, 'platform') }}</a></th>
                            <th><a href="{{ sortUrl(max, search, group.getId(), workspace.getId(), 'lastName', direction) }}">{{ 'last_name'|trans({}, 'platform') }}</a></th>
                            <th><a href="{{ sortUrl(max, search, group.getId(), workspace.getId(), 'firstName', direction) }}">{{ 'first_name'|trans({}, 'platform') }}</a></th>
                            {% if showMail %}
                                <th><a href="{{ sortUrl(max, search, group.getId(), workspace.getId(), 'mail', direction) }}">{{ 'mail'|trans({}, 'platform') }}</a></th>
                            {% endif %}
                        </tr>
                    </thead>
                    <tbody id="user-table-body">
                        {% for user in pager.currentPageResults %}
                            <tr id="row-{{ user.id }}" class="row-user" data-user-id="{{ user.getId() }}">
                                <td>{{ user.getId() }}</td>
                                <td>{{ user.getUsername() }}</td>
                                <td>{{ user.getLastName() }}</td>
                                <td>{{ user.getFirstName() }}</td>
                                {% if showMail %}
                                    <td>{{ user.getMail() }}</td>
                                {% endif %}
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {{ renderPager(search, workspace.getId(), group, pager, max, order, direction) }}
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script src='{{ asset('bundles/clarolinecore/js/table.js') }}' type="text/javascript"></script>
    <script>
        parameters = {};
        parameters.route = {};
        parameters.route.action = {};
        parameters.route.normal = {
            "route": "claro_workspace_users_of_group",
            "parameters": {
                'group': {{ group.getId() }},
                'workspace': {{  workspace.getId() }},
                "order": "{{ order }}"
            }
        };
        parameters.route.search = {
            "route": "claro_workspace_users_of_group_search",
            "parameters": {
                'group': {{ group.getId() }},
                'workspace': {{  workspace.getId() }},
                "order": "{{ order }}"
            }
        };
        Claroline.Table.initialize(parameters);
    </script>
{% endblock %}
