{% load common_extras humanize %}{% comment %}
The refreshable half of the contact list: the table, the empty state and the
pager. Everything else on the page — the toolbar, the filter builder, the bulk
bar — stays put across a swap.

It re-fetches itself on `contactsChanged`, which every mutation's toast carries,
the same way `_tag_rows.html` answers `tagsChanged`. Fetching the whole page and
picking one div out of it with hx-select also works and costs a full shell
render — sidebar, workspace switcher, every context-processor query — per
keystroke-sized edit.

Everything rendered here is attacker-controlled: names, emails and platform
usernames all arrive from strangers (SECURITY-BASELINE §2). Django autoescapes,
nothing is marked safe, and no value from a contact reaches an href or a src.
{% endcomment %}
<div id="contact-rows"
     hx-get="{% url 'contacts:rows' workspace_id=request.workspace.id %}{% if page_querystring %}?{{ page_querystring }}{% endif %}"
     hx-trigger="contactsChanged from:body"
     data-result-count="{{ page.paginator.count }}"
     hx-swap="outerHTML">

  {% if list_error %}
    <p class="alert-warning">
      This filter could not be applied, so no contacts are shown: {{ list_error }}
    </p>
  {% endif %}

  {% if page.object_list %}
    {% comment %}
      The table lives on a card now: <main> stopped being one big white panel
      when the redesign moved the page ground to --surface-page, so each screen
      supplies its own surfaces.
    {% endcomment %}
    <div class="card overflow-hidden">
    <div class="data-table-wrap">
    <table class="data-table crm-contact-table">
      <thead>
        <tr>
          <th class="w-8">
            {% comment %}
              Selects this page, not the whole filter. A "select every matching
              contact" affordance would promise a bulk action over a set the
              endpoint caps at 500 — targeting a whole segment is a broadcast's
              shape (issue #23), not a checkbox on a list.
            {% endcomment %}
            <label class="sr-only" for="select-page">Select this page</label>
            <input type="checkbox" id="select-page" class="bb-checkbox"
                   x-on:change="togglePage({{ page_ids|json_attr }}, $event.target.checked)">
          </th>
          <th scope="col">Contact</th>
          <th scope="col">Channels</th>
          <th scope="col">Tags</th>
          <th scope="col">Last active</th>
          <th scope="col">Status</th>
        </tr>
      </thead>
      <tbody>
        {% for contact in page.object_list %}
          <tr>
            <td>
              <label class="sr-only" for="select-{{ contact.id }}">Select {{ contact.display_name }}</label>
              <input type="checkbox" id="select-{{ contact.id }}" class="bb-checkbox" value="{{ contact.id }}"
                     x-bind:checked="isSelected('{{ contact.id }}')"
                     x-on:change="toggle('{{ contact.id }}', $event.target.checked)">
            </td>
            <td>
              {% comment %}
                A round initial rather than the 4px platform square the row used
                to lead with: the channel belongs in the Channels column, and
                what a reader scans a contact list for is people.
              {% endcomment %}
              <span class="flex items-center gap-2.5">
                <span class="avatar avatar-sm">{{ contact.display_name|make_list|first|upper }}</span>
                <span class="min-w-0">
                  <a class="data-table-title block truncate" href="{% url 'contacts:detail' workspace_id=request.workspace.id contact_id=contact.id %}">{{ contact.display_name }}</a>
                  {% if contact.email %}<span class="data-table-meta block truncate">{{ contact.email }}</span>
                  {% elif contact.phone %}<span class="data-table-meta block truncate">{{ contact.phone }}</span>
                  {% else %}<span class="data-table-meta block">No email or phone yet</span>{% endif %}
                </span>
              </span>
            </td>
            <td>
              {% for platform in contact.channel_platforms %}
                <span class="pi-chip {{ platform|platform_class }} w-5 h-5" title="{{ platform }}">
                  {% include "partials/_platform_icon.html" with platform=platform size="sm" %}
                </span>
              {% empty %}
                <span class="muted">None</span>
              {% endfor %}
            </td>
            <td>
              {% for tag in contact.tags.all %}<span class="crm-chip">{{ tag.name }}</span>{% empty %}<span class="muted">None</span>{% endfor %}
            </td>
            <td>{% if contact.last_interaction_at %}{{ contact.last_interaction_at|timesince }} ago{% else %}<span class="muted">Never</span>{% endif %}</td>
            <td>
              {% comment %}
                Whether they may be messaged, as a status pill (HANDOFF §3,
                Contacts) — the same words the Filter popover's Status group
                uses. The column used to be headed "Opt-in" and then
                "Contactable"; what a reader wants to know is whether they may
                message this person.

                Still two independent facts, never an if/elif chain.
                `has_opt_in` and `has_opted_out` can both be true — a contact
                can have consented on Telegram and opted out on SMS — and
                `annotate_reachability`'s docstring says collapsing them "would
                have to pick which one to lie about". An elif did exactly that:
                it hid a still-reachable channel behind the opt-out and read as
                though the contact were unreachable. The mixed case gets its own
                sentence instead.
              {% endcomment %}
              {% if contact.has_opt_in and contact.has_opted_out %}
                <span class="status-pill status-pill-warning" title="Opted out on at least one channel, still opted in on another"><span class="status-pill-dot" aria-hidden="true"></span>On some channels</span>
              {% elif contact.has_opt_in %}
                <span class="status-pill status-pill-success"><span class="status-pill-dot" aria-hidden="true"></span>Subscribed</span>
              {% elif contact.has_opted_out %}
                <span class="status-pill status-pill-error"><span class="status-pill-dot" aria-hidden="true"></span>Opted out</span>
              {% else %}
                <span class="status-pill"><span class="status-pill-dot" aria-hidden="true"></span>Not yet</span>
              {% endif %}
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
    </div>
    </div>

    <p class="muted">
      Page {{ page.number }} of {{ page.paginator.num_pages }}. {{ page.paginator.count }} contact{{ page.paginator.count|pluralize }} in all.
      {% if page.has_previous %}
        <a href="?{% if querystring %}{{ querystring }}&amp;{% endif %}page={{ page.previous_page_number }}"
           hx-get="{% url 'contacts:rows' workspace_id=request.workspace.id %}?{% if querystring %}{{ querystring }}&amp;{% endif %}page={{ page.previous_page_number }}"
           hx-target="#contact-rows" hx-swap="outerHTML">Previous</a>
      {% endif %}
      {% if page.has_next %}
        <a href="?{% if querystring %}{{ querystring }}&amp;{% endif %}page={{ page.next_page_number }}"
           hx-get="{% url 'contacts:rows' workspace_id=request.workspace.id %}?{% if querystring %}{{ querystring }}&amp;{% endif %}page={{ page.next_page_number }}"
           hx-target="#contact-rows" hx-swap="outerHTML">Next</a>
      {% endif %}
    </p>
  {% else %}
    {% if query.is_filtered or query.segment %}
      {% url 'contacts:list' workspace_id=request.workspace.id as everyone_url %}
      {% include "components/empty_state.html" with icon="search" title="No contacts match this filter." body="Try a different word, or clear the filters." action_label="Clear filters" action_url=everyone_url %}
    {% else %}
      {% include "components/empty_state.html" with icon="contacts" title="No contacts yet" body="They arrive when someone messages a connected channel, or when you import a CSV." %}
    {% endif %}
  {% endif %}
</div>