{% import "macros/widgets.html.twig" as widgets %}

{% set teams = data %}
{% set title = options.title|default('label.my_teams') %}
{% set widgetId = options.id %}


{% if teams|length > 0 %}
<div class="row">
    <div class="col-md-12">
        <div class="box box-{{ admin_lte_context.widget.type }} WidgetUserTeams" id="{{ widgetId }}">
            {% if not title is empty %}
            <div class="box-header with-border">
                <h3 class="box-title">{{ title|trans }}</h3>
            </div>
            {% endif %}
            <div class="box-body">
                <table class="table table-hover dataTable" role="grid">
                    <thead>
                    <tr>
                        <th>{{ 'label.team'|trans }}</th>
                        <th class="text-center">{{ 'label.teamlead'|trans }}</th>
                        <th>{{ 'label.user'|trans }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for team in teams %}
                        <tr>
                            <td>
                                {{ team.name }}
                            </td>
                            <td class="text-center">
                                {{ widgets.user_avatar(team.teamlead) }}
                            </td>
                            <td class="avatars">
                                {% set userTeamCount = team.users|length %}
                                {% for user in team.users %}
                                    {% set teamHiddenId = widgetId ~ '_' ~ team.id ~ '_hiddenUser' %}
                                    {{ widgets.user_avatar(user) }}
                                    {% if userTeamCount > 5 and loop.index == 5 and not loop.last %}
                                        <a href="#" onclick="$('#{{ teamHiddenId }}').toggleClass('hidden');$(this).hide();return false;" class="badge">{{ 'label.plus_more'|trans({'%count%': (userTeamCount - 5)}) }}</a>
                                        <span class="hidden" id="{{ teamHiddenId }}">
                                    {% endif %}
                                    {% if userTeamCount > 5 and loop.index != 5 and loop.last %}
                                        </span>
                                    {% endif %}
                                {% endfor %}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>
{% endif %}