#{param name=managers /}
#{param name=participants /}
#{param name=pid /}
#{param name=editingField/}
#{param name=msTypes/}

<%
	import org.exoplatform.commons.utils.HTMLEntityEncoder;

	def encoder = HTMLEntityEncoder.getInstance();
%>

<!-- share-project -->
<div class="sharePrjDialog modal hide fade in uiPopup" data-projectid="${pid}" tabindex="-1" role="dialog" aria-labelledby="shareProjectLabel" aria-hidden="true">
  <div class="popupHeader clearfix">
        <a onclick="" title="Close Window" data-dismiss="modal" aria-hidden="true" class="uiIconClose pull-right"></a>
        <div id="shareProjectLabel" class="PopupTitle popupTitle">&{popup.shareProject}</div>
   </div>
   <div class="PopupContent popupContent">
    <div class="hidden listMembershipType">
        <ul class="dropdown-menu">
            <% for (def type in msTypes) {%>
            <li><a href="javascript:void(0)" data-mstype="${type}"><% if (type == '*') {%> &{label.any} <%} else {%> ${type} <%}%></a></li>
            <%}%>
        </ul>
    </div>
  	<table class="uiGrid table table-hover table-striped" cellspacing="0" cellpadding="0" summary="" >
        <tr>
            <th>&{label.permission}</th>
            <th>&{label.userOrGroup}</th>
        </tr>
        <tr>
            <td>
                <p><strong>&{label.manager}</strong></p>
                <div class="des">&{label.manager.description}</div>
            </td>
            <td class="manager" data-type="manager">
                <!-- this is result after choice permision-->
                <div class="permission-display ${editingField == "manager" ? "hide" : ""}">
                    <div class="pull-right edit-action">
                        <a href="javascript:void(0)" class="actionIcon action-edit-user actionEditPermission" data-original-title="&{label.edit}" data-toggle="tooltip" rel="tooltip" data-placement="bottom">
                            <i class="uiIconEdit uiIconLightGray"></i>
                        </a>
                    </div>
                    <div class="list-users">
                        <% if (managers.size() == 0) {%>
                            <div class="muted no-assisement">&{label.noAssignment}</div>
                        <%} else {%>
                            <% for (def permission in managers) {%>
                                <p class="item"><strong>${encoder.encode(permission.displayName)}</strong> (${permission.id})</p>
                            <%}%>
                        <%}%>
                    </div>
                </div>
                <!-- this is mention action-->
                <div class="action-mentions ${editingField == "manager" ? "" : "hide"}">
                    <div class="exo-mentions" >
                        <div class="permission-owner clearfix">
                            <!-- display mention-->
                            <div class="replaceTextArea editable" g_editable="true" data-mentions="true" style="overflow: visible">
                                <% if (managers.size() > 0) {%>
                                    <% for (def permission in managers) {
                                        if (permission.type == 2) {%>
                                            <div class="groupMembership" data-permission="${permission.id}">
                                                <span data-toggle="dropdown" class="dropdown-toggle" ><% if (permission.membershipType == '*') {%> &{label.any} <%} else {%> ${permission.membershipType} <%}%> <i  class="uiIconArrowDownMini uiIconLightGray"></i></span>
                                                <ul class="dropdown-menu">
                                                    <% for (def type in msTypes) {%>
                                                        <li><a href="javascript:void(0)" data-mstype="${type}"><% if (type == '*') {%> &{label.any} <%} else {%> ${type} <%}%></a></li>
                                                    <%}%>
                                                </ul>
                                                &{label.in}
                                                <span >${permission.groupName} <a href="javascript:void(0)" class="removePermission removeValue"><i class="uiIconClose uiIconLightGray"></i></a></span>
                                            </div>
                                        <%} else {%>
                                            <span data-permission="${permission.id}">${encoder.encode(permission.displayName)}<a href="javascript:void(0)" class="removePermission removeValue"><i  class="uiIconClose uiIconLightGray"></i></a></span>
                                        <%}
                                    }%>
                                <%}%>
                                <!-- CURSOR POINTER-->
                                <div class="cursorText">
                                    <input type="text"/>
                                </div>
                            </div>

                            <a href="javascript:void(0);" data-backdrop="false" rel="tooltip" data-placement="bottom" title="" class="actionIcon openUserSelector" data-original-title="&{popup.selectUser}">
                                <i class="uiIconUser uiIconLightGray"></i>
                            </a>
                            <a  href="javascript:void(0);"  data-backdrop="false" data-toggle="modal" rel="tooltip" data-placement="bottom" title="" class="actionIcon openGroupSelector" data-original-title="&{popup.selectGroupOrMembership}">
                                <i class="uiIconGroup uiIconLightGray"></i>
                            </a>
                            <a href="javascript:void(0)" class="btn savePermission" type="button">&{label.save}</a>
                        </div>
                        <!-- dropdow for mention -->
                        <div class="autocomplete-menu" style="display: none;">
                            <ul>
                                <li class="data">
                                    <div class="avatarSmall">
                                        <img src="/eXoSkin/skin/images/system/UserAvtDefault.png">
                                    </div>
                                    Roo<strong>t</strong> Roo<strong>t</strong> (root)
                                    <span class="user-status"><i class="uiIconColorCircleOrange"></i></span>
                                </li>
                                <li class="data">
                                    <div class="avatarSmall">
                                        <img src="/eXoSkin/skin/images/system/UserAvtDefault.png">
                                    </div>
                                    Roo<strong>t</strong> Roo<strong>t</strong> (root)
                                    <span class="user-status"><i class="uiIconColorCircleGreen"></i></span>
                                </li>
                                <li class="data">
                                    <div class="avatarSmall">
                                        <img src="/eXoSkin/skin/images/system/UserAvtDefault.png">
                                    </div>
                                    Roo<strong>t</strong> Roo<strong>t</strong> (root)
                                    <span class="user-status"><i class="uiIconColorCircleRed"></i></span>
                                </li>
                                <li class="data active">
                                    <div class="avatarSmall">
                                        <img src="/eXoSkin/skin/images/system/UserAvtDefault.png">
                                    </div>
                                    <strong>t</strong>rung (trung)
                                    <span class="user-status"><i class="uiIconColorCircleGray"></i></span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <p><strong>&{label.participant}</strong></p>
                <div class="des">&{label.participant.description}</div>
            </td>
            <td class="manager" data-type="participant">
                <!-- this is result after choice permision-->
                <div class="permission-display ${editingField == "participant" ? "hide" : ""}">
                    <div class="pull-right edit-action">
                        <a href="javascript:void(0)" class="actionIcon action-edit-user actionEditPermission" data-original-title="&{label.edit}" data-toggle="tooltip" rel="tooltip" data-placement="bottom">
                            <i class="uiIconEdit uiIconLightGray"></i>
                        </a>
                    </div>
                    <div class="list-users">
                        <% if (participants.size() == 0) {%>
                        <div class="muted no-assisement">&{label.noAssignment}</div>
                        <%} else {%>
                        <% for (def permission in participants) {%>
                        <p class="item"><strong>${permission.displayName}</strong> (${permission.id})</p>
                        <%}%>
                        <%}%>
                    </div>
                </div>
                <!-- this is mention action-->
                <div class="action-mentions ${editingField == "participant" ? "" : "hide"}">
                    <div class="exo-mentions" >
                        <div class="permission-owner clearfix">
                            <!-- display mention-->
                            <div class="replaceTextArea editable" g_editable="true" data-mentions="true" style="overflow: visible">
                                <% if (participants.size() > 0) {%>
                                <% for (def permission in participants) {
                                    if (permission.type == 2) {%>
                                <div class="groupMembership" data-permission="${permission.id}">
                                    <span data-toggle="dropdown" class="dropdown-toggle" > <% if (permission.membershipType == '*') {%> &{label.any} <%} else {%> ${permission.membershipType} <%}%> <i  class="uiIconArrowDownMini uiIconLightGray"></i></span>
                                    <ul class="dropdown-menu">
                                        <% for (def type in msTypes) {%>
                                        <li><a href="javascript:void(0)" data-mstype="${type}"><% if (type == '*') {%> &{label.any} <%} else {%> ${type} <%}%></a></li>
                                        <%}%>
                                    </ul>
                                    &{label.in}
                                    <span >${permission.groupName} <a href="javascript:void(0)" class="removePermission removeValue"><i class="uiIconClose uiIconLightGray"></i></a></span>
                                </div>
                                <%} else {%>
                                <span data-permission="${permission.id}">${permission.displayName}<a href="javascript:void(0)" class="removePermission removeValue"><i  class="uiIconClose uiIconLightGray"></i></a></span>
                                <%}
                                }%>
                                <%}%>
                                <!-- CURSOR POINTER-->
                                <div class="cursorText">
                                    <input type="text"/>
                                </div>
                            </div>

                            <a href="javascript:void(0);" data-backdrop="false" rel="tooltip" data-placement="bottom" title="" class="actionIcon openUserSelector" data-original-title="&{popup.selectUser}">
                                <i class="uiIconUser uiIconLightGray"></i>
                            </a>
                            <a  href="javascript:void(0);"  data-backdrop="false" data-toggle="modal" rel="tooltip" data-placement="bottom" title="" class="actionIcon openGroupSelector" data-original-title="&{popup.selectGroupOrMembership}">
                                <i class="uiIconGroup uiIconLightGray"></i>
                            </a>
                            <a href="javascript:void(0)" class="btn savePermission" type="button">&{label.save}</a>
                        </div>
                        <!-- dropdow for mention -->
                        <div class="autocomplete-menu" style="display: none;">
                            <ul>
                                <li class="data">
                                    <div class="avatarSmall">
                                        <img src="/eXoSkin/skin/images/system/UserAvtDefault.png">
                                    </div>
                                    Roo<strong>t</strong> Roo<strong>t</strong> (root)
                                    <span class="user-status"><i class="uiIconColorCircleOrange"></i></span>
                                </li>
                                <li class="data">
                                    <div class="avatarSmall">
                                        <img src="/eXoSkin/skin/images/system/UserAvtDefault.png">
                                    </div>
                                    Roo<strong>t</strong> Roo<strong>t</strong> (root)
                                    <span class="user-status"><i class="uiIconColorCircleGreen"></i></span>
                                </li>
                                <li class="data">
                                    <div class="avatarSmall">
                                        <img src="/eXoSkin/skin/images/system/UserAvtDefault.png">
                                    </div>
                                    Roo<strong>t</strong> Roo<strong>t</strong> (root)
                                    <span class="user-status"><i class="uiIconColorCircleRed"></i></span>
                                </li>
                                <li class="data active">
                                    <div class="avatarSmall">
                                        <img src="/eXoSkin/skin/images/system/UserAvtDefault.png">
                                    </div>
                                    <strong>t</strong>rung (trung)
                                    <span class="user-status"><i class="uiIconColorCircleGray"></i></span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
  	</table>
    <div class="uiAction uiActionBorder">
      <button class="btn" data-dismiss="modal" aria-hidden="true">&{popup.close}</button>
    </div>	    
  </div>
  <div class="selectorDialog"></div>

  <!-- This is for select group in search user -->
  <div class="groupSelectorForSearchDialog"></div>
</div>
<script type="text/javascript">
    require(['SHARED/jquery', 'taskManagementApp'], function($, taApp) {
        taApp.initTooltip($('.uiPopup.sharePrjDialog'));
    });
</script>









