<div id="add-collection-inline" class="p-2 border rounded">
  <div class="mb-2">
    <div class="input-group">
      <input class="form-control" id="collection-inline-search" name="q" type="search" placeholder="Search collections"
             {% if case %}
               hx-get="{% url 'atlas:collection_inline_search' case.pk %}"
             {% else %}
               hx-get="{% url 'atlas:collection_inline_search' 0 %}"
             {% endif %}
             hx-trigger="input delay:400ms, keyup[key=='Enter']"
             hx-target="#collection-inline-list"
             hx-indicator="#collection-inline-indicator">
      <span class="input-group-text" id="collection-inline-indicator" aria-hidden="true">
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
      </span>
    </div>
  </div>

  <div id="collection-inline-list">
    {% include 'atlas/partials/collection_inline_list.html' with collections=recent_collections case=case %}
  </div>

  <div class="mt-2">
    <button class="btn btn-sm btn-secondary" _="on click remove #add-collection-inline">Close</button>
  </div>
</div>
