{% trans_default_domain 'FOSUserBundle' %}

<div class="container fos_user_group_list"
     style="margin-top: 2.5vmin;">
    <div class="col-lg-12" style="font-size: 2.5vmin; margin-bottom: 1vmin;">
        <strong>Access Groups</strong>
        <a style="display: inline-block; margin-left: 2vmin; color: #428bca; cursor: pointer;" data-toggle="modal" data-target="#new-group-modal" href="#"
           {#href="{{ path('fos_user_group_new') }}"#}>
            <span class="glyphicon glyphicon-plus"></span>
        </a>
    </div>
    <div class="table-responsive col-lg-12">
        <table class="table table-striped table-hover">
            <thead>
            <tr>
                <th class="col-md-4">Group name</th>
                <th class="col-md-8">Group roles</th>
            </tr>
            </thead>
            <tbody>
            {% for group in groups %}
                <tr style="cursor: pointer;"
                    onclick="location.href='{{ path('fos_user_group_edit', {'groupName': group.getName()} ) }}'">
                    <td>
                        {{ group.getName() }}
                    </td>
                    <td>
                        {% set roles_length = group.getRoles() | length %}
                        {% for role in group.getRoles() %}
                            {{ role }}
                            {% if roles_length > loop.index  %}
                                |
                            {% endif %}
                        {% endfor %}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    {% include "FOSUserBundle:Group:new_content.html.twig" %}
</div>
