<div id="flash-messages-container">
    <div id="flash-messages">
        <div class="row">
            <div class="large-8 medium-10 small-11 large-centered medium-centered small-centered columns" id="flash-messages-content">
                {% if app.session.flashbag.has('success_messages') %}
                    <div class="success callout flash-messages" data-closable>
                        <i class="fi-check fa fa-check"></i>
                        {% for successMessage in app.session.flashbag.get('success_messages') %}
                            <div>{{ successMessage|raw }}</div>
                        {% endfor %}
                        <button class="close-button flash-messages-close-button" type="button" data-close>
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                {% endif %}
                {% if app.session.flashbag.has('error_messages') %}
                    <div class="alert callout flash-messages" data-closable>
                        <i class="fi-x-circle fa fa-times"></i>
                        {% for errorMessage in app.session.flashbag.get('error_messages') %}
                            <div>{{ errorMessage|raw }}</div>
                        {% endfor %}
                        <button class="close-button flash-messages-close-button" type="button" data-close>
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>