{% load string_filters oscar_announcements_tags %}

<div id="messages">
{% if messages %}
    {% for message in messages %}
        <div class="alert {% for tag in message.tags|split %}alert-{% if tag == 'error' %}danger{% else %}{{ tag }}{% endif %} {% endfor %} alert-dismissible fade show" role="alert">
            <div class="alertinner {% if 'noicon' not in message.tags %}wicon{% endif %}">
                {% if 'noicon' not in message.tags %}
                    {% if 'success' in message.tags %}
                        <i class="fas fa-check-circle"></i>
                    {% elif 'info' in message.tags %}
                        <i class="fas fa-info-circle"></i>
                    {% elif 'warning' in message.tags %}
                        <i class="fas fa-exclamation-triangle"></i>
                    {% elif 'danger' in message.tags or 'error' in message.tags %}
                        <i class="fas fa-exclamation-circle"></i>
                    {% endif %}
                {% endif %}
                {% if 'safe' in message.tags %}
                    {{ message|safe }}
                {% else %}
                    {{ message }}
                {% endif %}
            </div>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    {% endfor %}
{% endif %}
{% render_announcements %}
</div>