<div aria-live="polite" aria-atomic="true" class="position-relative">
{# Position it: #}
{# - `.toast-container` for spacing between toasts #}
{# - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner #}
{# - `.p-3` to prevent the toasts from sticking to the edge of the container #}
<div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1021">
{# Then put toasts within #}
{% for label, messages in app.flashes %}
{% for message in messages %}
<div class="toast mb-2" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">
{% if label == 'success' %}
<i class="bi bi-check-square-fill text-success me-1"></i>
{% elseif label == 'info' %}
<i class="bi bi-question-square-fill text-info me-1"></i>
{% elseif label == 'warning' %}
<i class="bi bi-exclamation-square-fill text-warning me-1"></i>
{% elseif label == 'danger' or label == 'error' %}
<i class="bi bi-x-square-fill text-danger me-1"></i>
{% endif %}
{{ app_name }}
</strong>
<small class="text-muted">just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body bg-white rounded fs-6">
{{ message }}
</div>
</div>
{% endfor %}
{% endfor %}
</div>
</div>