{% 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>
                <article class="message {{ message|message_class }}">
                    <div class="message-body">
                        {{ message }}
                        <button class="delete" x-on:click="show = false;" style="position: absolute; top: 5px; right: 5px"></button>
                    </div></article>
                </div>
            </div>
        </div>
    {% endfor %}
{% endif %}
