<%import org.exoplatform.ecm.webui.utils.Utils ;%>
<%
  String[] arrValues = uicomponent.arrUploadValues() ;
  String[] arrLabel = ["fileName", "nodeName", "fileSize", "mimeType"] ;
%>
<div class="$uicomponent.id">
	<div class="GridTitleBar">
		<table>
			<tr>
				<td>
				  <div class="GridTitleLeftBar">
				    <div class="GridTitleRightBar">
				      <div class="GridTitleMiddleBar"><%=_ctx.appRes("UIUploadContent.title.uploaded-file")%></div>
				    </div>
				  </div>
				</td>
			</tr>
		</table>
	</div>
	<table class="UIGrid" cellspacing="0" borderspacing="0" style="width: 99%;">
	  <col width="40px;"><col><col><col><col>
	  <thead>
	    <tr>
	      <th></th>
	      <% for(label in arrLabel) { %>
	        <th><%=_ctx.appRes("UIUploadContent.label." + label)%></th>
	      <% } %>
	    </tr>
	  </thead>
	  <tbody>
	    <tr>
	      <td><div class="ItemIcon16x16 <%=Utils.getNodeTypeIcon(uicomponent.getUploadedNode(), "16x16Icon")%>"></div><span></span></td>
	      <%
	        for(value in arrValues) {
	          String subValue = value ; 
	          if(value.length() > 20) subValue = value.substring(0,20) + "..." ;
	      %>
	          <td style="text-align: center;overflow:hidden;"><span title="$value"><%=subValue%></span></td>
	      <%}%>
	    </tr>
	  </tbody>
	</table>
	<div class="GridTitleBar">
		<table>
			<tr>
				<td>
				  <div class="GridTitleLeftBar">
				    <div class="GridTitleRightBar">
				      <div class="GridTitleMiddleBar"><%=_ctx.appRes("UIUploadContent.title.external-metadata")%></div>
				    </div>
				  </div>
				</td>
			</tr>
		</table> 
	</div>
	<table class="UIGrid" cellspacing="0" borderspacing="0" style="width: 99%;">
	  <col width="50px;"><col><col width="50px;">
	  <thead>
	    <tr>
	      <th></th>
	      <th><%=_ctx.appRes("UIUploadContent.title.metadata-name")%></th>
	      <th><%=_ctx.appRes("UIUploadContent.title.action")%></th>
	    </tr>
	  </thead>
	  <tbody>
      <%for(nodeType in uicomponent.getExternalList()) {%>
		    <tr>
		      <td>
		        <%String iconNodeType = nodeType.replace(":", "_") ;%>
		        <div class="default16x16Icon ${iconNodeType}16x16Icon" style="margin:auto"><span></span></div>
		      </td>
		      <td><%=nodeType%></td>
	 	      <td>
	          <a href="<%=uicomponent.event("Edit", nodeType)%>" title="<%=_ctx.appRes("UIUploadContent.tooltip.Edit")%>">
	            <div class="Icon16x16 Edit16x16Icon" style="margin-left:7px;" title="<%=_ctx.appRes("UIUploadContent.tooltip.Edit")%>"><span></span></div>
	          </a>
	 	      </td>
		    </tr>
      <%}%>
	  </tbody>
	</table>
</div>