{% comment %}
Floating toast stack for Django messages. Rendered outside <main> so it never
disturbs page layout (the old top-of-main alert block used to shove the pass
page around). z-index sits above the pass action bar (1030).
{% endcomment %}
{% if messages %}
<div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1100;">
    {% for message in messages %}
    {% if message.tags == 'error' %}{% with level='danger' %}
    <div class="toast align-items-center text-bg-{{ level }} border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
        <div class="d-flex">
            <div class="toast-body">{{ 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>
    {% endwith %}{% else %}{% with level=message.tags|default:'info' %}
    <div class="toast align-items-center text-bg-{{ level }} border-0" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body">{{ 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>
    {% endwith %}{% endif %}
    {% endfor %}
</div>
{% endif %}