<%	
	import org.exoplatform.webui.form.UIForm; 
	import org.exoplatform.web.application.JavascriptManager;
	import org.exoplatform.webui.core.UIDropDownControl;
	
	def selectedIconSet = uicomponent.getSelectedIconSet();
	if(selectedIconSet.getName().equals("null")) {
		selectedIconSet = uicomponent.getSelectedCategory().getCategory().get(0);
	} 
	def listIconSet = uicomponent.getListIconSet();
	String selectedIcon = uicomponent.getSelectedIcon();		
	UIForm form = uicomponent.getParent();
%>

<div class="uiItemSelector uiFormInputIconSelector clearfix">
	<input type="hidden" name="${uicomponent.name}" value ="$selectedIcon"/>
	<%/*Begin Item List*/%>
	<div class="itemListContainer pull-left uiBox">
		<h5 class="title"><%uicomponent.renderChild(UIDropDownControl.class);%></h5>
		<ul class="itemList uiContentBox">
			<%
				for(iconset in listIconSet) { 
					String item = "";
					String iconArrow = "uiIconArrowRight uiIconLightGray";
					String setName = iconset.getName();
	
					if(setName == selectedIconSet.getName()) {
						item = "selectedItem";
						iconArrow = "uiIconArrowDown uiIconLightGray";
					}
					String submitEvent = form.event('ChangeIconCategory', setName);							
				%>	
					<li class="item $item" onclick="$submitEvent">
                  <a href="javascript:void(0);" class="itemTitle">
						   <i class="$iconArrow"></i>
						   <%=_ctx.appRes("UIFormInputIconSelector.label." + setName)%>
                  </a>
					</li>
				<%}%>
		</ul>
	</div>
	<%/*End Item List*/%>
		
	<%/*Begin Item Detail List*/%>
	<div class="itemDetailList uiBox">
		<div class="title clearfix">
			<h6 class="pull-left"><%=_ctx.appRes("UIFormInputIconSelector.label.iconPreview")%></h6>
			<a class="btn pull-right" href="javascript:void(0);" onclick="<%=form.event('SelectIcon', "Default");%>"><%= _ctx.appRes(uicomponent.getParent().getId() + "." + uicomponent.getId() + ".title.SetDefault") %></a>
		</div>
		<%/*Template 1*/%>
		<div class="uiContentBox">
			<%
				for(iconset in listIconSet) {
					String display = "none";
					if(iconset == selectedIconSet) display = "block";
					def icons = uicomponent.getListIcon(iconset);
				%>
					
					<div class="iconSelector categoryContainer" style="display:$display">
						
						<%
							for(icon in icons) {			 
								String submitEvent = form.event('SelectIcon', icon);						 
								String cssClass = "";											
								if(icon.equalsIgnoreCase(selectedIcon)) {
									cssClass = "selectedIcon"
								}
							%>																								
								<a class="icon $cssClass" onclick="$submitEvent">
									<i class=" <%=icon%>" title="Click to select this icon"></i>
								</a>
							<%}%> 
						
					</div>
					
				<%}%>
				<div class="selectedIconInfo">
						<%=_ctx.appRes("UIFormInputIconSelector.label.iconName")%>:
						<span class="itemValue">$selectedIcon</span>
				</div>
			<%/*End Template 1*/%>
		</div>
		<%/*End Item Detail List*/%>
	</div>
</div>
