<section class="demo-section">
  <h2>Toasts</h2>

  <div class="demo-row">
    <button class="btn btn-sm btn-primary" type="button" onclick="VMKUIKit.Toasts.createInfo('Info', 'This is an info toast.', { lifetime: 4000 }).show()">
      Info toast
    </button>
    <button class="btn btn-sm btn-success" type="button" onclick="VMKUIKit.Toasts.createSuccess('Success', 'Operation completed.', { lifetime: 4000 }).show()">
      Success toast
    </button>
    <button class="btn btn-sm btn-warning" type="button" onclick="VMKUIKit.Toasts.createWarning('Warning', 'Please review your settings.', { lifetime: 4000 }).show()">
      Warning toast
    </button>
    <button class="btn btn-sm btn-danger" type="button" onclick="VMKUIKit.Toasts.createError('Error', 'Something went wrong.', { lifetime: 4000 }).show()">
      Error toast
    </button>
  </div>

  <h3>Vue toasts</h3>
  <div id="vue-toasts-app" class="vue-mount"></div>
  <script type="module">
    import { createApp } from "vue";
    import { GnToastProvider, GnButton, useToast } from "/vue/index.js";

    createApp({
      components: { GnToastProvider, GnButton },
      setup() {
        const toast = useToast();
        return { toast };
      },
      template: `
        <gn-toast-provider :lifetime="4000">
          <div class="demo-row">
            <gn-button variant="primary" size="sm" @click="toast.info({ title: 'Info', text: 'Vue info toast.' })">Info</gn-button>
            <gn-button variant="success" size="sm" @click="toast.success({ title: 'Success', text: 'Vue success toast.' })">Success</gn-button>
            <gn-button variant="warning" size="sm" @click="toast.warning({ title: 'Warning', text: 'Vue warning toast.' })">Warning</gn-button>
            <gn-button variant="danger" size="sm" @click="toast.error({ title: 'Error', text: 'Vue error toast.' })">Error</gn-button>
          </div>
        </gn-toast-provider>
      `
    }).mount("#vue-toasts-app");
  </script>
</section>