<%
  import  org.exoplatform.webui.form.UIForm;

	options = uicomponent.getItemCategories();
	UIForm form = uicomponent.getAncestorOfType(UIForm.class);	
	
	def rcontext = _ctx.getRequestContext(); 
	rcontext.getJavascriptManager().require("SHARED/selectors", "selectors").require("SHARED/uiForm")
			  .addScripts("selectors.UIItemSelector.init('#$uicomponent.id .itemList > li',null,true);");
%>
<div class="uiItemSelector clearfix uiFormInputItemSelector" id="$uicomponent.id">	
  <input type="hidden" name="$uicomponent.name" value ="">
		<%/*Begin ItemList*/%>
		<div class="itemListContainer pull-left uiBox">
		    <h5 class="title"><%=_ctx.appRes(uicomponent.getName() + ".title")%></h5>
				<ul class="itemList uiContentBox">
					<%
						for(opt in options) { 
							String itemSelected = "";
							String setHiddenValue = "eXo.webui.UIForm.setHiddenValue('$form.name', '$uicomponent.name','$opt.name')";
							String submitEvent = "eXo.webui.UIForm.submitEvent('$form.id','SelectItemOption', '')";
							if (opt.isSelected()) itemSelected = "selectedItem" ;
					 %>
					    <li class="$itemSelected item">
								<a href="javascript:void(0);" class="itemTitle">
									<i class="<%=opt.isSelected() ? "uiIconArrowDown" : "uiIconArrowRight";%> uiIconLightGray"></i><%=_ctx.appRes(opt.getName() + ".label")%>
								</a>
								<div class="extraActions" style="display: none">$setHiddenValue;$submitEvent</div>
							</li>
					<%}%>
				</ul>
		</div>
		<%/*End ItemList*/%>
					
		<%/*Begin ItemDetailList*/%>
		<div class="itemDetailList uiBox">
			  <h5 class="title"><%=_ctx.appRes(uicomponent.getName() + ".left.title")%></h5>
			<%		 
				for(opt in options) {
					boolean Selected = true;
					String display = "none";
					temps = opt.getSelectItemOptions();
					if(opt.isSelected()) display = "block";
			%>
					<div class="itemDetail uiContentBox" style="display: $display;">
					<%							 
						for(temp in temps){							 
						 String label = "";
						 if(temp != null) {
							 label = temp.getLabel();
						 }
					%>
						<div class="itemContainer">
								<div title="$label" class="<%=temp.getIcon();%>Image"><span></span></div>
						</div>
					<%}%>
					</div> 
			<%}%>
		
		</div>	
		<%/*End ItemDetailList*/%>			
</div>
