<div id="{{ results_id }}">
  <p class="is-size-7 has-text-grey mb-3">
    {% if history_rows %}
      Showing {{ result_start }}-{{ result_end }} recent matches.
    {% else %}
      No persisted messages match this search.
    {% endif %}
  </p>

  {% if history_rows %}
    <div class="is-flex is-flex-direction-column" style="gap: 0.5rem;">
      {% for row in history_rows %}
        <div class="box is-shadowless p-3 m-0">
          <div class="is-flex is-justify-content-space-between is-align-items-flex-start" style="gap: 0.75rem;">
            <div style="min-width: 0;">
              <p class="has-text-weight-semibold mb-1">
                {{ row.person_name }}
                <span class="tag is-light gia-badge ml-2">{{ row.service_label }}</span>
                <span class="tag {% if row.outgoing %}is-warning{% else %}is-info{% endif %} is-light gia-badge ml-1">{{ row.direction_label }}</span>
              </p>
              <p class="is-size-7 has-text-grey mb-1" style="overflow-wrap: anywhere;">
                {{ row.identifier }} · {{ row.display_ts }}
              </p>
              <p class="mb-0" style="overflow-wrap: anywhere;">
                {{ row.text_preview }}
              </p>
            </div>
            <div class="buttons are-small m-0">
              <button
                class="button is-small is-link is-light"
                hx-get="{{ row.compose_widget_url }}"
                hx-include="#{{ browser_form_id }}"
                hx-target="#widgets-here"
                hx-swap="beforeend">
                <span class="icon is-small"><i class="fa-solid fa-table-cells-large"></i></span>
                <span>Open</span>
              </button>
              <a class="button is-small is-light" href="{{ row.compose_page_url }}">
                <span class="icon is-small"><i class="fa-solid fa-arrow-up-right-from-square"></i></span>
                <span>Page</span>
              </a>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  {% endif %}

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