{% set can_edit = group.canEdit(login) %}

{% set managers = group.getManagers() %}
{% set members = group.getMembers() %}

<div class="ui stackable pointing inverted menu tabbed">
    <div class="item header">
        <i class="users cog icon"></i>
        {{ group.getFullName() }} :
    </div>
    <a href="{{ url_for('groups', {'id': group.getId()}) }}?tab=group_information" class="item{{ tab == 'group_information' ? ' active' }}" data-tab="group_information">{{ _T("Information") }}</a>
    <a href="{{ url_for('groups', {'id': group.getId()}) }}?tab=group_managers" class="item{{ tab == 'group_managers' ? ' active' }}" data-tab="group_managers">{{ _T("Managers") }} ({{ managers|length }})</a>
    <a href="{{ url_for('groups', {'id': group.getId()}) }}?tab=group_members" class="item{{ tab == 'group_members' ? ' active' }}" data-tab="group_members">{{ _T("Members") }} ({{ members|length }})</a>
</div>
<form class="ui form" action="{{ url_for("doEditGroup", {"id": group.getId()}) }}" method="post" enctype="multipart/form-data" id="group_form">
    <div class="ui{{ tab == 'group_information' ? ' active' }} tab segment" data-tab="group_information">
        <div class="ui basic segment">
            {% if group.getId() %}
                <div class="inline field">
                    <label>{{ _T("Creation date:") }}</label>
                    <span>{{ group.getCreationDate() }}</span>
                </div>
            {% endif %}
            <div class="inline field{% if can_edit %} required{% endif %}">
                <label for="group_name">{{ _T("Name:") }}</label>
            {% if can_edit %}
                <input type="text" name="group_name" id="group_name" value="{{ group.getName() }}" maxlength="250" required/>
            {% else %}
                <span>{{ group.getName() }}</span>
            {% endif %}
            </div>

            {% if group.getParentGroup() %}
                {% set pgroup = group.getParentGroup() %}
            {% endif %}
            <div class="inline field">
                    <label for="parent_group">{{ _T("Parent group:") }}</label>
                {% if can_edit and parent_groups|length > 0 %}
                    {% if pgroup is defined and not login.isGroupManager(pgroup.getId()) %}
                        {{ pgroup.getName() }}
                        <input type="hidden" name="parent_group" value="{{ pgroup.getId() }}"/>
                    {% else %}
                        <div class="ui search selection dropdown nochosen">
                            <input type="hidden" name="parent_group" id="parent_group" value="{% if pgroup is defined %}{{ pgroup.getId() }}{% endif %}">
                            <i class="dropdown icon"></i>
                            <div class="text">{% if pgroup is defined %}{{ pgroup.getName() }}{% endif %}</div>
                            <div class="menu">
                                <div class="item" data-value="">{{ _T("None") }}</div>
                            {% for g in parent_groups %}
                                <div class="item" data-value="{{ g.getId() }}">{{ g.getIndentName()|raw }}</div>
                            {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                {% else %}
                    <span>
                    {% if pgroup is defined %}
                        {{ pgroup.getName() }}
                        <input type="hidden" name="parent_group" value="{{ pgroup.getId() }}"/>
                    {% else %}
                        {{ _T("None") }}
                        <input type="hidden" name="parent_group" value=""/>
                    {% endif %}
                    </span>
                {% endif %}
            </div>
        </div>
    </div>

    <div id="group_managers" class="ui{{ tab == 'group_managers' ? ' active' }} tab segment" data-tab="group_managers">
        <div class="ui basic segment">
            {% if group %}
                {% if login.isAdmin() or login.isStaff() %}
                <a href="#" class="jsonly disabled ui labeled icon button" id="btnmanagers_small">
                    <i class="user shield icon" aria-hidden="true"></i>
                    {{ _T("Manage managers") }}
                </a>
                {% endif %}
                {% include "elements/group_persons.html.twig" with {'person_mode': "managers", 'persons': managers} %}
            {% endif %}
        </div>
    </div>

    <div id="group_members" class="ui{{ tab == 'group_members' ? ' active' }} tab segment" data-tab="group_members">
        <div class="ui basic segment">
            {% if group %}
                {% if login.isAdmin() or login.isStaff() %}
                <a href="#" class="jsonly disabled ui labeled icon button" id="btnusers_small">
                    <i class="user icon" aria-hidden="true"></i>
                    {{ _T("Manage members") }}
                </a>
                {% endif %}
                {% include "elements/group_persons.html.twig" with {'person_mode': "members", 'persons': members} %}
            {% endif %}
        </div>
    </div>

    <div class="ui basic center aligned segment">
        <div class="ui wrapping spaced buttons">
            {% if can_edit %}
            <button type="submit" name="valid" class="ui labeled icon primary button action">
                <i class="save icon"></i> {{ _T("Save") }}
            </button>
            <input type="hidden" name="id_group" id="id_group" value="{{ group.getId() }}"/>
            <input type="hidden" name="tab" id="tab" value="{{ tab }}"/>
            {% include "components/forms/csrf.html.twig" %}
            {% endif %}
            {% if can_export %}
                <a href="{{ url_for("pdf_groups", {"id": group.getId()}) }}" class="ui labeled icon button tooltip" title="{{ _T("Current group (and attached people) as PDF") }}">
                    <i class="file pdf red icon" aria-hidden="true"></i>
                    {{ _T("Group PDF") }}
                </a>
            {% endif %}
            {% if login.isAdmin() or login.isStaff() %}
                <a class="ui labeled icon button delete" id="delete" href="{{ url_for("removeGroup", {"id": group.getId()}) }}">
                    <i class="trash alt red icon" aria-hidden="true"></i>
                    {{ _T("Delete") }}
                </a>
            {% endif %}
        </div>
    </div>
</form>
<script type="text/javascript">
    $(function() {
        var _btnaid = '#newgroup';
        var _btnuid = '#btnusers_small';
        var _btnmid = '#btnmanagers_small';

        {# Tabs #}
        $('.menu.tabbed .item').tab({
            onFirstLoad: function(tabPath) {
{% if login.isAdmin() or login.isStaff() %}
                if (tabPath == 'group_managers') {
                    $(_btnaid).addClass('displaynone');
                    $(_btnuid).addClass('displaynone');
                } else if ( tabPath == 'group_members' ) {
                    $(_btnaid).addClass('displaynone');
                    $(_btnmid).addClass('displaynone');
                } else if ( tabPath == 'group_information' ) {
                    $(_btnuid).addClass('displaynone');
                    $(_btnmid).addClass('displaynone');
                }
{% endif %}
            },
            onVisible: function(tabPath) {
                document.getElementById('tab').value = tabPath;
{% if login.isAdmin() or login.isStaff() %}
                if ( tabPath == 'group_managers'  ) {
                    $(_btnmid).removeClass('displaynone');
                    $(_btnaid).addClass('displaynone');
                    if ( !$(_btnuid).hasClass('displaynone') ) {
                        $(_btnuid).addClass('displaynone');
                    }
                } else if ( tabPath == 'group_members' ) {
                    $(_btnuid).removeClass('displaynone');
                    $(_btnaid).addClass('displaynone');
                    if ( !$(_btnmid).hasClass('displaynone') ) {
                        $(_btnmid).addClass('displaynone');
                    }
                } else if ( tabPath == 'group_information' ) {
                    $(_btnaid).removeClass('displaynone');
                    $(_btnuid).addClass('displaynone');
                    $(_btnmid).addClass('displaynone');
                }
{% endif %}
            }
        }).tab('change tab', '{{ tab }}');
    });
</script>
