{% import "components.html" as c with context %}
<div class="module" data-view="{{ 'profile' if profile is defined and profile else 'contacts' if selected else 'agents' }}">
<div class="col list" data-pane="agents">
  {{ c.column_header(t.text("agents.title"), brand=true) }}
  {% include "agent_list.html" %}
</div>
{# an agent's own page takes the two columns right of the list #}
{% if profile is defined and profile %}
{% include "agent_profile.html" %}
{% else %}
{% if selected %}
<div class="col list" data-pane="contacts">
  {% include "agent_contacts_head.html" %}
  {% set base = "/agents/" ~ ref(selected.computer_id) ~ "/" ~ ref(selected.id) %}
  {% set query = ["review=pending" if pending, "selected=" ~ ref(contact.thread_id) if contact]|select|join("&") %}
  <div class="contacts-toolbar">
    <div class="switch text">
      <button class="tab{% if not pending %} on{% endif %}" type="button" title="{{ t.text("contacts.tab_chats") }}" hx-get="{{ base }}" hx-target="#main" hx-push-url="true" hx-sync="#contacts:replace">{{ c.icon("message-circle") }}{{ t.text("contacts.tab_chats") }}</button>
      <button class="tab{% if pending %} on{% endif %}" type="button" title="{{ t.text("contacts.tab_requests") }}" hx-get="{{ base }}?review=pending" hx-target="#main" hx-push-url="true" hx-sync="#contacts:replace">{{ c.icon("user-plus") }}{{ t.text("contacts.tab_requests") }}<span class="n" id="pending-review" hidden></span></button>
    </div>
    <span class="chat-actions">{{ c.search_button() }}</span>
  </div>
  {# the conversations are the node's to list, so the page comes up first and
     the column asks for them once it is there #}
  <div class="list-items" id="contacts" hx-get="/agents/{{ ref(selected.computer_id) }}/{{ ref(selected.id) }}/contacts{{ ("?" ~ query) if query }}" hx-trigger="load" hx-swap="outerHTML"><div class="loading">{{ c.icon("loader") }}</div></div>
</div>
{% endif %}
{% include "chat.html" %}
{% if selected %}{% include "search.html" %}{% endif %}
{% endif %}
</div>