{% set toasts = get_toasted_messages(with_categories=true) %}

{% if toasts %}
<script>document.addEventListener("DOMContentLoaded", () => {
  {% for category, message, title in toasts %}
    window.dispatchEvent(new CustomEvent("show-toast", { detail: {
      message: {{ message | tojson }},
      type: {{ category.replace('toast-', '') | tojson }},
      title: {{ title | tojson }},
    } }));
  {% endfor %}
});</script>
{% endif %}

<div class="toast-container position-fixed bottom-0 end-0 p-3"
     x-data="ToastManager"
     @show-toast.window="show($event.detail)">
  <template x-for="item in toasts" :key="item.id">
    <div class="toast align-items-center border-0"
         :data-toast-id="item.id"
         role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header" :class="'text-bg-' + item.type">
        <strong  class="me-auto" x-text="item.title"></strong>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body" x-html="item.message"></div>
    </div>
  </template>
</div>