<%
  String[] hiddenField1 = ["jcrPath=/node/exo:image", "nodetype=nt:resource", "visible=false"] ; 
  String[] hiddenField2 = ["jcrPath=/node/exo:image/jcr:encoding", "visible=false", "UTF-8"] ;
  String[] hiddenField3 = ["jcrPath=/node/exo:image/jcr:lastModified", "visible=false"] ;
  uicomponent.addHiddenField("hiddenInput1", hiddenField1) ;
  uicomponent.addHiddenField("hiddenInput2", hiddenField2) ;
  uicomponent.addHiddenField("hiddenInput3", hiddenField3) ;
%>
<div class="UIForm LayoutContent">
	<% uiform.begin() %>
  <div class="HorizontalLayout">
  	<table class="UIFormGrid">	  
      <tr>                        
        <td class="FieldLabel"><%=_ctx.appRes("Sample.dialog.label.title")%></td>
        <td class="FieldComponent">
          <%
            String[] fieldTitle = ["jcrPath=/node/exo:title", "validate=empty"] ;
            uicomponent.addTextField("title", fieldTitle) ;
          %>
          <script>
          titleField = document.getElementById("title");
          titleField.onchange = function() { eXo.ecm.SELocalization.cleanName(this.value, "name"); } ;
          </script>
        </td>
      </tr>
	    <tr>		          					
	      <td class="FieldLabel"><%=_ctx.appRes("Sample.dialog.label.name")%></td>
	      <td class="FieldComponent">
		      <%
		        String[] fieldName = ["jcrPath=/node", "mixintype=mix:votable,mix:commentable,mix:i18n", "editable=if-null", "validate=empty,name"] ;
		        uicomponent.addTextField("name", fieldName) ;  
		      %>
		    </td>
	    </tr>
	    <%if(!uicomponent.getId().equals("UILanguageDialogForm")){%>
		    <tr>
		      <td class="FieldLabel"><%=_ctx.appRes("Sample.dialog.label.categories")%></td>
		      <td class="FieldComponent">
			      <% 
			        String[] fieldCategories = ["jcrPath=/node/exo:category", "multiValues=true", "reference=true", "editable=false"];
			        uicomponent.addTextField("categories", fieldCategories);
			      %>
			    </td>
			  </tr>
		  <%}%>
		<tr>
        	<td class="FieldLabel"><%=_ctx.appRes("ElementSet.dialog.label.language")%></td>
			<td class="FieldComponent">
			<%
			  String lang = org.exoplatform.portal.webui.util.Util.getPortalRequestContext().getLocale().getLanguage();
			  String[] fieldLang = ["jcrPath=/node/exo:language", "options=en,fr,es,de", lang] ;
			  uicomponent.addSelectBoxField("lang", fieldLang) ;
			%>
			</td>
		</tr>
	    <tr>		          					
	      <td class="FieldLabel"><%=_ctx.appRes("Sample.dialog.label.description")%></td>
	      <td class="FieldComponent">
		      <%
		        String[] fieldDescription = ["jcrPath=/node/exo:description"] ;
		        uicomponent.addTextAreaField("description", fieldDescription) ;
	      	%>
	      </td>
	    </tr>
	    <tr>		          					
	      <td class="FieldLabel"><%=_ctx.appRes("Sample.dialog.label.date")%></td>
	      <td class="FieldComponent">
		      <%
		        String[] fieldDate = ["jcrPath=/node/exo:date", "validate=datetime", "visible=true"] ; 
		        uicomponent.addCalendarField("date", fieldDate) ;
		      %>
		    </td>
	    </tr>
	    <tr>		          					
	      <td class="FieldLabel"><%=_ctx.appRes("Sample.dialog.label.date-time")%></td>
	      <td class="FieldComponent">
		      <%
		        String[] fieldDateTime = ["jcrPath=/node/exo:datetime", "options=displaytime", "validate=datetime", "visible=true"] ;
		        uicomponent.addCalendarField("datetime", fieldDateTime) ;  
		      %>
		    </td>
	    </tr>
	    <tr>		          					
	      <td class="FieldLabel"><%=_ctx.appRes("Sample.dialog.label.upload-image")%></td>
	      <td class="FieldComponent">
		      <%
		      	def image = "image";
		        if(uicomponent.isEditing()) { 
							def curNode = uicomponent.getNode();
							if (curNode.hasNode("exo:image")) {
								def imageNode = curNode.getNode("exo:image") ;
								if (imageNode.getProperty("jcr:data").getStream().available() > 0 && (uicomponent.findComponentById(image) == null)) {
									def imgSrc = uicomponent.getImage(curNode, "exo:image");
									def actionLink = uicomponent.event("RemoveData", "/exo:image");
						%>		
									<div>
										<image src="$imgSrc" width="100px" height="80px"/>
										<a href="$actionLink">
											<img src="/eXoResources/skin/DefaultSkin/background/Blank.gif" alt="" class="ActionIcon Remove16x16Icon"/>
										</a>
									</div>
						<%
								} else {
					        String[] fieldImage = ["jcrPath=/node/exo:image/jcr:data"] ;
					        uicomponent.addUploadField(image, fieldImage) ;								
								}
							}
						}	else {
			        String[] fieldImage = ["jcrPath=/node/exo:image/jcr:data"] ;
			        uicomponent.addUploadField(image, fieldImage) ;
						}
		      %>
		    </td>
	    </tr>
	    <tr>		          					
	      <td class="FieldLabel"><%=_ctx.appRes("Sample.dialog.label.mime-type")%></td>
	      <td class="FieldComponent">
		      <%
		        String[] fieldMimeType = ["jcrPath=/node/exo:image/jcr:mimeType",  "image/gif", "options=image/gif,image/jpeg,image/png"] ;
		        uicomponent.addSelectBoxField("mimetype", fieldMimeType) ;
		      %>
		    </td>
	    </tr>
	    <tr>		          					
	      <td class="FieldLabel"><%=_ctx.appRes("Sample.dialog.label.summary")%></td>
	      <td class="FieldComponent">
		      <%
		        String[] fieldSummary = ["jcrPath=/node/exo:summary"] ;
		        uicomponent.addTextAreaField("summary", fieldSummary) ;        
		      %>
		    </td>
	    </tr>
	    <tr>		          					
	      <td class="FieldLabel"><%=_ctx.appRes("Sample.dialog.label.content")%></td>
	      <td class="FieldComponent">
		      <%
		        String[] fieldContent = ["jcrPath=/node/exo:content"] ;
		        uicomponent.addTextAreaField("content", fieldContent) ;
		      %>
		    </td>
      </tr>
	  </table>
		<%/* start render action*/%>
		<%uiform.processRenderAction()%>
		<%/* end render action*/%>
  </div>
  <% uiform.end() %>
</div>