{% load ui %}

{% if messages %}
    {% for message in messages %}
        <div hx-swap-oob="{% if append %}beforeend:#message{% else %}innerHTML:#message{% endif %}">
            <div class="mb-2" style="min-width: 340px; max-width: 340px" x-data="{ show: false }" x-show="show" x-cloak="" x-init="show = true; {% if not persistent %}setTimeout(() => show = false, 4000){% endif %}" x-transition.duration.200ms>
                <div class="notification is-light has-text-centered {{ message|message_class }}" style="box-shadow: 2px 2px 5px">
                    {% if persistent %}<button class="delete" x-on:click="show = false;"></button>{% endif %}
                    {{ message }}
                </div>
            </div>
        </div>
    {% endfor %}
{% endif %}
