#set( $inputname = "${detail.id}" )
#if($catalogid)
	#set ($inputid = "${detail.id}${catalogid}")
#else
	#set($inputid="${detail.id}")
#end
#set ($inputid = $inputid.replaceAll("/",""))
#set ($inputid = $inputid.replaceAll("_",""))

#if ($detail.get("daterange")=="true")
	<input name="operation" type="hidden" value="after" />
	<input name="${inputname}.value"  id="datevalue${inputid}before" 
		size="8" type="text">
	<input type="text" class="datepicker " data-targetid="datebox${inputid}before" value="$!val" size="8" /> 	
	[[to]]
	<input name="field" value="${inputname}end" type="hidden">
	<input name="operation" type="hidden" value="before" />
	<input name="${inputname}end.value" class="" id="datevalue${inputid}after"  size="8" type="text">
	<input type="text" class="datepicker " data-targetid="datebox${inputid}after" value="$!val" size="8" /> 
#else
	#set( $op = $term.getOperation() )
	
	<select name="operation" id="operation${inputid}" onchange="updateDateInput${inputid}(this.selectedIndex);" 
		class="form-control custom-select">
		<option value="equals" >[[Equals]]</option>
		<option value="after" #if( $op && $op == "afterdate" )selected #end>[[After Date]]</option>
		<option value="before" #if( $op && $op == "beforedate" )selected #end >[[Before Date]]</option>
		<option value="betweendates" #if( $op && $op == "betweendates" )selected #end >[[Between]]</option>
		<option value="before1" #if( $op && $op == "before1" )selected #end>[[Past 24 hours]]</option>
		<option value="before7" #if( $op && $op == "before7" )selected #end>[[Past week]]</option>
		<option value="before30" #if( $op && $op == "before30" )selected #end>[[Past month]]</option>
		<option value="before365" #if( $op && $op == "before365" )selected #end>[[Past year]]</option>
	</select>
	
	<span id="dateinput${inputid}" class="dateinputbox" >

	</span>
	##${inputname}.after -- $hits.getInput("${inputname}.after")
	#if($hits)
		#set($after = $hits.getInput("${inputname}.after"))
		#set($before = $hits.getInput("${inputname}.before"))
	#end
	#if(!$after || !$before)
		#if($query)
			#set($after = $query.getInput("${inputname}.after"))
			#set($before = $query.getInput("${inputname}.before"))
		#end
	#end
	#if(!$after || !$before)
		#set($after = $context.getRequestParameter("${inputname}.after"))
		#set($before = $context.getRequestParameter("${inputname}.before"))
	#end
	
	##Verify filters Value
	#if(!$after || !$before)
		#set($termvalue = $term.getValue())
		#if($termvalue)
			#set($dates = $termvalue.split("\-"))
			#set($after = $dates[0].trim())
			#set($before = $dates[1].trim())
		#end
	#end
	
	
	<script type="text/javascript">
		updateDateInput${inputid} = function(value, initializing = false)
		{
			//debugger;
			var val = "";
			var after = "";
			var before = "";
			if (initializing){
				var val = "$!val"
				var after = "$!after";
				var before = "$!before";
			}
			var form = $("#dateinput${inputid}").closest('form');
			var oneinput = 	'<input name="${inputname}.value"  id="datebox${inputid}" value="'+val+'" size="8" type="hidden"><input type="text" class="datepicker form-control" data-targetid="datebox${inputid}" /> ';
			var twoinputs = '<input name="${inputname}.after"  id="dateafter${inputid}" value="'+after+'" size="8" type="hidden"> \
						<input type="text" class="datepicker form-control" data-targetid="dateafter${inputid}" value="'+after+'" size="8" /> \
						 \
						<input name="${inputname}.before"  id="datebefore${inputid}" value="'+before+'" size="8" type="hidden">  \
						<input type="text" class="datepicker form-control" style="margin-top:5px" data-targetid="datebefore${inputid}" value="'+before+'" size="8" /> ';


			if( value < 3 )
			{
				$("#dateinput${inputid}").html(oneinput);
				//valueblock.style.display='block';
				//rangeblock.style.display='none';
				if ($(form).hasClass("autosubmitform")) {
					$('input[type=text]',form).change( function(event) 
					{
						event.stopPropagation();
					    form.trigger("submit");
					});
				}
			}
			else if ( value == 3 )
			{
				$("#dateinput${inputid}").html(twoinputs);
				if ($(form).hasClass("autosubmitform")) {
					$('input[type=text]',form).change( function(event) 
					{
					    //verify both inputs not empty
					    if ($("#datebefore${inputid}").val() != '' && $("#dateafter${inputid}").val() != '') {
					    	event.stopPropagation();
							form.trigger("submit");
					    }
					});
				}
				
			}
			else
			{
				$("#dateinput${inputid}").html("");
				if ($(form).hasClass("autosubmitform")) {
				    form.trigger("submit");
				}
			}
			

		}
		updateDateInput${inputid}(document.getElementById('operation${inputid}').selectedIndex, true);
	</script>
#end