#set( $inputname = "${detail.id}" )
#if($catalogid)
	#set ($inputid = "${detail.id}${catalogid}")
#else
	#set($inputid="${detail.id}")
#end
#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="$!value" size="8" /> 	<br/>
	[[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="$!value" size="8" /> 
#else
	#set( $op = 	$term.getOperation() )

	<select 
		name="operation" 
		id="operation${inputid}" 
		onchange="updateDateInput${inputid}(this.selectedIndex);" 
		class="form-control form-component-datasearch-operation 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="ytd" #if( $op && $op == "ytd" )selected #end>[[Year To Date]]</option>
		<option value="previousyear" #if( $op && $op == "previousyear" )selected #end>[[Previous Year]]</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>
	
	#if($hits)
		#set($after = $hits.getInput("${inputname}.after"))
		#set($before = $hits.getInput("${inputname}.before"))
	#elseif($query)
		#set($after = $query.getInput("${inputname}.after"))
		#set($before = $query.getInput("${inputname}.before"))
	#else
		#set($after = $context.getRequestParameter("${inputname}.after"))
		#set($before = $context.getRequestParameter("${inputname}.before"))
	#end
	
	##Verify filters Value
	#if(!$after || !$before)
		#if($value)
			#set($dates = $value.split("\-"))
			#set($after = $dates[0].trim())
			#set($before = $dates[1].trim())
		#end
	#end
	
	
	<script type="text/javascript">
		updateDateInput${inputid} = function(value)
		{
			var form = $("#dateinput${inputid}").closest('form');
			var oneinput = 	'<input name="${inputname}.value"  id="datebox${inputid}" value="$!value" 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">  \
						<br/><input type="text" class="datepicker form-control" style="margin-top:5px" data-targetid="datebefore${inputid}" value="$!before" size="8" /> ';


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

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