<div class="compose-workspace-widget">
  <div class="mb-3">
    <h3 class="title is-6 mb-1">Contacts</h3>
    <p class="is-size-7 has-text-grey">
      See all your contacts. Search to narrow the list.
    </p>
  </div>

  <form id="{{ launcher_form_id }}">
    <div class="field">
      <label class="label is-small" for="{{ search_input_id }}">Search</label>
      <div class="control has-icons-left">
        <input
          id="{{ search_input_id }}"
          class="input is-small"
          type="search"
          name="q"
          value="{{ search_query }}"
          placeholder="Name, identifier, or service"
          hx-get="{{ results_url }}"
          hx-trigger="input changed delay:250ms, search"
          hx-target="#{{ results_id }}"
          hx-include="#{{ launcher_form_id }}"
          hx-swap="outerHTML">
        <span class="icon is-small is-left"><i class="fa-solid fa-magnifying-glass"></i></span>
      </div>
    </div>
  </form>

  {% include "partials/compose-workspace-contact-results.html" %}
</div>
