<goat-button id="clear-btn">Clear</goat-button>

  <div class="application">
    <goat-notification-manager name="application-manager" position="bottom-right"></goat-notification-manager>

    <div class="sub-container">

      <goat-notification-manager name="sub-container-manager" position="top-right"></goat-notification-manager>
      <goat-button id="notification-btn">Notification</goat-button>
      <br><br>
      <goat-button id="notification-btn-dismissible">Dismissible notification</goat-button>
    </div>
  </div>

  <script>
    let count = 1;
    let notifications = [];
    document.getElementById('notification-btn').addEventListener('click', () => {
      window.dispatchEvent(
        new CustomEvent('goat-notification', {
          bubbles: true,
          detail: {
            target: 'application-manager',
            title: 'This is automatic closing notification ' + count++,
            state: 'success',
            subtitle: `This is a subtitle for the notification message ${count - 1}`,
            callback: function(notificationId) {
              notifications.push(notificationId);
            }
          },
        }),
      );
    });

    document.getElementById('clear-btn').addEventListener('click', () => {
      window.dispatchEvent(
        new CustomEvent('goat-notification-dismiss', {
          bubbles: true,
          detail: {
            target: 'application-manager',
            notifications: notifications,
          },
        }),
      );

      notifications = [];
    });

    document.getElementById('notification-btn-dismissible').addEventListener('click', () => {
      window.dispatchEvent(
        new CustomEvent('goat-notification', {
          bubbles: true,
          detail: {
            target: 'sub-container-manager',
            title: 'This is dismissible notification ' + count++,
            state: 'warning',
            dismissible: true,
            subtitle: `This is a subtitle for the notification message ${count - 1}`,
            action: 'Action',
          },
        }),
      );
    });
  </script>