{% from "_macros.html" import icon %}
{#
  The composer, used both inside an existing chat and on /chat where no chat
  row exists yet.

  The only difference is where it posts. With a chat, the turn is appended to
  the thread in place; without one, /api/chats/start creates the chat and
  redirects, and the reply streams on arrival because the page renders the
  unfinished assistant message with its sse-connect. That is what stops an
  opened-and-abandoned chat ever being written to the database.
#}
<div class="composer" {% if can.get("files.upload") %}data-dropzone{% endif %}>
  {% if can.get("files.upload") %}
  <form id="upload-form" hx-post="/api/files{% if chat %}?chat_id={{ chat.id }}{% endif %}"
        hx-target="#attachments" hx-swap="beforeend"
        hx-encoding="multipart/form-data" hx-on::after-request="this.reset()">
    <input class="visually-hidden" type="file" name="file" id="file-input" multiple
           accept="image/*,.pdf,.txt,.md,.csv,.json,.py,.js,.ts,.rs,.go,.sh,.sql,.yaml,.yml,.toml,.log"
           onchange="window.lembas.uploadFiles(this.files); this.value = ''">
  </form>
  {% endif %}

  <div class="composer__inner">
    <div class="composer__attachments" id="attachments"></div>

    <form class="composer__form"
          {% if chat %}
          hx-post="/api/chats/{{ chat.id }}/messages"
          hx-target="#thread" hx-swap="beforeend"
          hx-on::after-request="if (event.detail.successful) {
            this.reset();
            document.getElementById('attachments').replaceChildren();
            window.lembas.autosize(this.querySelector('textarea'));
            window.lembas.scrollThread(true);
          }"
          {% else %}
          hx-post="/api/chats/start" hx-swap="none"
          {% endif %}>

      {# The chips live outside this form, so their hidden inputs are pulled in
         explicitly at submit time. #}
      <div hx-include="#attachments" hidden></div>
      {% if not chat and current_model %}
      <input type="hidden" name="model_id" value="{{ current_model.model_id }}">
      {% endif %}

      {% if can.get("files.upload") %}
      <button class="btn btn--icon composer__btn" type="button"
              aria-label="Attach a file" title="Attach a file"
              onclick="document.getElementById('file-input').click()">
        {{ icon("attach") }}
      </button>
      {% endif %}

      <textarea class="composer__input" name="content" rows="1"
                data-autosize data-max-height="320" data-composer-input
                placeholder="{% if chat %}Send a message…{% else %}Ask anything…{% endif %}"
                aria-label="Message" {{ 'autofocus' if not chat }}></textarea>

      <button class="btn btn--primary btn--icon composer__btn" type="submit"
              aria-label="Send">
        {{ icon("send") }}
      </button>
    </form>

    <p class="composer__hint">
      Enter to send, Shift+Enter for a new line.
      {% if can.get("files.upload") %}
        Drag files in, or paste an image.
        {% if current_model and not current_model.capabilities_json.get("vision") %}
          <strong>{{ current_model.label }} has no vision</strong>, so images
          will not be sent — documents still will.
        {% endif %}
      {% endif %}
    </p>
  </div>

  {% if can.get("files.upload") %}
  <div class="dropzone-overlay" aria-hidden="true">
    {{ icon("attach", "icon--lg") }}
    <span>Drop to attach</span>
  </div>
  {% endif %}
</div>