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

#set($op = $term.getOperation())
#if($hits)
  #set($after = $hits.getInput("${inputname}.after"))
  #set($before = $hits.getInput("${inputname}.before"))
  #set($value = $hits.getInput("${inputname}.value"))
  #if(!$value && ($op == "equals" || $op == "before" || $op == "after"))
    #set($value = $hits.getInput("${inputname}"))
  #end
#elseif($query)
  #set($after = $query.getInput("${inputname}.after"))
  #set($before = $query.getInput("${inputname}.before"))
  #set($value = $query.getInput("${inputname}.value"))
  #if(!$value && ($op == "equals" || $op == "before" || $op == "after"))
    #set($value = $query.getInput("${inputname}"))
  #end
#else
  #set($after  = $context.getRequestParameter("${inputname}.after"))
  #set($before = $context.getRequestParameter("${inputname}.before"))
  #set($value  = $context.getRequestParameter("${inputname}.value"))
  #if(!$value && ($op == "equals" || $op == "before" || $op == "after"))
    #set($value = $context.getRequestParameter("${inputname}"))
  #end
#end

<div class="d-flex flex-row flex-nowrap align-items-center gap-2">

  <!-- operation selector -->
  <select name="operation" data-allowclear
          id="operation${inputid}"
          class="form-select form-select-sm flex-shrink-0"
          style="width: 8rem;"
          onchange="dateFilter${inputid}.update();">
   
    <option value="equals"       #if($op=="equals")      selected#end>[[Equals]]</option>
    <option value="after"        #if($op=="after")       selected#end>[[After]]</option>
    <option value="before"       #if($op=="before")      selected#end>[[Before]]</option>
    <option value="betweendates" #if($op=="betweendates")selected#end>[[Between]]</option>
  
   
    <option value="before1"      #if($op=="before1")     selected#end>24h</option>
    <option value="before7"      #if($op=="before7")     selected#end>7d</option>
    <option value="before30"     #if($op=="before30")    selected#end>30d</option>
    <option value="before365"    #if($op=="before365")   selected#end>1y</option>
  </select>

 <div id="datevalue${inputid}" class="d-none flex-grow-1">
  <input name="${inputname}.value"
         type="date" data-allowclear
         class="form-control form-control-sm w-100"
         value="$!value"/>
</div>

<!-- between-range -->
<div id="daterange${inputid}" class="d-none d-flex gap-1 flex-grow-1">
  <input name="${inputname}.after" type="date" data-allowclear
         class="form-control form-control-sm w-100"
         value="$!after"/>
  <input name="${inputname}.before" type="date" data-allowclear
         class="form-control form-control-sm w-100"
         value="$!before"/>
</div>

</div>


<script type="text/javascript">
  // Encapsulate per-control logic
  dateFilter${inputid} = (function(){
    var sel   = document.getElementById('operation${inputid}');
    var single= document.getElementById('datevalue${inputid}');
    var range = document.getElementById('daterange${inputid}');
    return {
      update: function(){
        var idx = sel.selectedIndex;
        if(idx <= 2){
          single.classList.remove('d-none');
          range.classList.add('d-none');
        } else if(idx === 3){
          single.classList.add('d-none');
          range.classList.remove('d-none');
        } else {
          single.classList.add('d-none');
          range.classList.add('d-none');
        }
      }
    };
  })();

  // Initialize on load
  dateFilter${inputid}.update();
</script>