{% 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 #}
{% set back = "/agents/" ~ ref(selected.computer_id) ~ "/" ~ ref(selected.id) ~ ("?review=pending" if asked else "") if selected else "/agents" %}
<div class="col wide" id="chat" data-pane="chat" data-thread="{{ ref(contact.thread_id) if contact else '' }}" data-target="{{ contact.target if contact else '' }}" data-active="{{ 'true' if contact else 'false' }}">
  {% if contact and asked %}
  {% call c.column_header(contact.name, back=back) %}
    <span class="sub">{{ c.channels((contact.channel,)) }}{{ t.text("contacts." ~ contact.kind) }} · <span class="badge review">{{ t.text("review.pending") }}</span></span>
    <span class="chat-actions">{{ c.search_button() }}</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">
    {{ c.back_link(back) }}
    {# 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-get="url" x-data="contactName" data-name="{{ contact.name }}" data-thread="{{ ref(contact.thread_id) }}" @contact-name.window="update($event)" x-bind="opener" hx-target="#profile" hx-swap="outerHTML">{{ contact.thread_id|identicon|safe }}</button>
    <span class="heading" x-data="contactName" data-name="{{ contact.name }}" data-thread="{{ ref(contact.thread_id) }}" x-text="name" @contact-name.window="update($event)">{{ contact.name }}</span><span class="sub">{{ c.channels((contact.channel,)) }}{{ t.text("contacts." ~ contact.kind) }}</span>
    <span class="chat-actions"><span class="search-location" role="status">{{ t.text('search.located') }}</span>{{ c.search_button() }}</span>
  </div>
  <div class="chat" id="history" hx-get="{{ c.messages_url(selected, contact) }}{% if focus %}&focus={{ focus|urlencode }}{% elif latest %}&latest={{ latest|urlencode }}{% endif %}" hx-trigger="load" hx-swap="outerHTML"><div class="loading">{{ c.icon("loader") }}</div></div>
  <div id="profile" hidden></div>
  {% elif selected %}
  <div class="hd"><span class="heading">{{ t.text('contacts.tab_chats') }}</span><span class="chat-actions">{{ c.search_button() }}</span></div>
  {% endif %}
</div>