{% include 'mixins/partials/notify.html' %}
<table
  class="table is-fullwidth is-hoverable"
  hx-target="#{{ context_object_name }}-table"
  id="{{ context_object_name }}-table"
  hx-swap="outerHTML"
  hx-trigger="{{ context_object_name_singular }}Event from:body"
  hx-get="{{ list_url }}">
  <thead>
    <th>name</th>
    <th>identifier</th>
    <th>jid</th>
    <th>person</th>
    <th>actions</th>
  </thead>
  {% for item in object_list %}
    <tr>
      <td>{{ item.name|default:"-" }}</td>
      <td>
        <code>{{ item.identifier }}</code>
      </td>
      <td>{{ item.jid|default:"-" }}</td>
      <td>{{ item.person_name|default:"-" }}</td>
      <td>
        <div class="buttons">
          {% if type == 'page' %}
            <a href="{{ item.compose_page_url }}" class="button" title="Open manual chat">
              <span class="icon"><i class="fa-solid fa-paper-plane"></i></span>
            </a>
          {% else %}
            <button
              hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
              hx-get="{{ item.compose_widget_url }}"
              hx-trigger="click"
              hx-target="#widgets-here"
              hx-swap="afterend"
              class="button"
              title="Open manual chat widget">
              <span class="icon"><i class="fa-solid fa-paper-plane"></i></span>
            </button>
          {% endif %}
          <a href="{{ item.match_url }}" class="button" title="Match identifier">
            <span class="icon"><i class="fa-solid fa-link"></i></span>
          </a>
        </div>
      </td>
    </tr>
  {% empty %}
    <tr>
      <td colspan="5" class="has-text-grey">No WhatsApp contacts discovered yet.</td>
    </tr>
  {% endfor %}
</table>