{% 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">
{% 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 %}
            {# Include an icon by default #}
            {% 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 %}
        {# Allow HTML to be embedded in messages #}
        {% 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 %}
</div>
