{% extends 'base.html.twig' %}

{% block title %}{{ pageTitleString }}{% endblock title %}

{% block head_description %}{{ descriptionString }}{% endblock head_description %}
{% block head_keyword %}{{ keyWordString }}{% endblock head_keyword %}

{% block og_title %}{{ titleString }}{% endblock og_title %}
{% block og_description %}{{ descriptionString }}{% endblock og_description %}

{% block head_script %}
    {{ parent() }}
{% endblock head_script %}

{% block head_script %}
    {{ parent() }}
    {{ encore_entry_script_tags('content') }}
    {{ encore_entry_script_tags('form') }}
{% endblock head_script %}

{% block head_style %}
    {{ parent() }}
    {{ encore_entry_link_tags('content') }}
    {{ encore_entry_link_tags('form') }}
{% endblock head_style %}

{% block page_header_h1 %}
    {% if userGroupId == '' %}
        {{ 'Add Group'|phrase }}
    {% else %}
        {{ 'Edit Group'|phrase }}
    {% endif %}
{% endblock page_header_h1 %}

{% block content %}

    <div class="row-fluid">

        <div class="pull-right">
            {% include "@UserBundle/UserList/menu.html.twig" %}
            <a href="{{ path('iga_user_group_list', { 'cultureString': userLanguage.cultureString }) }}"
               class="btn btn-primary pull-right">{{ 'Back to Groups' }}</a>
        </div>

        <p>{{ 'Complete the group details'|phrase }}</p>

        <div class="col-sm-12">
            {% include "@UserBundle/Form/user_group.edit.html.twig" %}
        </div>

        <div class="navigation">
            {{ knp_pagination_render(pagination) }}
        </div>
        <table class="table">
            <tr>
                <th>
                    {{ knp_pagination_sortable(pagination, 'Name'|phrase, 'ul.first_name_string') }}
                    {{ knp_pagination_sortable(pagination, 'Surname'|phrase, 'ul.last_name_string') }}
                </th>
                <th>{{ knp_pagination_sortable(pagination, 'Username'|phrase, 'ul.username') }}</th>
                <th>{{ 'E-Mail'|phrase }}</th>
                <th>{{ 'Mobile'|phrase }}</th>
                <th>{{ knp_pagination_sortable(pagination, 'Active'|phrase, 'ul.is_live') }}</th>
                <th>
                    {{ 'Actions'|phrase }}
                    <a class="btn btn-primary"
                       href="{{ path('iga_user_edit', { 'cultureString': userLanguage.cultureString, 'companyId': companyId, 'userTypeId': userTypeId, 'userGroupId': userGroupId } ) }}"
                       >{{ 'Add'|phrase }}</a>
                </th>
            </tr>
            {% for userList in pagination %}
                <tr {% if loop.index is odd %} class="odd-row"{% endif %}>
                    <td>{{ userList.fullNameString() }}</td>
                    <td>{{ userList.username }}</td>
                    <td>{{ userList.userEMailAddressString }}</td>
                    <td>{{ userList.userTelNoMobileString }}</td>
                    <td>{{ userList.isActiveString }}</td>
                    <td>
                        <div class="btn-group">
                            <a class="btn btn-primary"
                               href="{{ path(
                                            'iga_user_edit',
                                            { 'cultureString': userLanguage.cultureString, 'userListId': userList.id, 'companyId': companyId, 'userTypeId': userTypeId, 'userGroupId': userGroupId }
                                        ) }}"
                               >{{ 'Edit'|phrase }}</a>
                        </div>
                    </td>
                </tr>
            {% endfor %}
        </table>
        <div class="navigation">
            {{ knp_pagination_render(pagination) }}
        </div>

    </div>

{% endblock content %}

{% block foot_script %}
    {{ parent() }}
    <script language="Javascript">
        $(document).ready(function () {
            $('#user_my_details_access_level').attr('style', 'width: 180px;');
            $('#user_my_details_access_level').select2({placeholder: "{{ 'Click or type here to select one or more'|phrase }}"});
        });
    </script>
{% endblock foot_script %}