<div id="$uicomponent.id" class="$uicomponent.id">
	<div class="SelectTemplateThumbnailView">
		<div class="SelectTemplateTitle" style="height:25px">
		  <div style="float:left"><%=_ctx.appRes("UISelectDocumentForm.label.selectTemplate")%></div>
		  <div title='<%=_ctx.appRes("UISelectDocumentForm.label.Cancel")%>' class="CancelNewDoc" onclick="<%=uicomponent.event('Cancel');%>"></div>
		  <div title='<%=_ctx.appRes("UISelectDocumentForm.label.ThumbnailView")%>' class="ChangeThumbnailViewIcon" onclick="<%=uicomponent.event('ChangeView', 'ThumbnailView');%>"></div>
		  <div title='<%=_ctx.appRes("UISelectDocumentForm.label.ListView")%>' class="SelectedListViewIcon" onclick="<%=uicomponent.event('ChangeView', 'ListView');%>"></div>
		</div>
		<hr>
		<div class="SelectTemplateArea" style="padding-top:10px; padding-left:40px">	
			<% 
				def templates = uicomponent.getChildrenList();
				if (templates != null) {
				  for (int i = 0; i < templates.size(); i++) {
					  def label = templates.get(i);
					  def contentType = uicomponent.getContentType(label);
					  def actionLink = uicomponent.event("SelectTemplate", contentType);
					  def cssClass = contentType.replace(":", "_") + "16x16Icon";
			%>
			
			<!-- 1 template-->
			<div style="margin-top:10px;">
				<div class="Icon16x16 default16x16Icon $cssClass" style="padding-left:5px; cursor:pointer" onclick="$actionLink"></div>
				<div style ="line-height: 16px; padding-left:5px">
					<a href="javascript:void(0);" onclick="$actionLink">$label</a>
				</div>
			</div>
			<%
				  }
				}
			%>
		</div>
	</div>
	<% 
	  int availablePage = uicomponent.getContentPageIterator().getAvailablePage();
	  if (availablePage > 1) { 
	%>	
	<div class="PageAvailable" pageAvailable='$availablePage'>
		<%_ctx.renderUIComponent(uicomponent.getContentPageIterator())%>
	</div>
  <% } %>
</div>