{% set bs_class = {
  'success': 'bg-success text-white',
  'error':   'bg-danger text-white',
  'warning': 'bg-warning text-dark',
  'info':    'bg-info text-dark'
} %}

{% with messages = get_flashed_messages(with_categories=True) %}
  {% if messages %}
    <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1100;">
      {% for category, message in messages %}
        <div class="toast align-items-center {{ bs_class.get(category, 'bg-secondary text-white') }}" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="d-flex">
            <div class="toast-body">
              <strong class="me-2">{{ category|capitalize }}:</strong> {{ 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>

    <script>
      // Show all toasts on page load
      document.addEventListener("DOMContentLoaded", function () {
        var toastElList = [].slice.call(document.querySelectorAll('.toast'));
        toastElList.forEach(function (toastEl) {
          // Autohide after 5s; tweak as needed
          var t = new bootstrap.Toast(toastEl, { autohide: true, delay: 5000 });
          t.show();
        });
      });
    </script>
  {% endif %}
{% endwith %}