<div id="alerts" hx-swap-oob="true">
    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    {% for category, message in messages %}
    <div class="toast align-items-center text-bg-{{ 'success' if category == 'success' else 'danger' }}" role="alert"
        aria-live="assertive" aria-atomic="true" style="position: fixed; bottom: 20px; right: 20px; z-index: 1000;">
        <div class="d-flex">
            <div class="toast-body">
                {{ message }}
            </div>
            <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    </div>
    {% endfor %}
    {% endif %}
    {% endwith %}
</div>