customElements.whenDefined("pop-notify").then(() => {
  console.log("READY!");
  
  let id = 0;
  function createBootstrapToast() {
    id++;

    return `
<div id="toast-${id}" class="toast show" role="status">
<div class="toast-header">
<div class="me-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
</svg>
</div>
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message nb ${id}.
</div>
</div>
</div>
`;
  }

  function popNotify() {
    return customElements.get("pop-notify");
  }

  // Example integration
  popNotify().configure({
    iconTransformer: (icon) => {
      return `<span class="material-symbols-outlined">${icon}</span>`;
    }
  });

  document
    .querySelector("#simpleNotification")
    .addEventListener("click", (ev) => {
      popNotify().notifyHtml(
        `<div class="notification notification-simple">A simple notification! <button type="button" class="btn-close" aria-label="Close"></button></div>`
      );
    });

  document
    .querySelector("#errorNotification")
    .addEventListener("click", (ev) => {
      popNotify().notify(
        "Nope you can't do that. <a href='/retry'>Retry one more time ?</a>",
        {
          variant: "error",
          icon: "error",
          onclick: (ev, inst) => {
            ev.preventDefault();
            popNotify().notify("You really thought it would work???", {
              variant: "error",
              icon: "error"
            });
          }
        }
      );
    });

  document
    .querySelector("#questionNotification")
    .addEventListener("click", (ev) => {
      popNotify().notify("What do you think ?", {
        variant: "question",
        icon: "help"
      });
    });

  document
    .querySelector("#infoNotification")
    .addEventListener("click", (ev) => {
      popNotify().notify("This is something you should know", {
        variant: "info",
        icon: "info"
      });
    });

  document
    .querySelector("#complexNotification")
    .addEventListener("click", (ev) => {
      popNotify().notify(
        "This is the body. Ithasawordthathasnobreakingspacebutshouldneverthelessnotexpandoutsideofthetoast",
        {
          variant: "success",
          header: "Success!",
          icon: "check"
        }
      );
    });

  document
    .querySelector("#stickyNotification")
    .addEventListener("click", (ev) => {
      popNotify().notify("It doesn't close automatically", {
        variant: "warning",
        header: "Sticky!",
        autohide: false,
        icon: "warning",
        actions: [
          {
            label: "Some action",
            class: "btn-warning",
            onclick: (ev, inst) => {
              alert("You clicked on some action");
            }
          },
          {
            label: "Just close",
            class: "btn-dark",
            onclick: (ev, inst) => {
              inst.close();
            }
          }
        ]
      });
    });

  document.querySelector("#toastBtn").addEventListener("click", (ev) => {
    popNotify().notifyHtml(createBootstrapToast(), false);
  });

  document
    .querySelector("#autohideToastBtn")
    .addEventListener("click", (ev) => {
      popNotify().notifyHtml(createBootstrapToast());
    });

  document.querySelector("#position").addEventListener("change", (ev) => {
    console.log(`position changed to ${ev.target.value}`);
    popNotify().configure({
      placement: ev.target.value
    });
  });
});