{% import "components.html" as c with context %}
{# the card about a conversation, drawn over the chat from its right edge:
   who is in it - read off the messages loaded, so it grows as more are -
   what wakes the agent in it, and at the bottom the way to turn it away #}
<div class="drawer" id="profile" role="dialog" aria-modal="true" aria-labelledby="conversation-title" tabindex="-1" x-data="conversation" :data-open="open" x-bind="dialog" x-cloak x-trap.inert.noscroll="open" @click.outside="open = false" @htmx:after:swap.window="gather()">
  <div class="hd"><span class="heading" id="conversation-title">{{ t.text("profile.title") }}</span><button class="btn icon" type="button" title="{{ t.text("profile.close") }}" @click="open = false">{{ c.icon("x") }}</button></div>
  <div class="who">
    <div class="av">{{ contact.thread_id|identicon|safe }}</div>
    <div><b x-data="contactName" data-name="{{ contact.name }}" data-thread="{{ ref(contact.thread_id) }}" x-text="name" @contact-name.window="update($event)">{{ contact.name }}</b><div class="sub">{{ c.channels((contact.channel,)) }}{{ t.text("contacts." ~ contact.kind) }}</div></div>
  </div>
  <div class="body">
    {# a group has members; a direct message is the two of them #}
    {% if contact.kind == "group" %}
    <div class="section">{{ c.icon("users") }} {{ t.text("profile.members") }} · <span id="member-count" x-text="members.length"></span></div>
    {# each turn in the chat carries its speaker; the grid is those, once each #}
    <div class="grid" id="members">
      <template x-for="member in members" :key="member.id">
        <div class="member" :title="member.name"><div class="av" x-html="member.avatar"></div><small x-text="member.name"></small></div>
      </template>
    </div>
    {% endif %}
    {% include "conversation_reminders.html" %}
  </div>
  {% if permissions.AGENTS_APPROVE in selected.actions %}<div class="foot">
    <button class="btn danger" type="button" x-bind="opener" @click="$dispatch('dialog-open', 'remove-ask')">{{ c.icon("trash-2") }} {{ t.text("profile.remove_" ~ contact.kind) }}</button>
  </div>
  {% include "remove_ask.html" %}{% endif %}
</div>