#{param name=groups /}
#{param name=membershipTypes /}
#{param name=type /}
#{param name=groupOnly/}
<%
	import org.exoplatform.commons.utils.HTMLEntityEncoder;

    def renderGroup(userGroup, explained) {
        def encoder = HTMLEntityEncoder.getInstance();
        def hasChildren = (userGroup.children.size() > 0);
        def linkClasses = '';
        if (hasChildren) {
            if (explained) {
                linkClasses = 'uiIconNode explainedIcon';
            } else {
                linkClasses = 'uiIconNode collapseIcon';
            }
        }
%>
        <li class="node ${explained ? "explained" : "collapsed"}">
            <a href="javascript:void(0);" data-groupid="${userGroup.id}" data-displayname="${encoder.encode(userGroup.displayName)}" class="${linkClasses}"><i class="uiIconGroup uiIconLightGray"></i>&nbsp;${encoder.encode(userGroup.displayName)}</a>
            <% if (hasChildren) {%>
            <ul class="childrenContainer nodeGroup">
                <% for (def g in userGroup.children) { renderGroup(g, false) }%>
            </ul>
            <%}%>
        </li>
    <%}
%>
<!-- selectGroupModal -->
<div class="groupSelectorDialog modal hide fade in uiPopup" role="dialog" data-type="${type}" >
    <div class="popupHeader clearfix">
        <a onclick="" title="Close Window" class="uiIconClose pull-right close"></a>
        <h3 id="shareProjectLabel" class="PopupTitle popupTitle">&{label.selectPermission}</h3>
    </div>
    <div class="PopupContent popupContent">
        <div id="UIGroupSelector" class="uiGroupSelector uiGroupMembershipSelector">
            <div class="uiGrayLightBox uiBox noRounded ">
                <ul class="breadcrumb">
                    <li>
                        <i class="uiIconTree uiIconLightGray"></i>
                    </li>
                    <!--<li class="">
                        <a href="javascript:void(0);">organization</a>
                        <i class="uiIconArrowRightMini uiIconLightGray"></i>
                    </li>
                    <li class="active">
                        <a  href="javascript:void(0);">management</a>
                    </li>-->
                </ul>
            </div>

            <div class="row-fluid">
                <div class="span6">
                    <div class="uiBox selectGroup noRounded">
                        <h6 class="title">&{popup.browseAndSelectGroup}</h6>
                        <div class="uiTrees scrollArea">
                            <div class="treeContainer jsContainer">
                                <ul class="nodeGroup">
                                    <% for (def g in groups) { renderGroup(g, false) }%>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="span6">
                    <div class="uiBox noRounded childGoup">
                        <h6 class="title">&{popup.selectMembership}</h6>
                        <div class="uiContentBox">
                            <ul>
                                <% if (groupOnly) {%>
                                    <li>
                                        <span class="uiIconMiniArrowRight"></span>
                                        <a title="Select this group" data-membershiptype="" href="javascript:void(0);">&{popup.selectThisGroup}</a>
                                    </li>
                                <%} else for (def mst in membershipTypes) {%>
                                    <li>
                                        <span class="uiIconMiniArrowRight"></span>
                                        <a title="${mst}" data-membershiptype="${mst}" href="javascript:void(0);">${mst}</a>
                                    </li>
                                <%}%>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>