{% comment %}
The thread's identity line and its two conversation controls.

Its own partial with its own endpoint because it holds *state*, and state goes
stale: "Mark done" posts and gets a 204 back, so without a refresh the button
kept its old label and its old hidden value, and the only transition an agent
could make was the one they had just made. inboxThreadChanged already told the
body and the panel; this listens to the same event.

Not folded into the polled body instead, which would have been one fewer
request: the assignee <select> lives here, and a three-second swap would close
it under the reader mid-choice.
{% endcomment %}
{% load common_extras %}
<header class="ib-thread-header">
  {% comment %}
    Below `xl` the list and conversation take turns (see the media query in styles.css), so
    the thread needs a way back to the list. A plain link, because on a phone
    "back" is a whole-page change and there is no second pane to swap.
  {% endcomment %}
  <a class="btn-icon-hover xl:hidden" href="{% url 'inbox:list' workspace_id=request.workspace.id %}"
     aria-label="Back to conversations">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
    </svg>
  </a>
  {% comment %}
    The person, then the channel they wrote in on and the account it reached
    (HANDOFF §3, Inbox). The account is ours, hence "via": a contact's own
    handle is not something every platform hands over.
  {% endcomment %}
  <span class="ib-avatar ib-avatar-md" aria-hidden="true">{{ conversation.contact.display_name|make_list|first|upper }}</span>
  <div class="ib-thread-title">
    <div class="ib-thread-name">{{ conversation.contact.display_name }}</div>
    <div class="ib-thread-sub">
      <span class="pi-chip ib-sub-chip {{ conversation.channel_connection.platform|platform_class }}" aria-hidden="true">
        {% include "partials/_platform_icon.html" with platform=conversation.channel_connection.platform size="sm" %}
      </span>
      <span class="truncate">{{ conversation.channel_connection.get_platform_display }} · via {{ conversation.channel_connection.display_name }}</span>
    </div>
  </div>

  <div class="ib-thread-actions">
  {% if can_reply %}
    {% comment %}
      Assignee first, Mark done after it: the done button is the one `e`
      presses, and it sits where the eye finishes. A real <select> dressed as
      the design's quiet "Unassigned ▾" button, so the keyboard and screen
      readers get a native control.
    {% endcomment %}
    <form hx-post="{% url 'inbox:assign' workspace_id=request.workspace.id conversation_id=conversation.id %}"
          hx-swap="none"
          hx-trigger="change">
      {% csrf_token %}
      <label class="sr-only" for="assignee-{{ conversation.id }}">Assignee</label>
      <select class="ib-assignee" id="assignee-{{ conversation.id }}" name="assignee">
        <option value="">Unassigned</option>
        {% for membership in members %}
          <option value="{{ membership.user_id }}" {% if conversation.assignee_id == membership.user_id %}selected{% endif %}>{{ membership.user.display_name }}</option>
        {% endfor %}
      </select>
    </form>

    <form hx-post="{% url 'inbox:state' workspace_id=request.workspace.id conversation_id=conversation.id %}" hx-swap="none">
      {% csrf_token %}
      {% if conversation.state == "done" %}
        <input type="hidden" name="state" value="open">
        <button type="submit" class="ib-head-btn" data-shortcut="done">Reopen</button>
      {% else %}
        <input type="hidden" name="state" value="done">
        <button type="submit" class="ib-head-btn" data-shortcut="done">Mark done</button>
      {% endif %}
    </form>
  {% else %}
    <span class="ib-chip">Read only</span>
  {% endif %}
    {% comment %}
      Shows and hides the contact panel. `info` and `toggleInfo` live on the
      page's own x-data (inbox/list.html), so the choice survives this header
      being re-fetched and a different conversation being opened.
    {% endcomment %}
    <button type="button" class="ib-info-toggle" :class="info && 'is-on'" @click="toggleInfo()"
            :aria-pressed="info ? 'true' : 'false'" aria-controls="inbox-sidebar"
            aria-label="Contact details" title="Contact details">
      <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/></svg>
    </button>
  </div>
</header>