{# The container to show the flash messages #}

<div class="toast-container" id="message-container">
    {% for label, messages in app.flashes() %}
        {% for message in messages %}
            {% set flash_title = label|replace({'success': 'flash.success', 'error': 'flash.error'
                , 'warning': 'flash.warning', 'notice': 'flash.notice', 'info': 'flash.info'}) %}
            {% set flash_symbol = label|replace({'success': 'fa-check-circle', 'error': 'fa-exclamation-triangle'
                , 'warning': 'fa-exclamation-circle', 'notice': 'fa-flag', 'info': 'fa-flag'}) %}

            {% set flash_bg = label|replace({'success': 'bg-success text-white',
                'error': 'bg-danger text-white', 'warning': 'bg-warning text-white',
                'notice': 'bg-info text-white', 'info': 'bg'})%}

            <div class="toast " role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
                <div class="toast-header {{ flash_bg }}">
                    {# <img src="..." class="rounded mr-2" alt="...">#}
                    <i class="fas fa-fw {{ flash_symbol }} mr-2"></i>
                    <strong class="mr-auto">{{ flash_title|trans }}</strong>
                    {#<small class="text-muted">11 mins ago</small> #}
                    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="toast-body {{ flash_bg }}">
                    {{ message | trans}}
                </div>
            </div>
        {% endfor %}
    {% endfor %}
</div>