<%
	import org.exoplatform.web.application.JavascriptManager;

	def categories = uicomponent.getCategories();
	def selectedCategory = uicomponent.getSelectedCategory();
	
	def rcontext = _ctx.getRequestContext();
	JavascriptManager jsManager = rcontext.getJavascriptManager();
	jsManager.require("SHARED/portalDragDrop", "portalDragDrop").addScripts("portalDragDrop.init(['DragObjectPortlet']);");
%>	
<div class="uiContainerList" id="$uicomponent.id">
	<div class="accordion verticalTabStyle1">
 		<% 
 			String cTab, cName, description, displayName;
 			boolean isSelected = false;
			for(category in categories) { 					 
				cName	= category.getName();
				displayName =category.getLabel();
				if(displayName == null || displayName.length() < 1 ) displayName = cName;
				if(cName == selectedCategory.getName()) {
					isSelected = true;
					cTab = "expaned";
				}else {
					isSelected = false;
					cTab = "collapsed";
				}
		%>				 				
 		<div class="accordion-group">
 		  <div class="accordion-heading">
				<div class="accordion-toggle $cTab" onclick="<%= uicomponent.event("SelectCategory", cName) %>">
					<a title="<%= displayName %>"><i class="<%=isSelected ? "uiIconArrowDown" : "uiIconArrowRight" %> pull-right uiIconLightGray"></i>
						<%= _ctx.appRes("ContainerOptions.Category." + displayName) %>
					</a>
				</div>
			</div>	
			<div style="position: static" class="accordion-body collapse <%=isSelected ? "in" : ""%>">		
		<% if(isSelected) { 
				for(container in category.getSelectItemOptions()) {
					String setIcon = container.getIcon();
					String setLabel = container.getLabel();
					String title = _ctx.appRes("ContainerOptions.Item." + setLabel);
			%>
			  <div class="accordion-inner clearfix DragObjectPortlet" id="$setLabel">
					<div class="$setIcon">
						<div class="tabLabel" title="$title">$title</div>
					</div>
				</div>
			<% } %>	
		<% } %>
		  </div>
		</div>
	<% } %>									
	</div>	
</div>