<div
  class="toast-container position-fixed top-0 end-0 p-3"
  id="toasts"
  hx-swap-oob="afterbegin"
>
  {% for message in messages %}
  <div
    class="toast align-items-center border-0 {{ message.tags }}"
    role="alert"
    aria-live="assertive"
    aria-atomic="true"
  >
    <div class="d-flex">
      <div class="toast-body">{{ message.message }}</div>
      <button
        type="button"
        class="btn-close btn-close-white me-2 m-auto"
        data-bs-dismiss="toast"
        aria-label="Close"
      ></button>
    </div>
  </div>
  {% endfor %}
</div>
