{{ define "footer/compose" }}
  <div class="compose">
    <textarea
      class="compose__textarea"
      id="text-input"
      placeholder="Type a message..."
      aria-label="Message input"
      rows="1"
    ></textarea>
    <div class="compose__attachments" id="attachments"></div>
    <div class="compose__actions">
      <button
        type="button"
        class="compose__action-btn"
        id="attach"
        aria-label="Attach files"
      >
        <svg class="icon"><use href="/static/icons.svg#attach"></use></svg>
      </button>
      <input type="file" id="file-input" multiple hidden />
      <div class="compose__actions-right">
        <button
          type="button"
          class="compose__action-btn"
          id="transcribe"
          aria-label="Transcribe to text"
          title="Record and transcribe (does not send)"
        >
          <svg class="icon"><use href="/static/icons.svg#dictate"></use></svg>
        </button>
        <button
          type="button"
          class="compose__action-btn compose__action-btn--record"
          id="ptt"
          aria-label="Push to talk"
        >
          <svg class="icon"><use href="/static/icons.svg#mic"></use></svg>
        </button>
        <button
          type="button"
          class="compose__action-btn compose__action-btn--send"
          id="send"
          aria-label="Send message"
        >
          <svg class="icon compose__icon--send"><use href="/static/icons.svg#send"></use></svg>
          <svg class="icon compose__icon--stop"><use href="/static/icons.svg#stop"></use></svg>
        </button>
      </div>
    </div>
  </div>
{{ end }}
