<div id="resource-search-panel" class="mb-2">
  <div id="resource-search-form" class="row g-2">
    <input type="hidden" name="case_id" value="{{ case.pk }}" />
    <div class="col-auto" style="flex: 1 1 300px;">
      <input type="search" id="resource-search-q" name="q" class="form-control form-control-sm" placeholder="Search resources by name, description or URL"
             hx-get="{% url 'atlas:resource_search_widget' %}"
             hx-trigger="input delay:500ms"
             hx-target="#resource-search-results"
             hx-swap="innerHTML"
             hx-include="#resource-search-panel"
             hx-indicator=".htmx-indicator">
    </div>
    <div class="htmx-indicator col-auto">
      <img src="/img/bars.svg" alt=""/> Searching...
    </div>
    <div class="col-auto">
      <select name="site" class="form-select form-select-sm">
        <option value="">All sites</option>
        {% for s in site_queryset %}
          <option value="{{ s.pk }}">{{ s.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="col-auto">
      <select name="subspecialty" class="form-select form-select-sm">
        <option value="">All subspecialties</option>
        {% for sp in subspecialty_queryset %}
          <option value="{{ sp.pk }}">{{ sp.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="col-auto">
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="resource-open-access-{{ case.pk }}" name="open_access" value="1">
        <label class="form-check-label small" for="resource-open-access-{{ case.pk }}">Open</label>
      </div>
    </div>
    <div class="col-auto ms-auto">
      <button type="button" class="btn btn-sm btn-outline-success"
              hx-get="{% url 'atlas:case_create_resource_inline' pk=case.pk %}"
              hx-target="#resource-search-panel"
              hx-swap="outerHTML">
          + New Resource
      </button>
    </div>
  </div>

  <div id="resource-search-results" class="mt-2"></div>
</div>

<!-- pure HTMX: no JS fallback; hx-trigger on the input uses input+debounce -->
