<%
  import org.exoplatform.wcm.webui.Utils;
  import java.net.URLDecoder;
  
  def rcontext = _ctx.getRequestContext();
  String portletId = Utils.getRealPortletId(rcontext);
  def quickEditingBlockId = portletId + "-QuickEditingBlock";
  def jsManager = rcontext.getJavascriptManager();
  def advancedBlockDisplay = "block";
  def advancedLinkDispplay = "none";
  jsManager.importJavascript("eXo.wcm.frontoffice.private.CLV", "/eXoWCMResources/javascript");
  jsManager.addJavascript("eXo.ecm.CLV.checkModeViewer();");
  jsManager.addJavascript("eXo.ecm.CLV.checkContextualFolderInput();");
  def showFolderContexttual = "";
%>
<div class="UIForm $uicomponent.id">
  <%
    uiform.begin()
      %>
      <div class="FormContainer">
        <fieldset class="fieldsetPreferences">
          <legend class="StyleLegend"><%= _ctx.appRes("UICLVConfig.label.ContentSelectionBlock") %></legend>
          <table class="UIFormGrid">
            <tr>
              <td class="FieldLabel"><%=uicomponent.getLabel(uicomponent.DISPLAY_MODE_FORM_RADIO_BOX_INPUT) %></td>
              <td class="FieldComponent" colspan="3"><% uiform.renderField(uicomponent.DISPLAY_MODE_FORM_RADIO_BOX_INPUT) %></td>
              
              <td class="tdShowHelp">
                <div class="IconInContextHelp ShowHelpIcon" id="ModeSelectionHelp" onmouseover="eXo.ecm.WCMUtils.showInContextHelp('ModeSelectionHelp', 'true')" onmouseout="eXo.ecm.WCMUtils.showInContextHelp('ModeSelectionHelp', 'false')">
                    <div class="InContextHelpContent">                    
                      <div class="InContextHelpPopup">
                        <div id="ModeSelectionHelpID" class="LeftInContextHelpPopup">
							<%= _ctx.appRes("UICLVConfig.help.ModeSelectionHelp") %> 
                        </div>
                      </div>                      
                    </div>
                </div>
              </td>
            </tr>
            <tr>
              <td class="FieldLabel"><%=uicomponent.getLabel(uicomponent.ITEM_PATH_FORM_INPUT_SET) %></td>
              <td class="FieldComponent" <% if (uicomponent.getSavedPath() != null) { %>title="<%=uicomponent.getSavedPath()%>" <% }%> colspan="3"><% uiform.renderField(uicomponent.ITEM_PATH_FORM_INPUT_SET) %></td>
              <td class="tdShowHelp">
                <div class="IconInContextHelp ShowHelpIcon" id="FolderPathHelp" onmouseover="eXo.ecm.WCMUtils.showInContextHelp('FolderPathHelp', 'true')" onmouseout="eXo.ecm.WCMUtils.showInContextHelp('FolderPathHelp', 'false')">
					<div class="InContextHelpContent">                    
                      <div class="InContextHelpPopup">
                        <div id="FolderPathHelpID" class="LeftInContextHelpPopup">
							<%= _ctx.appRes("UICLVConfig.help.FolderPathHelp") %> 
                        </div>
                      </div>                      
                    </div>
                </div>
              </td>
            </tr>
            <tr class="OrderBlock">
              <td class="FieldLabel"><%=uicomponent.getLabel(uicomponent.ORDER_BY_FORM_SELECT_BOX) %></td>
              <td class="FieldComponent" colspan="4"><% uiform.renderField(uicomponent.ORDER_BY_FORM_SELECT_BOX) %></td>
            </tr>
            <tr class="OrderBlock">
              <td class="FieldLabel">&nbsp;</td>
              <td class="FieldComponent" colspan="4"><% uiform.renderField(uicomponent.ORDER_TYPE_FORM_RADIO_BOX_INPUT) %></td>
            </tr>
            <% 
              List<String> contents = uiform.getItems();
              if (contents != null && !contents.isEmpty()) {
                %>
                  <table class="UIContentGrid">
                    <thead>
                      <tr>
                        <th><%=_ctx.appRes("UICLVConfig.label.ContentPath")%></th>
                        <th><%=_ctx.appRes("UICLVConfig.label.Down")%></th>
                        <th><%=_ctx.appRes("UICLVConfig.label.Up")%></th>
                      </tr>
                    </thead>
                    <% 
                      if (contents.size() == 1) {
                        String delLink = uicomponent.event("Delete", "0");
                        %>
                          <tr class="EvenRow">
                            <td><%= URLDecoder.decode(contents.get(0)) %></td>
                            <td><span></span></td>
                            <td><span></span></td>
                          </tr>
                        <%
                      } else {
                        String rowClass = "";
                        for (int i = 0; i < contents.size(); i++) {
                          if ((i % 2) == 0) {
                            rowClass = "EvenRow";
                          } else {
                            rowClass = "OddRow";
                          }
                          String content = contents.get(i);                  
                          String upLink = uicomponent.event("Increase", Integer.toString(i));
                          String downLink = uicomponent.event("Decrease", Integer.toString(i));  
                          %>
                            <tr class="$rowClass">
                              <td><%= URLDecoder.decode(content) %></td>
                              <td width="25px"><div class="DownRowIcon" onclick="$downLink"><span></span></div></td>
                              <td width="25px"><div class="UpRowIcon" onclick="$upLink"><span></span></div></td>
                            </tr>
                          <%
                        }
                      }
                    %>
                  </table>
                <%
              }
            %>
          </table>
        </fieldset>   
        <fieldset class="fieldsetPreferences">
          <legend class="StyleLegend"><%= _ctx.appRes("UICLVConfig.label.DisplaySettingBlock") %></legend>
          <table class="UIFormGrid">
            <tr>
              <td class="FieldLabel"><%=uicomponent.getLabel(uicomponent.HEADER_FORM_STRING_INPUT) %></td>
              <td class="FieldComponent" colspan="2"><% uiform.renderField(uicomponent.HEADER_FORM_STRING_INPUT) %></td>
              
              <td class="FieldLabel"><%=uicomponent.getLabel(uicomponent.SHOW_AUTOMATIC_DETECTION_CHECKBOX_INPUT) %></td>
              <td class="FieldComponent" colspan="2"><% uiform.renderField(uicomponent.SHOW_AUTOMATIC_DETECTION_CHECKBOX_INPUT) %></td>
              <td class="tdShowHelp">
                <div class="IconInContextHelp ShowHelpIcon" id="HeaderOptionHelp" onmouseover="eXo.ecm.WCMUtils.showInContextHelp('HeaderOptionHelp', 'true')" onmouseout="eXo.ecm.WCMUtils.showInContextHelp('HeaderOptionHelp', 'false')">
					<div class="InContextHelpContent">                    
                      <div class="InContextHelpPopup">
                        <div id="HeaderOptionHelpID" class="LeftInContextHelpPopup">
							<%= _ctx.appRes("UICLVConfig.help.HeaderOptionHelp") %>
                        </div>
                      </div>                      
                    </div>
                </div>
              </td>
            </tr>
            <tr>
              <td class="FieldLabel"><%=uicomponent.getLabel(uicomponent.DISPLAY_TEMPLATE_FORM_SELECT_BOX) %></td>
              <td class="FieldComponent" colspan="6"><% uiform.renderField(uicomponent.DISPLAY_TEMPLATE_FORM_SELECT_BOX) %></td>
            </tr>
            <tr>
              <td class="FieldLabel"><%=uicomponent.getLabel(uicomponent.PAGINATOR_TEMPLATE_FORM_SELECT_BOX) %></td>
              <td class="FieldComponent" colspan="6"><% uiform.renderField(uicomponent.PAGINATOR_TEMPLATE_FORM_SELECT_BOX) %></td>
            </tr>
            <tr>
              <td class="FieldLabel"><%=uicomponent.getLabel(uicomponent.ITEMS_PER_PAGE_FORM_STRING_INPUT) %></td>
              <td class="FieldComponent" colspan="6"><% uiform.renderField(uicomponent.ITEMS_PER_PAGE_FORM_STRING_INPUT) %></td>
            </tr>
          </table>
          <table class="UIFormGrid">
            <tr>
              <td class="FieldLabel"><%=uicomponent.getLabel(uicomponent.SHOW_TITLE_FORM_CHECKBOX_INPUT) %></td>
              <td class="FieldComponent"><% uiform.renderField(uicomponent.SHOW_TITLE_FORM_CHECKBOX_INPUT) %></td>
              
              <td class="FieldLabel"><%=uicomponent.getLabel(uicomponent.SHOW_ILLUSTRATION_FORM_CHECKBOX_INPUT) %></td>
              <td class="FieldComponent"><% uiform.renderField(uicomponent.SHOW_ILLUSTRATION_FORM_CHECKBOX_INPUT) %></td>
              
              <td class="FieldLabel"><%=uicomponent.getLabel(uicomponent.SHOW_SUMMARY_FORM_CHECKBOX_INPUT) %></td>
              <td class="FieldComponent"><% uiform.renderField(uicomponent.SHOW_SUMMARY_FORM_CHECKBOX_INPUT) %></td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td class="FieldLabel"><%=uicomponent.getLabel(uicomponent.SHOW_HEADER_FORM_CHECKBOX_INPUT) %></td>
              <td class="FieldComponent"><% uiform.renderField(uicomponent.SHOW_HEADER_FORM_CHECKBOX_INPUT) %></td>

              <td class="FieldLabel"><%=uicomponent.getLabel(uicomponent.SHOW_DATE_CREATED_FORM_CHECKBOX_INPUT) %></td>
              <td class="FieldComponent"><% uiform.renderField(uicomponent.SHOW_DATE_CREATED_FORM_CHECKBOX_INPUT) %></td>
              
              <td class="FieldLabel"><%=uicomponent.getLabel(uicomponent.SHOW_LINK_FORM_CHECKBOX_INPUT) %></td>
              <td class="FieldComponent"><% uiform.renderField(uicomponent.SHOW_LINK_FORM_CHECKBOX_INPUT) %></td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td class="FieldLabel"><%=uicomponent.getLabel(uicomponent.SHOW_REFRESH_FORM_CHECKBOX_INPUT) %></td>
              <td class="FieldComponent"><% uiform.renderField(uicomponent.SHOW_REFRESH_FORM_CHECKBOX_INPUT) %></td>
              
              <td class="FieldLabel"><%=uicomponent.getLabel(uicomponent.SHOW_READMORE_FORM_CHECKBOX_INPUT) %></td>
              <td class="FieldComponent"><% uiform.renderField(uicomponent.SHOW_READMORE_FORM_CHECKBOX_INPUT) %></td>
              
              <td class="FieldLabel"><%=uicomponent.getLabel(uicomponent.SHOW_RSSLINK_FORM_CHECKBOX_INPUT) %></td>
              <td class="FieldComponent"><% uiform.renderField(uicomponent.SHOW_RSSLINK_FORM_CHECKBOX_INPUT) %></td>
              
              <td class="tdShowHelp">
              <div class="IconInContextHelp ShowHelpIcon" id="GeneralOptionHelp" onmouseover="eXo.ecm.WCMUtils.showInContextHelp('GeneralOptionHelp', 'true')" onmouseout="eXo.ecm.WCMUtils.showInContextHelp('GeneralOptionHelp', 'false')">
                <div class="InContextHelpContent">                    
                    <div class="InContextHelpPopup">
                      <div id="GeneralOptionHelpID" class="LeftInContextHelpPopup">
						<%= _ctx.appRes("UICLVConfig.help.GeneralOptionHelp") %>
                      </div>
                    </div>
                </div>
              </div>
            </td>
            </tr>
          </table>
        </fieldset>
        <% advancedBlockDisplay = uicomponent.isShowAdvancedBlock() ? "block" : "none"
        	 advancedLinkDisplay = uicomponent.isShowAdvancedBlock()? "none" : "block";
      	%>
        <fieldset class="fieldsetPreferences" style="display: $advancedBlockDisplay;">
          <legend class="StyleLegend"><a style="text-align:center; color: #0000FF; text-decoration:underline;" href="<%=uicomponent.event("ShowAdvancedBlock", "false")%>" title="<%=_ctx.appRes("UICLVConfig.label.AdvancedBlock")%>"><%=_ctx.appRes("UICLVConfig.label.AdvancedBlock")%></a></legend>
          <div class="FieldLabel"><%=uicomponent.getLabel(uicomponent.DYNAMIC_NAVIGATION_LABEL) %></div>
          <table class="UIFormGrid">
          	<tr>
          		<td class="FieldLabel"><%=uicomponent.getLabel(uicomponent.CONTEXTUAL_FOLDER_RADIOBOX_INPUT) %></td>
          		<td class="FieldComponent ContextualRadio" colspan="2">
          			<% uiform.renderField(uicomponent.CONTEXTUAL_FOLDER_RADIOBOX_INPUT) %>
          		</td>
          		<td class="tdShowHelp">
              <div class="IconInContextHelp ShowHelpIcon" id="ContextualHelp" onmouseover="eXo.ecm.WCMUtils.showInContextHelp('ContextualHelp', 'true')" onmouseout="eXo.ecm.WCMUtils.showInContextHelp('ContextualHelp', 'false')">
                <div class="InContextHelpContent">                    
                    <div class="InContextHelpPopup">
                      <div id="ContextualHelpID" class="LeftInContextHelpPopup">
						<%= _ctx.appRes("UICLVConfig.help.ContextualHelp") %>
                      </div>
                    </div>
                </div>
              </div>
            </td>
          </tr>
          <% if (uicomponent.isContentListByQuery()) {
              showFolderContexttual = "none"; 
             }
          %>
          <tr style="display: $showFolderContexttual;">
              <td class="FieldLabel"><%=uicomponent.getLabel(uicomponent.SHOW_CLV_BY_STRING_INPUT) %></td>
              <td class="FieldComponent" colspan="2"><% uiform.renderField(uicomponent.SHOW_CLV_BY_STRING_INPUT) %></td>
              <td class="tdShowHelp">
                <div class="IconInContextHelp ShowHelpIcon" id="ParameterHelp" onmouseover="eXo.ecm.WCMUtils.showInContextHelp('ParameterHelp', 'true')" onmouseout="eXo.ecm.WCMUtils.showInContextHelp('ParameterHelp', 'false')">
                  <div class="InContextHelpContent">                    
                    <div class="InContextHelpPopup">
                    <div id="ParameterHelpID" class="LeftInContextHelpPopup">
                      <%= _ctx.appRes("UICLVConfig.help.ParameterHelp") %>
                    </div>
                    </div>                      
                  </div>
                 </div>
              </td>
            </tr>
        <% if (uicomponent.isContentListByQuery()) {	%>        
          <tr>
            <td class="FieldLabel"><%=uicomponent.getLabel(uicomponent.CONTENT_BY_QUERY_TEXT_AREA) %></td>         
            <td class="FieldComponent" colspan="2">
              <% uiform.renderField(uicomponent.CONTENT_BY_QUERY_TEXT_AREA) %>
            </td>
            <td class="tdShowHelp">
            <div class="IconInContextHelp ShowHelpIcon" id="ContentByQueryHelp" onmouseover="eXo.ecm.WCMUtils.showInContextHelp('ContentByQueryHelp', 'true')" onmouseout="eXo.ecm.WCMUtils.showInContextHelp('ContentByQueryHelp', 'false')">
              <div class="InContextHelpContent">
                  <div class="InContextHelpPopup">
                    <div id="ContentByQueryHelpID" class="LeftInContextHelpPopup">
                      <%= _ctx.appRes("UICLVConfig.help.ContentByQueryHelp") %>
                    </div>
                  </div>
              </div>
             </div>
            </td>
          </tr>
          <tr>
            <td class="FieldLabel" colspan="2"><%=uicomponent.getLabel(uicomponent.WORKSPACE_FORM_SELECT_BOX) %></td>
            <td class="FieldComponent"><% uiform.renderField(uicomponent.WORKSPACE_FORM_SELECT_BOX) %></td>
          </tr>
        <% } %> 
          	
            <tr>
              <td class="FieldLabel"><%=uicomponent.getLabel(uicomponent.TARGET_PAGE_FORM_INPUT_SET) %></td>
              <td class="FieldComponent" colspan="2"><% uiform.renderField(uicomponent.TARGET_PAGE_FORM_INPUT_SET) %></td>
              <td class="tdShowHelp">
                <div class="IconInContextHelp ShowHelpIcon" id="ShowDetailInPageHelp" onmouseover="eXo.ecm.WCMUtils.showInContextHelp('ShowDetailInPageHelp', 'true')" onmouseout="eXo.ecm.WCMUtils.showInContextHelp('ShowDetailInPageHelp', 'false')">
					         <div class="InContextHelpContent">                    
                      <div class="InContextHelpPopup">
                        <div id="ShowDetailInPageHelpID" class="LeftInContextHelpPopup">
							             <%= _ctx.appRes("UICLVConfig.help.ShowDetailInPageHelp") %>
                        </div>
                      </div>                      
                    </div>
                 </div>
              </td>
              
            </tr>
            <tr>
              <td class="FieldLabel"><%=uicomponent.getLabel(uicomponent.SHOW_SCV_WITH_STRING_INPUT) %></td>
              <td class="FieldComponent" colspan="2"><% uiform.renderField(uicomponent.SHOW_SCV_WITH_STRING_INPUT) %></td>
              <td class="tdShowHelp">
              <div class="IconInContextHelp ShowHelpIcon" id="DetailParameterHelp" onmouseover="eXo.ecm.WCMUtils.showInContextHelp('DetailParameterHelp', 'true')" onmouseout="eXo.ecm.WCMUtils.showInContextHelp('DetailParameterHelp', 'false')">
                <div class="InContextHelpContent">                    
                    <div class="InContextHelpPopup">
                      <div id="DetailParameterHelpID" class="LeftInContextHelpPopup">
						            <%= _ctx.appRes("UICLVConfig.help.DetailParameterHelp") %>
                      </div>
                    </div>
                </div>
               </div>
            </td>
            </tr>
          </table>
          <table class="UIFormGrid" style="width:100%;">
          <tr>
            <td class="FieldLabel" colspan="2" style="text-align:left;"><%=uicomponent.getLabel(uicomponent.CACHE_MANAGEMENT_LABEL)%></td>
            <td class="tdShowHelp">
            <div class="IconInContextHelp ShowHelpIcon" id="ContentsVisibilityHelp" onmouseover="eXo.ecm.WCMUtils.showInContextHelp('ContentsVisibilityHelp', 'true')" onmouseout="eXo.ecm.WCMUtils.showInContextHelp('ContentsVisibilityHelp', 'false')">
              <div class="InContextHelpContent">                    
                  <div class="InContextHelpPopup">
                    <div id="ContentsVisibilityHelpID" class="LeftInContextHelpPopup">
                      <%= _ctx.appRes("UICLVConfig.help.ContentsVisibilityHelp") %>
                    </div>
                  </div>
              </div>
             </div>
            </td>
          </tr>
          </table>
          <table class="UIFormGrid" style="width:100%;">
            <tr>
              <td class="FieldComponent ContextualRadio" colspan="2">
                <% uiform.renderField(uicomponent.CACHE_ENABLE_RADIOBOX_INPUT) %>
              </td>
            </tr>
          </table>
          
        </fieldset>
      	<a style="display: $advancedLinkDisplay; text-align:left; color: #0000FF; text-decoration:underline;" href="<%=uicomponent.event("ShowAdvancedBlock", "true")%>" title="<%=_ctx.appRes("UICLVConfig.label.AdvancedBlock")%>">
      		<%=_ctx.appRes("UICLVConfig.label.AdvancedBlock")%>
    		</a>
	 		  <div class="UIAction">
				<% 
				  for(action in uicomponent.getActions()) { 
					String actionLabel = _ctx.appRes(uicomponent.getName() + ".action." + action) ;
					String link = uicomponent.event(action) ;
					%>
					<a onclick="$link" class="ActionButton LightBlueStyle" href="javascript:void(0);">$actionLabel</a>
					<%}%>
			  </div>
      </div>
      <%
    uiform.end()
  %>
</div>
