{% from "_macros.html" import icon %}
{#
  A user turn switched into edit mode, replacing its bubble in place.

  Saving rewinds: the message is rewritten and everything after it is deleted,
  then the conversation runs again from that point. That is destructive, so the
  button says so and asks first.
#}
<article class="msg msg--user msg--editing" id="msg-{{ message.id }}">
  <div class="msg__gutter" aria-hidden="true">
    <span class="msg__initial">{{ (user.name or "?")[0]|upper }}</span>
  </div>

  <div class="msg__main">
    <header class="msg__meta">
      <span class="msg__author">{{ user.name or "You" }}</span>
      <span class="msg__model">editing</span>
    </header>

    <form class="edit-form"
          hx-post="/api/chats/{{ chat.id }}/messages/{{ message.id }}/edit"
          hx-target="#thread" hx-swap="innerHTML"
          hx-confirm="Rewind here? The {{ following }} message{{ '' if following == 1 else 's' }} after this one will be deleted."
          data-confirm-title="Rewind the conversation"
          data-confirm-label="Rewind and send">
      <textarea class="textarea" name="content" rows="3" data-autosize
                data-max-height="320" aria-label="Edit message"
                autofocus>{{ message.content }}</textarea>

      <div class="btn-row">
        <button class="btn btn--primary" type="submit">
          {{ icon("refresh", "icon--sm") }}
          {% if following %}Rewind and send{% else %}Send again{% endif %}
        </button>
        <button class="btn" type="button"
                hx-get="/api/chats/{{ chat.id }}/messages/{{ message.id }}/cancel-edit"
                hx-target="#msg-{{ message.id }}" hx-swap="outerHTML">
          Cancel
        </button>
        {% if following %}
        <span class="text-xs faint">
          {{ following }} later message{{ '' if following == 1 else 's' }} will be discarded.
        </span>
        {% endif %}
      </div>
    </form>
  </div>
</article>