{% load i18n %}
{% load cradmin_icon_tags %}

{% if messages %}
    <div class="container">
        <ul id="django_cradmin_messages" role="complementary" class="list-unstyled" ng-controller="DjangoCradminMessagesCtrl">
            {% for message in messages %}
                <li>
                    <div class="alert-dismissable alert django-cradmin-alert-nomargin django-cradmin-alert-edge-to-edge
                                {% if message.tags == "error" %}
                                    alert-danger
                                {% else %}
                                    alert-{{ message.tags }}
                                {% endif %}
                            " ng-hide="messageIsHidden({{ forloop.counter0 }})"
                            role="alertdialog">

                        {% comment %}
                            The spinner is only here to give the user an indication of change when they
                            get the same error or success message each time they click a subit button.
                        {% endcomment %}
                        <span class="{% cradmin_icon 'loadspinner' %} pull-right django-cradmin-alert-loadspinner"
                              ng-show="loading"></span>

                        <button ng-show="!loading" class="close" ng-click="hideMessage({{ forloop.counter0 }})">
                            <span class="sr-only">{% trans "Close" %}</span>
                            <span class="{% cradmin_icon 'x' %}"></span>
                        </button>
                        <span class="sr-only">
                            {% if message.tags == "error" %}
                                {% trans "Error" %}
                            {% elif message.tags == "warning" %}
                                {% trans "Warning" %}
                            {% elif message.tags == "info" %}
                                {% trans "Info" %}
                            {% elif message.tags == "success" %}
                                {% trans "Success" %}
                            {% endif %}
                            :
                        </span>
                        {{ message }}
                    </div>
                </li>
            {% endfor %}
        </ul>
    </div>
{% endif %}
