<section class="demo-section" aria-labelledby="chat-inputs-heading">
  <h2 id="chat-inputs-heading">Chat Inputs</h2>
  <p>Rich input containers from the <em>Input Container Chat</em> and <em>Input Container Messenger</em> Figma frames.</p>

  <div class="demo-row demo-row-vertical" style="max-width: 560px;">
    <div class="chat-input">
      <button class="chat-input__prefix" type="button" aria-label="Attach"><i class="ph ph-plus"></i></button>
      <textarea class="chat-input__field" rows="1" placeholder="Type a message..."></textarea>
      <div class="chat-input__actions">
        <button class="chat-input__action chat-input__action--mic" type="button" aria-label="Voice"><i class="ph ph-microphone"></i></button>
        <button class="chat-input__action chat-input__action--send" type="button" aria-label="Send"><i class="ph ph-arrow-up"></i></button>
      </div>
    </div>

    <div class="chat-input chat-input--messenger">
      <button class="chat-input__prefix" type="button" aria-label="Attach"><i class="ph ph-plus"></i></button>
      <textarea class="chat-input__field" rows="1" placeholder="Message..."></textarea>
      <div class="chat-input__actions">
        <button class="chat-input__action chat-input__action--send" type="button" aria-label="Send"><i class="ph ph-paper-plane-right"></i></button>
      </div>
    </div>
  </div>

  <h3>Vue chat inputs</h3>
  <div id="vue-chat-input-app" class="vue-mount"></div>
  <script type="module">
    import { createApp } from "vue";
    import { GnChatInput } from "/vue/index.js";

    createApp({
      components: { GnChatInput },
      data() {
        return {
          chatValue: "",
          messengerValue: "",
          chatActions: [
            { icon: "ph-microphone", label: "Voice", type: "mic" }
          ]
        };
      },
      template: `
        <div class="demo-row demo-row-vertical" style="max-width: 560px;">
          <gn-chat-input v-model="chatValue" placeholder="Type a message..." send-icon="ph-arrow-up" :actions="chatActions" @send="console.log('send', chatValue)" @action="console.log('action', $event)">
            <template #prefix><button class="chat-input__prefix" type="button" aria-label="Attach"><i class="ph ph-plus"></i></button></template>
          </gn-chat-input>
          <gn-chat-input v-model="messengerValue" variant="messenger" placeholder="Message..." @send="console.log('send', messengerValue)">
            <template #prefix><button class="chat-input__prefix" type="button" aria-label="Attach"><i class="ph ph-plus"></i></button></template>
          </gn-chat-input>
        </div>
      `
    }).mount("#vue-chat-input-app");
  </script>
</section>