#{param name=parent/}
#{param name=project/}
#{param name=userMap/}
#{param name=groups/}
#{param name=breadcumbs/}
<%
    import org.exoplatform.services.security.ConversationState;
	 import org.exoplatform.commons.utils.HTMLEntityEncoder;
	
	 def encoder = HTMLEntityEncoder.getInstance();
    def identity = ConversationState.getCurrent().getIdentity();
    def canEdit = project.canEdit(identity);
    def editableClasses = canEdit ? "hoverStatus editableField editable" : "";
%>
<div class="addProject uiPopup modal hide fade" tabindex="-1" role="dialog" aria-hidden="true" data-projectid="${project.id}" data-canedit="${canEdit}">
  <div class="popupHeader clearfix">
  	<a href="#" title="Close Window" data-dismiss="modal" aria-hidden="true" class="uiIconClose pull-right"></a>
  	<div class="PopupTitle popupTitle">
  		<div class="pull-right action-buttons dropdown">
         <a href="#" class="dropdown-toggle actionIconSmall" data-toggle="dropdown"><i class="uiIconArrowDown uiIconLightGray"></i></a>
         <ul class="dropdown-menu">
             <li><a href="#" class="action-clone-project">
                 <i class="uiIconCloneNode uiIconLightGray"></i> &{popup.clone}</a></li>
             <li><a href="#" class="action-delete-project"><i class="uiIconDelete uiIconLightGray"></i> &{popup.delete}</a></li>
         </ul>
     </div>
     <div>&{label.projectOverview}</div>
  	</div>
  </div>
  <div class="PopupContent popupContent">
  
  	<!-- project detail -->
	  <div class="breadcrumbCont uiEditableInline inactive" data-original-title="&{tooltip.clickToEdit}" rel="tooltip" data-placement="bottom">
         <ul class="hoverStatusBlock breadcrumb ${editableClasses}"
             data-name="parent" data-type="ParentProject" data-currentProject="${project.id}" data-value="${parent.id}">
             ${breadcumbs}
         </ul>
     </div>
     <div class="inputName uiEditableInline inactive"
          data-original-title="&{tooltip.clickToEdit}" data-toggle="tooltip" rel="tooltip" data-placement="bottom">
         <div class="hoverStatusBlock projectName ${editableClasses}"
               data-name="name" data-type="text" data-emptytext="&{label.untitledProject}">
             ${encoder.encode(project.name)}
         </div>
     </div>
     <div class="media prjAuthor">
         <div class="pull-left">&{label.manager}</div>
         <div class="media-body">
         <% for (def e in userMap){
             def username = e.key;
             def u = e.value;
         %>
             <a class="avatarSmall" href="<%=u.getUrl()%>"><img alt="avatar" src="<%=u.getAvatar()%>">
             <%=encoder.encode(u.getDisplayName())%>
             </a><br/>
         <%}%>
         <%for (def g : groups) { %>
           <a class="avatarSmall" href="#">
         	${encoder.encode(g)}
           </a><br/>
         <%} %>
         </div>
     </div>
     <div class="prjDescription uiEditableInline inactive" data-original-title="&{tooltip.clickToEdit}" rel="tooltip" data-placement="bottom">
         <div class="hoverStatusBlock ${editableClasses}" data-name="description" data-type="ckeditor">
             ${project.description}
         </div>
     </div>
     <div class="uiGroupBoundCheckBox"><label class="uiCheckbox mg-0-10">
      <input type="checkbox" title="&{message.enableCalendarIntegration}" name="calendarIntegrated" class="checkbox calInteg" <%=project.isCalendarIntegrated() ? "checked" : "" %>>
      <span>&{message.enableCalendarIntegration}</span></label>
     </div>
     <div class="viewInCal" style="display: none">
         <i class="uiIconPLFCalendar"></i>
         <a data-placement="bottom" data-toggle="tooltip" href="#" data-original-title="View in Calendar">Sub Project 1</a>
     </div>
  	<!-- project detail -->

   <div class="uiAction uiActionBorder">
	  <button class="btn btn-primary saveLabel" disabled>&{label.save}</button>
	  <button class="btn" data-dismiss="modal" aria-hidden="true">&{popup.close}</button>
   </div>
  </div>
</div>
<script type="text/javascript">
    require(['SHARED/jquery','taskManagementApp'], function($, taApp) {
        taApp.initTooltip($('.uiPopup.addProject'));
    });
</script>