{% import "components.html" as c with context %}
{# the right column: one conversation, or nothing yet; picking a contact
   swaps this column alone, the two lists staying as they are. a conversation
   still waiting to be looked at shows the question about it instead #}
<div class="col wide" id="chat">
  {% if contact and asked %}
  {% call c.column_header(contact.name) %}
    <span class="sub">{{ c.channels((contact.channel,)) }}{{ t.text("contacts." ~ contact.kind) }} · <span class="badge review">{{ t.text("review.pending") }}</span></span>
  {% endcall %}
  {% include "review_card.html" %}
  {% elif contact %}
  {% set profile_url = "/agents/" ~ ref(selected.computer_id) ~ "/" ~ ref(selected.id) ~ "/contacts/" ~ ref(contact.thread_id) ~ "/profile?actor=" ~ ref(contact.actor_id) ~ "&target=" ~ ref(contact.target) ~ "&channel=" ~ contact.channel|urlencode ~ "&name=" ~ contact.name|urlencode %}
  <div class="hd">
    {# the avatar opens the card about the conversation, over the chat #}
    <button class="av sm face" type="button" title="{{ t.text("profile.open") }}" hx-get="{{ profile_url }}" hx-target="#profile" hx-swap="outerHTML">{{ contact.thread_id|identicon|safe }}</button>
    {{ contact.name }}<span class="sub">{{ c.channels((contact.channel,)) }}{{ t.text("contacts." ~ contact.kind) }}</span>
  </div>
  <div class="chat" id="history" hx-get="{{ c.messages_url(selected, contact) }}{% if latest %}&latest={{ latest|urlencode }}{% endif %}" hx-trigger="load" hx-swap="outerHTML"><div class="loading">{{ c.icon("loader-circle") }}</div></div>
  <div id="profile" hidden></div>
  {% endif %}
</div>