{% load i18n %}
<form
  hx-post="{% url 'django_anyllm:message_create' chat.pk %}"
  hx-target="#anyllm-messages"
  hx-swap="beforeend"
  enctype="multipart/form-data"
  hx-on::before-request="const btn = this.querySelector('button[type=submit]'); btn.disabled = true; btn.dataset.original = btn.innerHTML; btn.innerHTML = '<svg width=\'14\' height=\'14\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><circle cx=\'12\' cy=\'12\' r=\'10\'/><path d=\'M12 6v6l4 2\'/></svg> {% trans "Sending..." %}';"
  hx-on::after-request="this.reset(); const ta = this.querySelector('textarea'); ta.style.height = 'auto'; const btn = this.querySelector('button[type=submit]'); btn.disabled = false; btn.innerHTML = btn.dataset.original || '{% trans "Send" %}'; this.querySelector('.anyllm-file-name').textContent = ''; const empty = document.querySelector('.anyllm-empty'); if (empty) empty.remove();"
>
  {% csrf_token %}
  <div class="anyllm-input-wrapper">
    <textarea
      name="content"
      rows="1"
      placeholder="{% trans 'Type a message...' %}"
      class="anyllm-input"
      oninput="autoResizeTextarea(this)"
      onkeydown="if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') { event.preventDefault(); this.form.requestSubmit(); }"
    ></textarea>
    <div class="anyllm-input-actions">
      <div class="anyllm-input-left">
        <label class="anyllm-file-btn" title="{% trans 'Attach file' %}">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
          <input type="file" name="file" multiple onchange="const names = Array.from(this.files).map(f => f.name).join(', '); this.parentElement.nextElementSibling.textContent = names || '';">
        </label>
        <span class="anyllm-file-name"></span>
      </div>
      <div style="display:flex;align-items:center;gap:0.75rem;">
        <span class="anyllm-hint">{% trans "Ctrl + Enter to send" %}</span>
        <button type="submit" class="anyllm-send-btn">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
          {% trans "Send" %}
        </button>
      </div>
    </div>
  </div>
</form>