{% load phoxtail_design_tags i18n %}
{# account/messages.html — Message content only. #}
{# Rendered inside #messages-container-wrapper. Safe to replace via OOB swaps. #}
{# Requires account/messages_static.html to be included once on the page. #}
{% if messages %}
    <div id="messages-container" class="auth-toast-container">
        <div class="auth-toast-list">
            {% for message in messages %}
                <div id="message-{{ forloop.counter }}"
                     class="auth-toast auth-toast--hidden {% if 'error' in message.tags %}auth-toast--error{% elif 'success' in message.tags %}auth-toast--success{% elif 'warning' in message.tags %}auth-toast--warning{% else %}auth-toast--info{% endif %}">
                    <div class="auth-toast-body">
                        <span class="auth-toast-label">
                            {% if 'error' in message.tags %}
                                {% trans "Error" %}
                            {% elif 'success' in message.tags %}
                                {% trans "Success" %}
                            {% elif 'warning' in message.tags %}
                                {% trans "Warning" %}
                            {% else %}
                                {% trans "Info" %}
                            {% endif %}
                        </span>
                        <p class="auth-toast-text">{{ message }}</p>
                    </div>
                    <button onclick="dismissMessage(this)" class="auth-toast-dismiss">{% icon "close" %}</button>
                </div>
            {% endfor %}
        </div>
    </div>
{% endif %}