#macro(friendlyValue $term $detail $hits)
  #set($op = $term.getOperation())
  #set($after = $hits.getInput("${detail.id}.after"))
  #set($before = $hits.getInput("${detail.id}.before"))
  #set($val = $hits.getInput("${detail.id}"))
  #set($vals = $hits.getInputs("${detail.id}"))
  #set($resolvedListId = $detail.listid)
  #if(!$resolvedListId) #set($resolvedListId = $detail.id) #end

  #if($op == "betweendates" && $after && $before)
    <span class="text-muted small">#esc($after) - #esc($before)</span>
  #elseif($op == "before" && $val)
    <span class="text-muted small">[[Before]] #esc($val)</span>
  #elseif($op == "after" && $val)
    <span class="text-muted small">[[After]] #esc($val)</span>
  #elseif($op == "equals" && $val)
    <span class="text-muted small">[[On]] #esc($val)</span>
  #elseif($vals && $vals.size() > 0)
    #if($vals.size() == 1)
      #set($display = "")
      #if($detail.isList() && $searcher)
        #set($row = $searcherManager.getData($catalogid, $resolvedListId, $vals.get(0)))
        #if($row)
          #set($display = $row.getName())
        #else
          #set($display = $vals.get(0))
        #end
      #else
        #set($display = $vals.get(0))
      #end
      <span class="text-muted small">#esc($display)</span>
    #else
      <span class="text-muted small">$vals.size() selected</span>
    #end
  #elseif($val)
    #set($display = $val)
    #if($detail.isList() && $searcher)
      #set($row = $searcherManager.getData($catalogid, $resolvedListId, $val))
      #if($row)
        #set($display = $row.getName())
      #end
    #end
    <span class="text-muted small">#esc($display)</span>
  #end
#end


#if($hits.getSearchQuery())
  #set($value = "$!{hits.getSearchQuery().getInput($detail.id)}")
  #set($values = $hits.getSearchQuery().getInputs($detail.id))
  #set($term = $hits.getSearchQuery().getTermByDetailId($detail.id))
  $context.putPageValue("term", $term)
  $context.putPageValue("val", $value)
  $context.putPageValue("values", $values)
  $context.putPageValue("data", $hits.getSearchQuery())
#end



<div class="dropdown shadow-sm" id="${detail.id}dropdown">

#set($suppressValue = ($detail.id == "id" && $value == "*"))

<button type="button"
        class="btn btn-sm dropdown-toggle
          #if(!$suppressValue && $value) btn-outline-primary border border-primary fw-bold
          #else btn-outline-secondary
          #end"
        data-bs-toggle="dropdown"
        data-bs-auto-close="outside"
        aria-expanded="false">
  $detail.getText($context)
  #if(!$suppressValue)
    #friendlyValue($term $detail $hits)
  #end
</button>


  <div class="dropdown-menu p-4 shadow-lg" style="min-width: 500px;">
    <div class="mb-2">
      $pages.include("/${applicationid}/components/advancedsearch/detailedit.html", $context)
    </div>

    <div class="d-flex justify-content-end gap-2">
      <button type="button" class="btn btn-sm btn-outline-secondary"
              data-clear="#${detail.id}dropdown" data-submit-after data-close="#${detail.id}dropdown">
        <i class="bi bi-x-lg"></i>
      </button>

      <button type="button" class="btn btn-sm btn-primary"
              data-close="#${detail.id}dropdown" data-submit>
        <i class="bi bi-check-lg"></i>
      </button>
    </div>
  </div>
</div>