{% load string_filters %}

{% comment %}
Use message tags to control these alerts.  Available tags include:
- safe: allow HTML in the message
- block: for longer messages - this adds extra padding
- noicon: don't show an icon
- error/success/info - these change the connotation of the alert
{% endcomment %}
{% load string_filters %}

{% comment %}
Use message tags to control these alerts.  Available tags include:
- safe: allow HTML in the message
- block: for longer messages - this adds extra padding
- noicon: don't show an icon
- error/success/info - these change the connotation of the alert
{% endcomment %}
<div id="messages" aria-live="assertive" class="toast-container position-fixed bottom-0 end-0 p-3 justify-content-end d-flex flex-column align-items-end" style="z-index: 9999;">
    {% if messages %}
        {% for message in messages %}
            <div class="toast show {% for tag in message.tags|split %}toast-{% if tag == 'error' %}danger{% else %}{{ tag }}{% endif %} {% endfor %}" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="true">
                <div class="toast-header">
                    <div class="me-auto {% for tag in message.tags|split %}text-{% if tag == 'error' %}danger{% else %}{{ tag }}{% endif %} {% endfor %}">
                        <b>
                            {% if 'success' in message.tags %}
                                <i class="fa fa-check-circle me-1"></i>
                            {% elif 'info' in message.tags %}
                                <i class="fa fa-info-circle me-1"></i>
                            {% elif 'warning' in message.tags %}
                                <i class="fa fa-exclamation-triangle me-1"></i>
                            {% elif 'danger' in message.tags or 'error' in message.tags %}
                                <i class="fa fa-exclamation-triangle me-1"></i>
                            {% endif %}
                        </b>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="close" tabindex="1"></button>
                </div>
                <div class="toast-body">
                    {% if 'safe' in message.tags %}
                        {{ message|safe }}
                    {% else %}
                        {{ message }}
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    {% endif %}
</div>