<div class="field is-grouped">
  <div class="control has-tooltip-arrow has-tooltip-bottom"
       data-tooltip="Fuzzy Match">
    <input type="checkbox" name="fuzzy-match" checked="checked"
           form="search-form"
           style="cursor:inherit;width:1.5rem;height:1.5rem;margin: 0.35rem"
           hx-include="[name='search-form']"
           hx-post="/cards/search"
           hx-target="#search-results"
           hx-trigger="change">
  </div>
  <div class="control is-expanded">
    <input class="input" type="text" name="name" 
           form="search-form"
           hx-include="[name='search-form']"
           hx-post="/cards/search"
           hx-target="#search-results"
           hx-trigger="change"
           placeholder="Product Name">
  </div>
  <div class="control">
    <div class="select">
      <select
        name="limit"
        form="search-form"
        hx-include="[name='search-form']"
        hx-post="/cards/search"
        hx-target="#search-results"
        hx-trigger="change">
        <option value="10">Limit</option>
        {% for option in search-params.limit %}
        <option value="{{ option }}">{{ option }}</option>
        {% endfor %}
      </select>
    </div>
  </div>
</div>

<div class="field is-grouped is-grouped-right is-narrow">
  <!-- Toggle Advanced Search -->
  <div class="control has-tooltip-arrow has-tooltip-bottom"
       data-tooltip="Toggle Advanced Search">
    <button class="button"
            type="button"
            onclick="toggle_hidden('advanced-search')">
      <i class="fa-solid fa-magnifying-glass"></i>
    </button>
  </div>

  <!-- Reset Form -->
  <div class="control">
    <button class="button is-link" type="button"
            onclick="document.getElementById('search-form').reset()">
      Reset
    </button>
  </div>
</div>
