<div id="{{ results_id }}">
  <p class="is-size-7 has-text-grey mb-3">
    {% if total_matches %}
      {% if is_search_results %}
        Showing {{ visible_count }} of {{ total_matches }} contacts.
      {% elif result_mode == "active_chats" %}
        Recent chats. Search to see all {{ total_contacts }} contacts.
      {% else %}
        Showing {{ visible_count }} contacts.
      {% endif %}
    {% else %}
      {% if is_search_results %}
        No contacts found.
      {% else %}
        No contacts yet.
      {% endif %}
    {% endif %}
  </p>

  {% if contact_rows %}
    <nav class="panel">
      {% for row in contact_rows %}
        <a
          class="panel-block"
          hx-get="{{ row.compose_widget_url }}"
          hx-target="#widgets-here"
          hx-swap="beforeend">
          <span class="is-flex is-justify-content-space-between is-align-items-center is-flex-grow-1" style="min-width: 0; gap: 0.75rem;">
            <span style="min-width: 0;">
              <span class="has-text-weight-semibold">{{ row.person_name }}</span>
              <span class="is-size-7 has-text-grey is-block" style="overflow-wrap: anywhere;">
                {{ row.identifier }}
              </span>
            </span>
            <span class="tag is-light gia-badge">{{ row.service|title }}</span>
          </span>
        </a>
      {% endfor %}
    </nav>
  {% endif %}

  {% if has_more %}
    <div class="mt-3">
      <button
        class="button is-small is-fullwidth is-light"
        hx-get="{{ results_url }}"
        hx-include="#{{ launcher_form_id }}"
        hx-vals='{"page": "{{ next_page }}"}'
        hx-target="#{{ results_id }}"
        hx-swap="outerHTML">
        Show {{ next_count }} more
      </button>
    </div>
  {% endif %}
</div>
