WYGIWYH/app/templates/common/fragments/toasts.html

{% load i18n %}
{% load toast_bg %}
{% if messages %}
  {% for message in messages %}
      <div class="toasty alert alert-{{ message.tags | toast_bg }}"
           role="alert"
           aria-live="assertive"
           aria-atomic="true">
          <div class="flex items-center justify-between w-full">
              <div class="flex items-center gap-2">
                  <i class="{{ message.tags | toast_icon }} fa-fw"></i>
                  <div>
                      <strong>{{ message.tags | toast_title }}</strong>
                      <div>{{ message }}</div>
                  </div>
              </div>
              <button type="button"
                      class="btn btn-ghost btn-sm btn-circle"
                      _="on click remove closest .toasty"
                      aria-label={% translate 'Close' %}>
                  <i class="fa-solid fa-xmark"></i>
              </button>
          </div>
      </div>
  {% endfor %}
{% endif %}