{% if oob %}<div hx-swap-oob="beforeend:#toasts">{% endif %}
<div class="toast align-items-center{% if bad %} text-bg-danger{% endif %}"
     role="alert" aria-live="assertive" aria-atomic="true"
     hx-on::load="bootstrap.Toast.getOrCreateInstance(this).show();"
     hx-on:hidden.bs.toast="this.remove();">
  <div class="d-flex">
    <div class="toast-body">{{ text }}</div>
    <button type="button"
            class="btn-close{% if bad %} btn-close-white{% endif %} me-2 m-auto"
            data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>
{% if oob %}</div>{% endif %}