#{param name=projects/}
#{param name=userSetting/}
#{param name=currentProjectId /}

<%
import org.exoplatform.services.security.ConversationState;
import org.exoplatform.commons.utils.HTMLEntityEncoder;

def displayListProjectItem(project, level, encoder, identity, colors) {  	 
    def hasChild = (project.children != null && project.children.size() > 0);
    def hasChildClass = hasChild  ? 'has-child' : '';
	def indent = (level - 1) * 20;
    def isHidden = userSetting.isHiddenProject(project);
    def canEdit = project.canEdit(identity);
    def canView = project.canView(identity);
    def isAllChildHidden = true;
    if (hasChild) {
        for (p in project.children) {
            if (!userSetting.isHiddenProject(p)) {
                isAllChildHidden = false;
            }
        };
    } else {
        isAllChildHidden = false;
    }
%>
    <li class="dropdown project-item ${project.color == '' ? 'no-color' : ''} ${isAllChildHidden ? "all-children-hided" : ""} ${currentProjectId == project.id ? 'active' : ''} " data-projectId="${project.id}" data-hiddenproject="${isHidden}">
        <div class="sub-item" style="padding-left: <%=indent%>px">
            <% if (canView) {%>
                <a class="dropdown-toggle pull-right"
                   data-toggle="dropdown">
                    <i class="uiIconRightMenu uiIconLightGray"></i>
                </a>
                <div class="dropdown-menu uiDropdownWithIcon" style="left: 100%;top: -10px;">
	        	<span class="arrowLeft" style = "top: 22px;"></span>
	        	<ul class="uiDropdownMenu project-menu" data-projectId="${project.id}">
                    <%if (canEdit) { %>
                        <li><a href="#" class="edit-project"><i class="uiIconEdit uiIconLightGray"></i>&{label.edit}</a></li>
                        <li><a href="#" class="share-project"><i class="uiIconShare uiIconLightGray"></i>&{label.share}</a></li>
                        <li><a class="clone-project" data-projectId="${project.id}" href="#"><i class="uiIconCloneNode uiIconLightGray"></i>&{label.clone}</a></li>
                    <%}%>

		            <li>
                        <a href="javascript:void(0)" class="actionHideProject">
                            <span class="label-show"><i class="uiIconShowProject uiIconLightGray"></i>&{label.show}</span>
                            <span class="label-hide"><i class="uiIconHide uiIconLightGray"></i>&{label.hide}</span>
                        </a>
                    </li>

                    <%if (canEdit) { %>
                        <li><a class="delete-project" href="#"><i class="uiIconTrash uiIconLightGray"></i>&{label.delete}</a></li>
                        <li><a class="new-project" data-projectId="${project.id}" href="#"><i class="uiIconAddProject uiIconLightGray"></i>&{label.addProject}</a></li>
                        <li class="noColor changeProjectColor" data-color="">&{label.noColor}</li>
                        <li class="calendarTableColor">
                            <%
                                for (def c in colors) { %>
                                    <div>
                                        <%for (def color in c) {%>
                                        <a class="${color} colorCell changeProjectColor" data-color="${color}" href="#" style="display: block;"><i class="${project.color == color ? "uiIconTick" : ""}"></i></a>
                                        <%}%>
                                    </div>
                                <%}
                            %>
                        </li>
                    <%}%>
		        </ul>
		    </div>
            <%}%>
	        <a href="javascript:void(0)" class="${project.color == null ? '' : encoder.encodeHTMLAttribute(project.color)} colorPie"><span class=""></span></a>
            <span>
                <a href="javascript:void(0);" class="collapseSubProject">
                    <i class="${hasChild ? "uiIconArrowDownMini uiIconLightGray" : ""}"></i>
                </a>
                <a href="javascript:void(0);" class="project-name" data-id="${project.id}" data-canEdit="<%=project.canEdit(identity)%>" data-canView="<%=project.canView(identity)%>"
                        style="vertical-align: middle;display:inline-block;">
                    ${encoder.encode(project.name)}
                </a>
            </span>
		</div>
        <% if (project.children != null && project.children.size() > 0) {
            displayListProjects(project.children, project.getId(), level, encoder, identity, colors);
        }%>
    </li>
<% }


def displayListProjects(projects, parentId, level, encoder, identity, colors) { %>
    <ul class="list-projects projectTree" parentId="${parentId}">
        <%
            def allProjectAreHidden = true;
        %>
        <%if(projects.size() == 0) {
            allProjectAreHidden = false; 
        %>
        <li class="no-project center muted">
            &{label.noProject}
        </li>
        <%} else {
        	level++;
        	for (def project in projects) {
                if (!userSetting.isHiddenProject(project)) allProjectAreHidden = false;
            	displayListProjectItem(project, level, encoder, identity, colors);
        	}
        	level--;
        }
        %>
        <% if (parentId == 0) {%>
        <li class="no-project center muted ${allProjectAreHidden ? "all-project-hidden" : "not-all-project-hidden"}">
            &{label.allProjectAreHidden}
        </li>
        <%}%>
    </ul>
<%}%>

<%
	 def encoder = HTMLEntityEncoder.getInstance();
	 def identity = ConversationState.getCurrent().getIdentity();
	 def colors = [
                 ['asparagus', 'munsell_blue', 'navy_blue', 'purple', 'red', 'brown'],
                 ['laurel_green', 'sky_blue', 'blue_gray', 'light_purple', 'hot_pink', 'light_brown'],
                 ['moss_green', 'powder_blue', 'light_blue', 'pink', 'Orange', 'gray'],
                 ['green', 'baby_blue', 'light_gray', 'beige', 'yellow', 'plum']
             ];
    displayListProjects(projects, 0, 0, encoder, identity, colors);
%>