{% from "_macros.html" import icon %}
{#
  A single chat row. `chat_item` rather than `chat` so this can be included
  from a page that already has the open chat bound to `chat`.
#}
<div class="nav-item {% if chat and chat.id == chat_item.id %}is-active{% endif %}"
     data-chat-id="{{ chat_item.id }}">
  <a class="nav-item__link" href="/chat/{{ chat_item.id }}">
    {{ icon("chat", "icon--sm") }}
    <span class="nav-item__label" id="chat-link-label-{{ chat_item.id }}">{{ chat_item.title }}</span>
    {# Toggled out of band by the unread poll; see /api/chats/unread. #}
    <span id="unread-{{ chat_item.id }}" class="unread-dot"
          {{ '' if chat_item.unread else 'hidden' }} title="New reply"></span>
  </a>
  <span class="nav-item__actions">
    <button class="btn btn--icon btn--sm" type="button"
            hx-delete="/api/chats/{{ chat_item.id }}"
            hx-confirm="Delete “{{ chat_item.title }}”? This cannot be undone."
            data-confirm-title="Delete chat"
            hx-swap="none"
            aria-label="Delete chat">
      {{ icon("trash", "icon--sm") }}
    </button>
  </span>
</div>
